【HTML】：超文本标记语言的基础入门元素

news2024/11/26 22:39:14

目录

  • 1️⃣前言
  • 2️⃣概述
    • 🌱什么是HTML？
    • 🌱初步认识HTML
  • 3️⃣了解概念
    • ✨基本结构
    • ✔️元素
    • 🔋 标签
    • 💡属性
  • 4️⃣基本内容学习
    • 标签
    • 特殊字符
    • 属性
      • 图像标签的属性
      • 超链接标签的属性
  • 5️⃣锚点链接
  • 6️⃣表格
    • 表格标签
    • 表格标签的属性
    • 合并单元格
  • 7️⃣表单
    • 表单域
    • 表单元素
    • input
    • select
    • textarea
    • label标签
  • 8️⃣列表
    • 无序列表
    • 有序列表
    • 自定义列表

1️⃣前言

今天的笔记内容：

  • 记录HTML的一系列基础标签以及部分属性。

2️⃣概述

🌱什么是HTML？

  • HTML是超文本标记语言（全称为HyperText Markup Language），注意，是标记语言，不是编程语言（较容易学）
  • 也就是说，HTML是一种用于创建网页的标准标记语言，相当于一种信息组织的方式，其包括一系列标签，通过这些标签，可以将网络上的文档格式统一，形成描述性文本。
  • 我们使用HTML标记语言，将所需要表达的信息按某种规则（如：文字如何处理，画面如何安排，图片如何显示等）写成HTML文档。HTML 文档包含了HTML 标签及文本内容
  • 每一个HTML文档都是一种静态的网页文件，通过浏览器来识别，解析，并将这些HTML文档“翻译”成可以识别的信息。这就是网页。

🌱初步认识HTML

  1. HTML文档的后缀名为 .html 或 .htm
  2. 代码编辑器推荐VS Code，一个实用的编辑器能提高你的工作效率。
  3. 我们编写一个HTML文件，将后缀名改为 .html，然后用浏览器打开文件即可。
  4. 文档的列宽是不受限制的，即多个标记可写成一行，甚至整个文件可写成一行。
  5. HTML注释由<!--开始，由符号-->结束，例如<!--注释内容-->
  6. HTML 使用标记标签来描述网页，是由尖括号包围的关键词，一般成对出现。
    比如：<标签>文本内容</标签>
  7. 浏览器会忽略了源代码中空格与换行，即想要有空格的效果，就必须写上相应的空格标签
  8. HTML文档也叫做 Web 页面
  9. 浏览器是不会显示HTML标签，而标签的使用决定了网页内容的展示方式。
  10. 段落的行数取决于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

举个例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>网站的标题</title>
</head>
<body>
    <h1>文章的标题</h1>
    <p>文章的段落</p>
</body>
</html>

效果如下：

  • <!DOCTYPE html> ：是一种声明（不区分大小写），位于文档最前面，声明该网页是 HTML5 文档，让浏览器正确显示网页；
  • <html lang="zh-CN">表示该网页是中文网页；
  • 对于中文网页需要使用<meta charset="utf-8">声明编码格式，否则会出现乱码。
  • <html>和</html>是 HTML 页面的根标签。是必须包含的，用于描述网页。
  • <head>和</head> 之间包含的文本是用于描述文档的元数据，即<meta>，<head>标签可以包含脚本，样式，meta信息等
  • <title> 和</title>描述了网页的标题。
  • <body> 和</body>之间的文本包含了网页的可见内容。
    -标签 <h1> 和</h1>定义了一个大标题。标签<p> 和</p>定义了一个段落。

3️⃣了解概念

✨基本结构

HTML文档的基本结构

一、html

  • <html>元素定义整个HTML文档;
  • 该元素拥有一个开始标签​<html> 和一个结束标签​</html>​
<html>
...
</html>

二、head

  • <head>元素包含所有头部标签元素，如标题，元数据，脚本等
<html>
	<head>
	...
	</head>
</html>

三、body

  • body定义了文档的主体；
  • 也就是网页的可见内容，如文本，图像，超链接等。
<html>
	<head>
	...
	</head>
	
	<body>
	...
	</body>
</html>

