前端基础，HTML5常用标签学习总结
16lz
2021-11-11
HTML网页主体结构
<!DOCTYPEhtml><!--声明头--><html><!--头标签--><head></head><!--体标签--><body></body></html>
head头部标签
<headlang="en"><!--定义网站语言--><title></title><!--定义网站标题--><metacharset="utf-8"/><!--设置页面字符集--><metaname="keywords"content="关键字1,关键字2"/><!--设置网站关键字，多个关键字之间用英文状态下的逗号分割--><metaname="description"content="描述的内容"/><!--设置网站的描述--><linkrel="icon"type=""href=""/><!--加载标题icon图标--><linkrel="stylesheet"type="text/css"href=""/><!--加载CSS样式--><style></style><!--加载CSS样式--><script></script><!--加载JS脚本--><!--阻止移动浏览器自动调整页面大小--><metaname="viewport"content="initial-scale=2.0,width=device-width"/><!--name="viewport"说明此meta标签定义视口的属性initial-scale=2.0意思是将页面放大两倍width=device-width告诉浏览器页面的宽度的能与设备的宽度--><metaname="viewport"content="width=device-width,maximun-scale=3,minimum-scale=0.5"/><!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半--><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放--></head>body标签
1、常用文本标签
<p></p><!--段落标签--><b></b><!--加粗--><strong></strong><!--强调某段文本--><em></em><!--强调某段文本--><i></i><!--斜体--><br/><!--换行--><hr/><!--水平线--><u></u><!--下划线标签--><del></del><!--删除线标签--><hn></hn><!--h族标题标签--><bdo></bdo><!--覆盖默认的文本方向--><sub></sub><!--下标文本--><sup></sup><!--上标文本--><details></details><!--交互式控件、可见的或者隐藏的补充细节--><summary></summary><!--为details定义标题--><dialog></dialog><!--定义对话框或窗口--><pre></pre><!--原格式输出--><figure></figure><!--用于对元素进行组合。多用于图片与图片描述组合--><mark></mark><!--标记文本--><figure><imgsrc="img.gif"alt="figure标签"title="figure标签"/><figcaption>figure的标题</figcaption></figure><mark></mark>定义带有记号的文本，它会给你要突出显示的文本下加个背景色。如：<p>你是<mark>大长腿</mark>吗？</p>
2、语义化标签：语义化标签对搜索引擎友好，有了良好的结构和语义，网页内容就容易被搜索引擎抓取。
<div></div><!--标签定义页面中的一个分隔区块或者一个区域部分，多用于网页布局--><span></span><header></header><footer></footer><!--header和footer不能嵌套使用--><nav></nav><address></address><section></section><article></article><aside></aside>
3、超链接标签a
<a>标签定义超链接，用于从一个页面链接到另一个页面。<a>元素最重要的属性是href属性，它指定链接的目标。<a>标签可以通过css改变它的默认样式
4、多媒体标签
<img/><!--<img>标签定义HTML页面中的图像。<img>标签有两个必要属性：src和alt-->
<audiocontrols><sourcesrc="php.ogg"type="audio/ogg"><sourcesrc="php.mp3"type="audio/mpeg"></audio>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| preload | auto | 音频加载方式 |
| metadata | ||
| none | ||
| src | url（链接地址） | 音频文件地址 |
<videowidth="320"height="240"controls><sourcesrc="php.mp4"type="video/mp4"><sourcesrc="php.ogg"type="video/ogg"></video>
| 属性 | 值 | 描述 |
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示播放控件 |
| height | pixels | 视频容器高度 |
| width | width | 视频容器宽度 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| poster | url | 视频下载是显示图像，直到点击播放 |
| src | url | 视频地址 |
| preload | auto | 视频加载方式，如使用 "autoplay"，则忽略该属性。 |
| metadata | ||
| none |
5.表单标签
<table></table><caption></caption><tr></tr><th></th><td></td><thead></thead><tbody></tbody><tfoot></tfoot><inputtype="text"name=""value=""/>普通文本域<inputtype="password"name=""value=""/>密码域<inputtype="radio"name=""value=""/>单选<inputtype="checked"name=""value=""/>复选<label></label>为input元素定义标注(绑定元素)<inputtype="file"name=""value=""/>文件上传<inputtype="submit"name=""value=""/>提交按钮<inputtype="image"src=""title=""alt=""/>用图片代替提交按钮<inputtype="reset"name=""value=""/>重置按钮<inputtype="hidden"name=""value=""/>隐藏域<inputtype="button"name=""value=""/>按钮<button></button>提交按钮<buttontype="submit"></button>提交按钮<buttontype="button"></button>按钮
6、标题标签
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><!--其中h1标签只能出现一次-->
7、列表标签
<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><!--ol跟ul都有默认样式，根据项目需求用css更改-->
8、标签分类：块级标签，行内标签，行内块标签
块级元素：独占一行，可设置宽高；如果不给宽度，块级元素就默认为浏览器的宽度，高为内容高度。
p、div、ul、ol、li、dl、dt、dd、h1~h6、form
行内元素：可以多个标签存在一行，对宽高属性值不生效，依靠内容撑开。
a、span、em、strong、b、i、u、label、br
行内块元素：结合的行内和块级的优点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
img、input、textarea
注意：块标签可以套行标签，行标签不可以套块标签。
总结：HTML标签繁多，其中最重要的的有div、p、ul、ol等。在进行网页布局中，合理使用语义化标签，不仅代码整洁有理，还有利于搜索优化，如网页中段落就用<p>标签，标题就用<h1>~<h6>标签，导航用<nav>标签，切忌不可标签之间胡乱套用。