前端基础，HTML5常用标签学习总结
程序员文章站
2023-12-21 17:33:34
...
HTML网页主体结构
<!DOCTYPE html> <!--声明头--> <html> <!--头标签--> <head> </head> <!--体标签--> <body> </body> </html>
head头部标签
<head lang="en"><!--定义网站语言--> <title></title><!--定义网站标题--> <meta charset="utf-8" /> <!--设置页面字符集--> <meta name="keywords" content="关键字1,关键字2"/> <!--设置网站关键字，多个关键字之间用英文状态下的逗号分割--> <meta name="description" content="描述的内容" /><!--设置网站的描述--> <link rel="icon" type="" href=""/><!--加载标题icon图标--> <link rel="stylesheet" type="text/css" href="" /><!--加载CSS样式--> <style></style> <!--加载CSS样式--> <script></script> <!--加载JS脚本--> <!--阻止移动浏览器自动调整页面大小--> <meta name="viewport" content="initial-scale=2.0,width=device-width" /> <!-- name = "viewport" 说明此meta标签定义视口的属性 initial-scale = 2.0 意思是将页面放大两倍 width = device-width 告诉浏览器页面的宽度的能与设备的宽度 --> <meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" /> <!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半--> <meta name="viewport" content="initial-scale=1.0,user-scalable=no" /> <!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放--> </head>
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> <img src="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-->
<audio controls> <source src="php.ogg" type="audio/ogg"> <source src="php.mp3" type="audio/mpeg"> </audio>
| 属性 |
值 | 描述 |
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| muted | muted | 静音 |
| preload | auto | 音频加载方式 |
| metadata | ||
| none | ||
| src | url（链接地址） | 音频文件地址 |
<video width="320" height="240" controls> <source src="php.mp4" type="video/mp4"> <source src="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> <input type="text" name="" value="" /> 普通文本域 <input type="password" name="" value="" /> 密码域 <input type="radio" name="" value="" />单选 <input type="checked" name="" value="" /> 复选 <label></label>为input元素定义标注(绑定元素) <input type="file" name="" value="" />文件上传 <input type="submit" name="" value="" />提交按钮 <input type="image" src="" title="" alt="" />用图片代替提交按钮 <input type="reset" name="" value="" />重置按钮 <input type="hidden" name="" value="" />隐藏域 <input type="button" name="" value="" />按钮 <button></button> 提交按钮 <button type="submit"></button>提交按钮 <button type="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>标签，切忌不可标签之间胡乱套用。