✔️元素

  • 一个HTML 文档就是由各个 HTML 元素定义的。即HTML文档​由嵌套的 HTML元素构成​。
  • 元素是由两个标签来组成，比如 <html>和</html>**
  • 开始标签称作起始标签，结束标签称为闭合标签，
  • 两个标签包括起来的内容就是元素的内容
  • 各个HTML元素可以嵌套，有一定的层级关系
  • 如果元素有两个标签，那么不能忘了写上结束标签，虽然不写可能没有问题，但是语法上考虑，以及可能产生不可预料的结果或错误，标签还是得写全。（注：在未来的 HTML 版本中，不允许省略结束标签）
  • 大多数 HTML 元素都有属性，属性就是为元素提供的附加信息
  • 空元素没有内容，比如< br />标签，代表换行，是一个空元素。
  • 注意，HTML标签对于大小写不敏感，即<p>和<P>是一样的。

🔋 标签

💡属性

  • HTML元素是可以设置附加信息，也就是元素的属性；
  • 属性总是以值键对的形式定义在开始标签中。
  • 属性的值需写在双引号内（也可以使用单引号）
  • 属性与属性之间用空格隔开

下面给出适用于大部分元素的常用属性：

属性描述
class为html元素定义一个或多个类名，通常用于指向​样式​表中的类。
id定义元素的唯一 id（只能填写一个，多个无效）
style规定元素的内联样式 (inline style)
title规定元素的额外信息（可在工具提示中显示）

4️⃣基本内容学习

标签

标签含义
<!-- -->注释标签，可添加注释内容
<html> </html>HTML最外层的元素，相当于其他元素的容器
<body> </body>HTML文档的主体部分，其包含网页的全部内容
<h1> </h1>标题：<h1>定义最大的标题，<h6>定义最小的标题
<p> </p>段落元素，将文档分为多个层次
<br />换行元素，相当于一个换行符
<hr />水平线：在网页中创建一条水平线。用于分割内容
<strong> </strong>加粗
<b> </b>加粗
<em> </em>倾斜
<i> </i>倾斜
<del> </del>删除线
<s> </s>删除线
<ins> </ins>下划线
<u> </u>下划线
<div> </div>无具体语义，用于布局，独占一行，表示一个大盒子
<span> </span>无具体语义，用于布局，一行可有多个span，表示一个小盒子
<img src="url" />图像标签，其中src是必需属性，url表示图像文件的路径
<a href="url"> </a>超链接标签，其中href是必需属性，url表示链接目标的路径

特殊字符

在HTML文档中，有时一些特殊字符无法直接使用，此时可以用以下代码替代即可。

代码对应字符
&nbsp;空格
&lt;<
&gt;>
&amp;&
&yen;¥
&copy;©
&reg®
&deg;°
&plusmn;±
&times;×
&divide; ÷
&sup2;²
&sup3; ³

属性

图像标签的属性

属性名属性值含义
src图片路径src是图像标签的必须属性
alt文本替换文本，当图像无法显示时替换的文本
title文本提示文本，当鼠标提放在图像上时，自动显示的文本
width像素图像的宽度
height像素图像的高度
border像素图像的边框粗细

超链接标签的属性

属性名含义
href超链接标签的必须属性，用于指定url地址
target可选属性，用于指定链接页面的打开方式，默认为_self，可选择为新窗口打开，即_blank

5️⃣锚点链接

我们阅读网页文章时（类似百科网站），有一种目录功能，当我们点击该链接是会跳转到当前页面的某个位置，这种效果就是用锚点链接实现的。

具体做法如下：

  • 原链接设置属性href：<a href="#name"> </a>
  • 目标位置设置属性id：<h1 id="name"> </h1>
  • 注意，上述方法中，href的属性值必须带上符号#，而目标位置的标签中应添加id属性为#后面的名字（名字自己定义即可，但是必须带上#号）

6️⃣表格

表格标签

标签含义
<table> </table>用于定义表格的标签
<tr> </tr>用于定义表格中的行，必须嵌套在table标签中
<td> </td>用于定义表格中的单元格，必须嵌套在tr标签中
<th> </th>用于定义表格中的第一行，效果为加粗居中显示
<thead> </thead>表格结构标签，用于定义表格的头部，<thead>内部一定要有<tr>标签，一般是位于第一行
<tbody> </tbody>表格结构标签，用于定义表格的主体，也就是存放数据本体

表格标签的属性

属性名含义
align表格相对周围元素的对齐方式
border定义表格是否有边框，默认为" "，也就是没有边框，将border值改为"1"即表示有边框
cellpadding规定单元边沿与其内容之间的空白值，默认为1像素
cellspacing规定单元格之间的空白，默认为2像素
width可规定表格的宽度

