HTML语法标签大全
HTML语法标签大全
1.语法标签通常由<,>,/组成,通常是双标签,一般形式为<开始标签>包裹内容， 也有但标签,一般形式为<>,而且不能包裹内容
2.标签与标签之间的关系:
1.嵌套关系 2.并列关系
<head> <head>head>
<title>title> <body>body>
<head>
一.标题标签
<h1>1级标题h1> 注意：1. 1~6级标签，重要程度依次递减
<h2>2级标题h2> 特点：1.文字自动加粗
<h3>3级标题h3> 2.自动换行
<h4>4级标题h4>
<h5>5级标题h5> 一般只会用到h1-h3
<h6>6级标题h6>
1.段落标签
1.用于分段显示内容(段落)
2.代码：
3.特点：独占一行，段落间有间隙
2.排版标签
①.换行标签
1.代码:
2.特点：强制换行，单标签
②.水平分割线
1.代码：
2.特点：单标签
3.文本格式化标签
标签 说明 b或strong 加粗 u或ins 下划线 i或em 倾斜 s或del 删除线
4.引用标签
短引用： 不会换行
长引用： 会自动换行
子曰<q>学而时习之，不亦说乎q>
<blockquote>
这句话是我没有说过的！
blockquote>
二.媒体标签
1.图片标签
1.代码：
其中src叫属性名，""叫属性值，两者合称属性标签
2.是单标签
3.注意点： 标签上可以存在多个属性，属性之间以空格隔开；标签名与属性之间必须以空格隔开。
4.alt属性是替换文本的意思，当图片加载失败，就显示alt的文本，加载成功不会显示。
5.title属性是提示文本的意思，也就是当鼠标悬停时，才显示的文本（title属性不仅仅可以用于图片标签，还可以用于其 他标签）
6.width和height属性 表示宽度和高度。
①如果只设置width和height中的一个，另一个设置会自动等比例缩放（此时图片不会变形）
② 如果同时设置了两个，则会导致图片变形
补充：7.图片的格式：
jpeg（jpg）：支持的图片颜色比较丰富，不支持透明效果，不支持动图
gif：支持的颜色比较少，支持简单透明，支持动图
png：支持的颜色丰富，支持复杂透明，不支持动图
2.路径
①.页面需要加载图片，需要先找到对应的图片
绝对路径（了解） 目录下的绝对位置，可直接到达目标位置，通常从盘符（C盘，D盘...）开始的路径相对路径（常用） 1.从当前文件（当前的html网页）开始出发找目标文件（要找的图片）的过程 2.相对路径分类： 同级目录：当前文件和目标图片在同一个文件夹里或
下级目录：目标图片所在的文件夹和当前文件在一起
上级目录：当前文件所在的文件夹和目标图片在一起
3.音频标签
①.代码：
②.常见属性
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持) loop 循环播放 ③.音频标签目前支持三种格式：MP3, Wav，Ogg
4.视频标签
①.代码：
②.常见属性
属性名 功能 src 视频的路径 controls 显示播放的控件 autoplay 自动播放（谷歌浏览器中配合muted实现静音播放） loop 循环播放 ③.视频标签目前支持的三种格式：MP4,WebM,Ogg
5.内联标签
①.代码：
②.作用：用于在当前网页中引入另一个网页，相当于在一个网页里嵌套了另一个网页，其中frameborder指定的是内联框架的边框
三.链接标签
①.功能：点击，从一个页面跳到另外一个页面
②.称呼：a标签，超链接，锚链接
③.代码：名称（随便起）
（其中href后面加的是要跳转到的地址）
④.特点：双标签，内部可包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的href属性
⑤.当你不知道跳转地址的时候可以先在引号里写一个#，表示空链接
⑥.target属性：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
<a href="https://www.baidu.com/" target="_blank">跳转到百度a>
例1：创建一个阅读文章回到顶部的超链接
<a href='#'>回到顶部a> 将href属性设为#，则页面不会跳转，而是会回到该页面的顶部例2：创建一个直接跳到底部的超链接
<a href='#bottom'>去底部a> <a id='bottom' href='#'>回到顶部a> 给底部的超链接设置一个id（名字随便起），则可以唯一标识，再到顶部超链接中连接底部id，就可以点击回到底部了
四.列表标签
1.无序列表
e.g.新闻列表
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
①显示特点：每一项前面都有一个小圆圈
补充：若要去掉列表前面的小圈圈，则可以
ul{
list-style:none;
}
②注意：ul标签只能包含li标签，但li标签可以包含任意内容
e.g.
- 榴莲
2.有序列表
e.g.排行榜
标签名 说明 ol 表示无序列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 ①显示特点：每一行最前面默认显示序号标识
②注意：ol标签只能包含li标签，但li标签可以包含任意内容
3.自定义列表
e.g.一个标题下面涵盖好几个内容，如帮助中心下面有购物指南，账户管理等
标签名 说明 dl 表示自定义列表的整体，用于包裹dt和dd dt 表示自定义列表主题 dd 表示自定义列表针对主题的每一项内容 ①显示特点：dd前会默认缩进效果
②注意：dl标签只能包含dt/dd标签，但dd/dt标签可以包含任意内容
五.表格标签
标签名 说明 table 表格整体，可用于包裹多个tr tr 表格每行，可用于包裹td td 表格单元格，可用于包裹内容
标签名（结构标签） 名称 thead 表格头部 tbody 表格主体 tfoot 表格底部 ①注意：标签的嵌套关系：table > tr > td 表格的结构标签可以省略
②.表格的相关属性
属性名 属性值 效果 border 数字 边框宽度 width 数字 表格宽度 height 数字 表格高度 ③表格的标题和表头
标签名 名称 说明 caption 表格大标题 表示表格整体大标题，默认在整体顶部居中位置 th 表格单元格 表示一小列标志，通常用于表格第一行，默认内部文字加粗并居中 ④注意：caption书写在table内部，th标签书写在tr内部（用于替换td标签）
⑤合并单元格：
步骤： 根据左上原则：上下合并→只保留最上的，删除其他的
左右合并→只保留最左的，删除其他的
然后给保留的单元格设置
属性名 属性值 说明 rowspan 合并单元格的个数 跨行合并，将多行单元格垂直合并 colspan 合并单元格的个数 跨行合并，将多列单元格水平合并
六.表单标签
1.input系列标签
用于显示收集用户信息，e.g.登录页，注册页
可通过type属性值不同展示不同效果
标签名 type属性值 说明 input（以下均为input） text 文本框，用于输入单行文本 password 密码框，用于输入密码 radio 单选框 checkbox 多选框 file 文件选择，用于之后上传文件 submit 提交按钮 reset 重置按钮 button 普通按钮，默认无功能，可配合js添加功能 ①text常用属性
属性名 说明 placeholder 表示占位符，提示用户输入内容的文本 ②单选框常用属性
属性名 说明 name 分组。有相同name属性值的单选框为一组 checked 默认选中 如：<body> 性别：<input type="radio" name="gender">男 <input> type="radio" name="gender">女 <body> 这样就保证选择性别时不会发生两个都选中的情况，而是只会出现一种情况③ 按钮常用属性
标签名 tyoe属性值 说明 input submit 提交按钮，点击后发送数据给后端服务器 input reset 重置按钮，点击后恢复表单默认值 input button 普通按钮，配合js使用 如果要实现上述表格里三个按钮标签的功能，必须要结合form标签使用
form标签使用方法：用form标签把表单标签一起包裹以来就可以
2.select下拉菜单系列标签
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
3.textarea文本域系列标签
①在网页中提供可输入多行文本的表单控件 e.g.朋友圈
②常见属性
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
③注意：右下角可以拖拽改变大小；
4.label系列标签
使用方法①：
step1：用label标签把内容（如文本）包裹起来
step2：在表单标签上添加id属性
step3：label标签的for属性中设置对应的id属性值
使用方法②：
step1：直接使用label标签把内容（如文本）和标签一起包裹
step2: 需要把label标签的for属性删除即可
<body> 性别： <input type="radio" name="gender" id="nan"><label for=“nan“>男label> body>
5.语义化标签
①没有任何语义的布局标签：div，span（实际开发时会大量使用这两种标签）
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
②有语义的布局标签：
标签名 语义 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 article 网页文章 表格内容为制作手机端网页所需的标签
6.字符实体
在代码中写多个空格时，网页最终只会解析出一个空格，所以要实现字与字之间空多个距离，则要用空格标签
①html的空格合并现象
②常见字符实体：
空格 ；
输出： 我是 yxl 我是 yxl