HTML常用标签
标签语义
标签的含义，根据标签的语义，在合适的地方给一个最为合理的标签，让页面结构更清晰
标题标签
html提供了六个等级的网页标题，即 <h1> - <h6>，h为head的缩写，译为头部、标题。语义：作为标题使用，并且根据重要性递减。
特点：加了标题的文字会变的加粗，字号也会依次变大，h1的字体是最大的
举例：
<!DOCTYPE html>
<!-- 文档类型声明标签：告诉浏览器这个页面采用html5版本来显示页面 -->
<!-- 一个英文的！就可以快速的自动生成骨架 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- utf-8万国码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我创建的第一个页面</title>
</head>
<body>
<h1>标题标签</h1>
<h2>依次变小</h2>
<h3>记得保存</h3>
<h4>网页刷新</h4>
</body>
</html>
其运行结果为：
段落和换行标签
- 在html标签中，
<p>标签用来定义段落，可以将整个网页分为若干个段落。在编写代码的过程中，文字用回车直接分段后在生成的网页界面中是不会分行的，编写过程中若敲打了一连串的空格，在网页中显示的只会有一个空格，因此一大段的文字必须使用该标签进行分段。
这张图就是没有使用标签的效果
此图是使用段落标签包裹后的结果：
- 换行标签
<br />，强制换行，单标签 - 段落标签和换行标签的区别：段落标签，两行之间的距离较大，而换行标签两行之间的距离很小。
文本格式化标签
在网页中，为文字设置粗体、斜体、下划线等效果。标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或<b></b>，推荐第一个 |
| 倾斜 | <em></em>或<i></i>，更推荐第一个 |
| 删除线 | <del></del>或<s></s>，更推荐第一个 |
| 下划线 | <ins></ins>或<u></u> ，更推荐第一个 |
<div> 和 <span> 标签
`<div>` 和 `<span>` 是没有语义的，他们只是一个盒子，用来装内容。
div是division的缩写，表示分隔、分区；span为跨度、跨距。
- 特点
<div>标签用来布局，但是一行只能放一个<div>，是个大盒子
<span>标签用来布局，一行可以有多个<span>，是个小盒子
图像标签（单标签）
- 图像标签：如何在网页中插入图片？
在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL" /> **单标签**
其中src是图像标签的必须属性，用于指定图像文件的路径和文件名
图像标签的其他属性：
| 属性 | 说明 |
|---|---|
| alt | 属性值：文本；替换文本，当图像不能显示时，用该文本替换 |
| title | 属性值：文本；提示文本，当鼠标放到图像上时显示的文字 |
| width | 属性值：像素；设置图像的宽度 |
| height | 属性值：像素；设置图像的高度 |
| border | 属性值：像素；设置图像的边框粗细 |
注意：
1.height和width一般只设置一个即可，另一个会随之等比例缩放。若两个同时设置，容易造成图像的失真。
2.图像标签可以拥有多个属性，必须写在标签名的后面
3.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
4.属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
<h4>这是图像标签的使用：</h4>
<img src="sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径：同级 -->
<img src="images/sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径:下一级文件夹images -->
<img src="../sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径:上一级目录中的一个图像 -->
<img src="../images/sakura.jpg" alt="小樱头像" title="sakura" width="100" border="12" />
<!-- 相对路径:上一级目录中的一个文件夹下的一个图像,上上级目录可写为../../ -->
<img src="C:\Users\szos\Desktop\天道.jpg" title="天道" width="100" border="12" />
<!-- 绝对路径 \ -->
<img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png" width="100" border="12" />
<!-- 绝对路径:网络上的图片地址 -->
超链接标签（重点）
`<a>`标签用于定义超链接，从一个页面连接到另一个页面
- 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：此标签的必须属性
target：指定链接页面的打开方式，其中_self为默认值，在当前页面打开，_blank为在新窗口中打开 - 链接的分类
1.外部链接：如https://www.baidu.com
2.内部链接：网站内部页面之间的相互链接<a href="https://www.baidu.com/?tn=48021271_24_hao_pg" target="_blank">百度一下</a>
3.空链接：用 # 号代替<a href="某个内部链接" target="_blank">xxxxx</a>
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
5.网页元素的链接：为图片、文本、表格、音频、视频等添加超链接<a href="文件.exe或者是zip等压缩包形式的链接" target="_blank">下载链接</a>
6.锚点链接：点击此链接，可快速定位到页面中的某个位置。使用步骤：（1）在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#life">个人生活</a>(2)找到目标位置标签，在该标签里面添加一个id属性=刚才的名字，如：<h3 id="life">个人生活状态</h3>
如何跳转回去呢？
注释标签
<!--这是注释，不会在页面中显示--> 快捷键：Ctri+/
特殊字符
注意结尾分号，空格、大于号、小于号一定要记住！
在网页中想要显示"<p>"这个内容，可以写成<p>
表格标签（重要）
- 表格的主要作用：用于显示、展示数据，整齐、可读性好。
- 表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td> td用于定义表格中的单元格，必须嵌套在tr标签中；td指表格数据（table data），即数据单元格的内容。
...
</tr> tr标签用于定义表格中的行，必须嵌套在table标签中
...
</table> table用于定义表格的标签；
每写一对<tr></tr>就会产生一行，在这一行当中没写一对就会产生一个单元格，写几对就会有几个单元格，也即有几列。
<table>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>李小狼</td><td>男</td><td>15</td></tr>
<tr><td>木之本樱</td><td>女</td><td>12</td></tr>
</table> 此代码将会产生一个三行三列的表格
表头单元格标签
<th>标签标示表头部分（table head的缩写），位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示
<table>
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr> 表头加粗居中显示
<tr><td>李小狼</td><td>男</td><td>15</td></tr>
<tr><td>木之本樱</td><td>女</td><td>12</td></tr>
</table>
其运行结果：
-
表格结构标签
<thead>：用来标记表头部区域，把表格头部用此标签包裹起来，其内部必须有一个<tr>标签
<tbody>：用来标记表主体部分，吧把表格主体部分用此标签包裹起来
以上两个标签都需要被table标签包裹 -
合并单元格
（1）跨行合并：rowspan=“合并单元格的个数”
（2）跨列合并：colspan=“合并单元格的个数”
如何写出合并代码？在目标单元格上写。
跨行合并：目标单元格是合并单元格最上侧的单元格；
跨列合并：目标单元格是合并单元格最左侧的单元格； -
合并单元格步骤
（1）先确定是跨行合并还是跨列合并
（2）找到目标单元格（所以该标签一定是写在td标签里面的），写上合并方式=合并的单元格数量，如：<td colspan="2"></td>
（3）删除多余的单元格
<!-- 合并单元格 -->
<table border="1" cellspacing="0" align="center" height="250" width="500">
<tr>
<td></td><td colspan="2"></td>
<!-- <td></td><td colspan="2"></td><td></td> 跨列合并后删除了第三个单元格-->
</tr>
<tr >
<td rowspan="2"></td><td></td><td></td>
<!-- 跨行合并（第二行和第三行） 不管是跨行还是跨列合并，其标签都是写在td标签里面的 -->
</tr>
<tr>
<td></td><td></td>
<!-- <td></td><td></td><td></td> 跨行合并后删除了第三行的第一个单元格-->
</tr>
</table>
列表标签（重要）
列表：用来布局页面，整齐、整洁、有序。
列表可以分为三大类：有序列表、无序列表、自定义列表。
- 无序列表（重点）
<ul>标签标示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>标签定义，其语法为：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
（1）无序列表的各个列表项之间没有顺序级别之分，是并列的。
（2）<ul></ul>之间只能嵌套<li></li>，不可以输入其他标签或者文字
（3）<li></li>之间相当于一个容器，可以容纳所有元素
（4）无序列表会带有自己的样式属性，可用css设置
- 自定义列表（重点）
常用于对属于或名字进行解释说明
如图中每一列下面的内容都是围绕顶部的内容进行解释说明，这种模块可用自定义列表
语法格式：
<dl>
<dt>关于我们</dt> dl-dt-dd 大佬-带头大哥-弟弟
<dd>官方微信</dd>
<dd>联系我们</dd>
<dd>公益基金会</dd>
</dl>
（1）<dl></dl>里面只能包含<dt>和<dd>
（2）<dt>和<dd>个数没有限制，通常是一个<dt>对应多个<dd>
- 有序列表（理解）
各个列表项会按照一定的顺序排列定义；用标签<ol></ol>
语法格式
<h4>the order</h4>
<ol>
<li>liu</li>
<li>li</li>
<li>qian</li>
</ol>
表单标签
用来收集用户信息
- 表单的组成：表单域、表单控件、提示信息。
（1）表单域：包含表单元素的区域。在HTML标签中，<form>标签用于定义表单域，该标签会把它范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
（2）表单控件
1、input输入表单元素（单标签）：
该标签用于收集用户信息，在该标签中，包含一个type属性，根据不同的type属性值，输入字段会拥有很多种形式，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
语法：<input type="属性值 " />
type相关属性：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮，多数用于通过js启动脚本 |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
<input>标签的其它属性
| 属性 | 属性值 | 描述 |
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值（相当于提示信息） |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
只有当name属性值相同时，单选按钮才能实现单选
单选框和复选框要有相同的name值
value属性用在提交、重置按钮上可以改变按钮上的文字
checked：单选框、复选框默认被选中的内容
sex:<input type="radio" name="sex" />man <input type="radio" name="sex"/>woman<br>
hobby:<input type="checkbox" name="hb"/>sing <input type="checkbox" name="hb"/>hiking <input type="checkbox" name="hb"/>swim
label标签
<label>标签为input元素定义标注。用于绑定一个表单元素，当点击
<select>
<option selected="selected">河北</option>
<option>上海</option>
<option>北京</option>
</select>
<select>中至少包含一对<option>- 在
<option>中定义selected="selected"时，当前项即为默认选中项
3、textarea文本域表单元素
当用户需要输入内容较多的情况下，使用此标签；可定义多行文本输入；
语法：
意见反馈：
<textarea>
happy
</textarea>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