合并单元格

  1. 首先确定合并方式：即跨行合并还是跨列合并；
  2. 找到目标单元格，语法为合并方式=要合并的单元格数量；
  3. 比如<td colspan="2"></td>表示跨列合并两个单元格，<td rowspan="3"></td>表示跨行合并三个单元格。
  4. 最后，删除多余的单元格即可。

7️⃣表单

在HTML中，一个完整的表单通常由表单域、表单元素和提示信息3部分组成。下面主要记录表单元素的用法。

表单域

表单域是一个包含表单元素的区域，由<form></form>标签定义的，目的在于收集和传递用户信息（<form>标签会将表单内的元素信息提交给服务器）
<form>标签的常用属性：

属性属性值含义
actionURL地址用于指定接收并处理表单数据的服务器程序的URL地址
methodget / post用于设置表单数据的提交方式
name名称用于指定表单的名称，这样可以区分用一个页面中的多个表单域

表单元素

在表单域内，我们可以定义多个表单元素，这些表单元素就是允许用户在表单中输入或选择的内容控件。

input

输入表单元素，属于单标签，用于收集用户信息。

  • input标签的属性
属性属性值含义
type另作表格记录根据不同的type属性值，可以指定不同的控件类型
name自己定义用于定义input元素的名称
value自己定义用于规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中字符的最大长度
  • input标签中type属性的取值
属性值用途
text定义文本字段，用户可以在其中输入文本（默认20个字符）
password定义密码字段，可以让用户输入密码
radio定义单选按钮
checkbox定义复选框
submit定义提交按钮，此时表单数据会被发送到服务器中
reset定义重置按钮，
button定义可点击的按钮（可用于通过js启动脚本）
file定义输入字段和“浏览按钮”，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮

需要注意的是：

  1. name和value是每个表单元素都有的属性值，主要给后台人员使用
  2. 属性name是input标签的名字，一般要求单选按钮都要有相同的name值，这样可以实现多选一效果
  3. input标签的checked属性一般用于单选按钮和复选框，用于定义网页中默认选中的表单元素

select

下拉表单元素，定义下拉列表，定义多个选项让用户选择（可节约页面空间），需要注意的是，select标签中必须至少包含一对option标签，而且，一旦在select标签内的某个option标签中定义selected="selected"，则当前选项为默认选中项。

<body>
    请选择城市：
    <select name="城市：">
        <option>上海</option>
        <option>北京</option>
        <option>广州</option>
    </select>
</body>

效果如下：

textarea

文本域元素，用于定义多行文本输入控件，这样就可以输入更多的文字，适用于用户输入内容较多的情况。

<textarea>
    请输入内容...
</textarea>

label标签

label标签用于绑定表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）选择到对应的表单元素上（可增加用户体验）举例如下：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

需要注意的是，label标签的for属性应当与对应表单元素的id属性相同。这样才能产生关联。

8️⃣列表

无序列表

标签<ul>可以表示无序列表，一般以项目符号呈现列表项，并且在ul标签中使用<li>标签定义列表项。

<ul>
    <li>内容...</li>
	<li>内容...</li>
	<li>内容...</li>
</ul>

效果如下：

需要注意的是：无序列表中的各个列表项之间都是没有顺序级别之分的，也就是并列的，ul标签中只能定义li标签，而li标签中可以定义其他标签。

有序列表

标签<ol>可以表示有序列表，一般以数字符号来呈现列表项，并且在<ol>标签中使用<li>标签来定义列表项。

<ol>
	<li>内容...</li>
	<li>内容...</li>
	<li>内容...</li>
</ol>

效果如下：

需要注意的是：ol标签中只能定义li标签，无法嵌套其他标签。而li标签中却可以嵌套其他标签

自定义列表

自定义列表的用法是使用<dl>标签，并且<dl>标签内会嵌套<dt>标签和<dd>标签。需要注意的是，<dl> </dl>里面只能包含<dt>和<dd>，而且<dt>和<dd>的个数不限，经常是一个<dt>对应多个<dd>

<dl>
	<dt>名词</dt>
	<dd>名词解释一</dd>
	<dd>名词解释二</dd>
	<dd>名词解释三</dd>
</dl>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/764490.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

（ceph）资源池poll管理

（ceph）资源池poll管理

资源池 Pool 管理 前面的文章中我们已经完成了 Ceph 集群的部署&#xff08;ceph部署: 传送门&#xff09;&#xff0c;但是我们如何向 Ceph 中存储数据呢&#xff1f;首先我们需要在 Ceph 中定义一个 Pool 资源池。Pool 是 Ceph 中存储 Object 对象抽象概念。我们可以将其理解…
阅读更多...
oracle 如何连同空表一起导出成dmp的方法

oracle 如何连同空表一起导出成dmp的方法

1、oracle导出dmp文件的时候&#xff0c;经常会出现一些空表&#xff0c;没有一并被导出的情况。 执行sql select alter table ||table_name|| allocate extent; from user_tables where num_rows0 or num_rows is null; 新建一个sql窗口&#xff0c;把查询结果的sql&#…
阅读更多...
MySQL-DQL-案例

MySQL-DQL-案例

案例 案例1 根据需求完成员工管理的条件分页查询 具体代码 -- 案例1&#xff1a;按需求完成员工管理的条件分页查询 - 根据输入条件&#xff0c;查询第一页数据&#xff0c;每页展示10条记录 -- 输入条件&#xff1a; -- 姓名&#xff1a;张 -- 性别&#xff1a;男 -- 入职时间…
阅读更多...
深入解析5G承载网：驱动下一代通信技术的支柱

深入解析5G承载网：驱动下一代通信技术的支柱

移动通信技术的不断演进&#xff0c;使得5G承载网成为驱动下一代通信技术发展的关键组成部分。在这个数字化时代&#xff0c;了解5G承载网的作用和特点对于理解现代通信网络的架构至关重要。 1.5G承载网的组成和功能 5G承载网由核心网和边缘计算组成。 其中&#xff0c;核心网…
阅读更多...
Python实现HBA混合蝙蝠智能算法优化循环神经网络分类模型(LSTM分类算法)项目实战

Python实现HBA混合蝙蝠智能算法优化循环神经网络分类模型(LSTM分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蝙蝠算法是2010年杨教授基于群体智能提出的启发式搜索算法&#xff0c;是一种搜索全局最优解的有效方法…
阅读更多...
一款好用的被动式信息泄漏检测插件

一款好用的被动式信息泄漏检测插件

插件介绍 FindSomething由陌陌安全残笑老哥开发的浏览器扩展&#xff0c;是一款优秀的被动式信息收集工具&#xff0c;用于展示浏览器打开的页面相关的网站资产和敏感信息。 关注【Hack分享吧】公众号&#xff0c;回复关键字【230629】获取下载链接 支持收集的信息类型如下&am…
阅读更多...
瑞吉外卖总结

瑞吉外卖总结

瑞吉外卖总结笔记 环境 SpringBoot、Mybatis-Plus 注意&#xff1a;使用Mybatis-Plus时&#xff0c;属性值要与数据库中的列名一致 静态映射 当将使用SpringBoot整合前端html项目时&#xff0c;需要使用静态资源的映射&#xff0c;否则会出现html页面部分效果无法展示 解…
阅读更多...
F#奇妙游（15）：优雅的WPF程序

F#奇妙游（15）：优雅的WPF程序

WPF but F# 上一篇&#xff0c;写了一个F#的WPF&#xff0c;所有的东西都是随手写出来的&#xff0c;没有经过详细考虑和设计。就是吧&#xff0c;一点也不优雅……咋们虽然头发不多&#xff0c;但是优雅永不过时&#xff01; 实际上能用的开源UI库&#xff08;F#&#xff0c…
阅读更多...
【NLP】多头注意力概念（02）

【NLP】多头注意力概念（02）

接上文： 【NLP】多头注意力概念（01） 五、计算注意力 将 Q、K 和 V 拆分为它们的头部后，现在可以计算 Q 和 K 的缩放点积。上面的等式表明，第一步是执行张量乘法。但是，必须先转置 K。 展望未来，每个张量的seq_length形状将通过其各自的张量来识别，以确保清晰…
阅读更多...
2023年知识库软件爆火的有哪些？

2023年知识库软件爆火的有哪些？

2023年知识库软件爆火的可能性有很多&#xff0c;以下是一些可能的候选者&#xff1a; 一、Baklib&#xff1a;Baklib是一款新兴的知识库软件&#xff0c;它提供了强大的知识管理和组织功能。它能够帮助用户收集、整理和共享知识&#xff0c;并提供智能搜索和推荐引擎&#xf…
阅读更多...
DP1042 国产代替TJA1042 CAN总线收发器接口芯片

DP1042 国产代替TJA1042 CAN总线收发器接口芯片

5V 供电&#xff0c;IO 口兼容 3.3V&#xff0c;70V 总线耐压&#xff0c;待机模式 CAN FD 总线收发器DP1042是一款应用于 CAN 协议控制器和物理总线之间的接口芯片&#xff0c;可应用于卡车、公交、小汽车、工业控制等领域&#xff0c;支持 5Mbps CAN FD 灵活数据速率&#xf…
阅读更多...
使用stata做meta系列三|Meta命令安装

使用stata做meta系列三|Meta命令安装

上期小统带大家学习了Meta分析纳排标准确定&#xff0c;这期小统和大家一起学习一下Meta命令安装。 Meta命令安装 Stata安装meta命令包&#xff1a; http://3g.dxy.cn/bbs/topic/34967648 命令&#xff1a; help pr0012 点击 pr0012…… 点击 click here to install 将pro…
阅读更多...
Gateway网关简介及使用

Gateway网关简介及使用

一、 什么是 API 网关&#xff08;API Gateway&#xff09;&#x1f349; 1.分布式服务架构、微服务架构与 API 网关&#x1f95d; 在微服务架构里&#xff0c;服务的粒度被进一步细分&#xff0c;各个业务服务可以被独立的设计、开发、测试、部署和管理。这时&#xff0c;各个…
阅读更多...
MySQL数据库，创建表及其插入数据和多表查询数据

MySQL数据库，创建表及其插入数据和多表查询数据

首先&#xff0c;建表 创建student表&#xff0c;SQL代码如下 create table student (id int(10) not null unique primary key, name varchar(20) not null, sex varchar (4), brith year, department varchar(20), address varchar(50) ); 创建score表。SQL代码如下&…
阅读更多...
自动化测试selenium(1)

自动化测试selenium(1)

自动化测试&#x1f4ea;selenium 自动化测试&#x1f4ea;selenium自动化测试&#x1f4d1;selenium定位元素&#x1f4cd; 实战测试百度搜索&#x1f50d;安装测试环境Idea中进行自动化脚本编写打开网页&#xff1a;实现搜索功能&#xff1a;浏览器清空效果clear()&#xff1…
阅读更多...
Vue通过微软官方链接预览pptx docx xlsx

Vue通过微软官方链接预览pptx docx xlsx

目录&#xff1a; 一、实现步骤 二、实现效果 代码真实可用&#xff01; 一、实现步骤&#xff1a; 1、使用的是vue和elementUI&#xff0c; 假设有这些变量&#xff1a;attachment是附件的意思 data() {return {previewDialog: false,attachmentSrc: ,attachmentList: [{name:…
阅读更多...
第六次CCF计算机软件能力认证

第六次CCF计算机软件能力认证

第一题&#xff1a;数位之和 给定一个十进制整数 n&#xff0c;输出 n 的各位数字之和。 输入格式 输入一个整数 n。 输出格式 输出一个整数&#xff0c;表示答案。 数据范围 1≤n≤1e9 输入样例&#xff1a; 20151220输出样例&#xff1a; 13样例解释 20151220 的各位数字之和…
阅读更多...
PhaseNet论文阅读总结

PhaseNet论文阅读总结

PhaseNet论文阅读总结 PhaseNet: a deep-neural-network-based seismic arrival-time pickingmethod 背景 地震监测和定位是地震学的基础 地震目录的质量主要取决于到达时间测量的数量和精度相位拾取一般都是网络分析员来执行但是地震仪越来越多&#xff0c;数据流增加&#…
阅读更多...
记录自己的程序移植经历（裸机软PLC C语言程序移植到Linux）

记录自己的程序移植经历（裸机软PLC C语言程序移植到Linux）

先说一下本人的基础&#xff0c;本人是一个小公司初来乍到的实习生&#xff0c;拿到这个任务的时候&#xff0c;不懂PLC&#xff0c;而对于linux只懂一点点皮毛的操作。结果硬是把程序移植完毕且能顺利运行。 该程序是嵌入式软PLC&#xff0c;主要代码是对四元式指令的解析。说…
阅读更多...
解决Hadoop集群hive库建表中文和表数据乱码问题

解决Hadoop集群hive库建表中文和表数据乱码问题

最近在测试环境，发现DDL建表后，发现中文注释和表数据乱码的问题，如下 查询元数据 原因是hive 的 metastore 支持的字符集是 latin1，所以中文写入的时候会有编码问题。 解决方案如下： 对MySQL的编码设置 [client]下面增加 default-character-set=utf8 在[mysqld]下面增…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023