标签的显示模式标签有三种显示模式三种模式能互相转化块级元素（block-level）常见块元素<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>...特点比较霸道，独占一行高度、宽度、外边距、以及内边距都是可以控制的。宽度默认100%。是一个容器及盒子，里面可以放行内元素或者块级元素。注意一些文字类标签里不能放块级元素，比如：<p>、<h1>~<h6>、<dt>行内元素（inline-level）常见行内元素，有些地方称行内元素为内联元素。<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>...其中<sapn>标签是最典型的行内元素。特点相邻元素在一行上，一行可以显示多个元素。高、宽是无效的。默认宽度是它本身内容的宽度。行内元素只能容纳文本或者其他行内元素。行内块元素(inline-block)它是行内元素中特殊的一类，能改变宽高。<img/>、<input/>、<td>特点显示在一行上，一行可以显示多个。默认宽高是容器里内容的宽高。高度、行高、外边距以及内边距都可以控制。转换display块转行内：display:inline;行内转块：display:block;块、行内元素转行内块：display:inline-block;
按钮类普通按钮<inputtype="button"name=""id=""value="普通按钮"/>提交按钮点击会提交表单内容，跟表单组合使用<inputtype="submit"name=""id=""value="提交按钮"/>清空按钮点击会清空表单内容，跟表单组合使用<inputtype="reset"name=""id=""value="清空按钮"/>选择框一组选择框，name属性需要一直。单选框单选框类型：type="radio",多个单选框的name需要一直才能互斥。<label>男<inputtype="radio"name="sex"id=""value="male"/></label><label>女<inputtype="radio"name="sex"id=""value="female"/></label>复选框<label>男<inputtype="checkbox"name="sex"id=""value="male"/></label><label>女<inputtype="checkbox"name="sex"id=""value="female"/></label>邮箱&电话&网址设置不同的类型，支持HTML5的浏览器，会在提交的时候。对内容进行初步的校验。<label>邮箱：<inputtype="email"name=""id=""value=""/></label><br><label>电话：<inputtype="tel"name=""id=""value=""/></label><br><label>网址：<inputtype="url"name=""id=""value=""/></label>自定义校验规则添加pattern属性，就支持使用正则表达式，进行内容校验。placeholder属性，能友好的提示required自动非空校验maxlength能输入的最长的长度<label>邮箱：<inputtype="email"pattern="\w[-\w.+]*@(163.com|126.com)"placeholder="仅限163和126邮箱"requiredname=""id=""value=""/></label><br><label>电话：<inputtype="tel"pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}"placeholder="仅限座机号码"maxlengthrequiredname=""id=""value=""/></label><br><label>网址：<inputtype="url"pattern="^((https|http)?:\/\/)[^\s]+"placeholder="仅限以http和https开头的网址"requiredname=""id=""value=""/></label>输入框备用选项list属性和datalist标签搭配使用，通过id关联起来，实现参考效果。<label>明妃：<inputtype="text"list="urllist"name=""id=""value=""/></label><datalistid="urllist"><optionvalue="https://bigdataboy.cn/">大数据男孩</option><optionvalue="https://douyin.bigdataboy.cn/">抖音无水印解析</option></datalist>数据类数字类3个可选属性min：显示的最小值max：显示的最大值step：步长<label>年龄：<inputtype="number"min="1"max="10"step="2"name=""id=""value=""/></label>数据滚动条<label>数据滚动条：<inputtype="range"name=""id=""value=""/></label>文件上传默认情况下，enctype属性被设置为"application/x-www-form-urlencoded"，它会对所有的字符进行编码，并不适用于文件传输。文件传输需要将该属性设置为"multipart/form-data"。<formaction=""method="post"enctype="multipart/form-data"><label>请选择您要上传的文件：<inputtype="file"name="file"id="file"value=""/></label><br/><label><inputtype="submit"name=""id=""value="提交"/></label></form>限定上传文件的类型input元素有一个accept属性，表示可以选择的文件类型，多个类型之间使用英文的逗号隔开。前端的限制并不能真正起作用，还是需要后端判断。<label><inputtype="file"name="file"id="file"value=""accept="image/*"/></label>完整限制类型限定上传文件的尺寸隐藏技能：通过在上传文件这个input元素前面，追加一个name为MAX_FILE_SIZE的隐藏字段，value指定允许上传的文件尺寸，单位是字节。前端的限制并不能真正起作用，还是需要后端判断。<formaction=""method="post"enctype="multipart/form-data"><inputtype="hidden"name="MAX_FILE_SIZE"value="1024"><label>请选择您要上传的文件：<inputtype="file"name="file"id="file"value=""accept="image/*"/></label><br/><label><inputtype="submit"name=""id=""value="提交"/></label></form>日期&时间time小时：分钟<label>时间：<inputtype="time"name=""id=""value=""/></label>date年月日<label>年月日：<inputtype="date"name=""id=""value=""/></label>month年月<label>年月：<inputtype="month"name=""id=""value=""/></label>week能选择某一天，是这年的第几周<label>年周：<inputtype="week"name=""id=""value=""/></label>datetime-local完整的时间<label>年月日时分：<inputtype="datetime-local"name=""id=""value=""/></label>其他类型搜索其实并没有正真的搜索功能，搜索需要后端实现，只是输入框多了一个X，用来清空。<label>搜索：<inputtype="search"name=""id=""value=""/></label>颜色选择会弹出一个颜色选择框<label><inputtype="color"name=""id=""value=""/></label>图片类型需要带上src一起使用<label><inputtype="image"src="图片路径"/></label>隐藏Input标签<label><inputtype="hidden"name=""id=""value=""/></label>
label的使用用户点击<label>里的“姓名”时输入框立即获得焦点隐式连接<input>包裹在<label>标签里<formaction=""><label>姓名<inputtype="text"/></label></form>显示连接通过label的for属性，把input连接起来。<formaction=""><!--<input>标签的ID--><labelfor="name">姓名</label><inputtype="text"id="name"/></form>表单内容分组表单元素包裹在<fieldset>里面<fieldsetid=""><legend>个人信息</legend></fieldset>小例子<formaction=""><fieldsetid=""><legend>个人信息</legend><labelfor="name">姓名</label><inputtype="text"id="name"/><br><labelfor="sex">性别</label><inputtype="text"id="sex"/></fieldset></form>下拉框分组当下拉框太多的时候，是一个不错的方式<formaction=""><label>前端</label><selectname=""><optgrouplabel="前端三剑客"><optionvalue="HTML">HTML</option><optionvalue="CSS">CSS</option><optionvalue="Js">Js</option></optgroup><optgrouplabel="框架"><optionvalue="Vue">Vue</option><optionvalue="LayUI">LayUI</option></optgroup></select></form>
表单表单本身的提交会刷新网页，所以大多数场景是使用Ajax异步提交的。<form>标签用于为用户输入创建HTML表单。用于向服务器传输数据。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、legend和label元素。<formaction="welcome.php"method="post"><label>账号：</label><inputtype="text"name=""id=""value=""/><br><label>密码：</label><inputtype="password"name=""id=""value=""/><br><buttontype="submit">登录</button><buttontype="reset">清空</button></form>from的属性属性值描述actionURL规定当提交表单时向何处发送表单数据。methodget、post规定表单提交的HTTP方法。autocompleteon、off是否启用表单自动填充功能，记住历史提交记录（默认是on开启）nameform_name规定表单的名称。target_blank、_self、_parent、_top、framename规定在何处打开actionURL。input的相关属性自动获取焦点autofocus属性<formaction=""method="post"><label>账号：</label><inputtype="text"autofocus/></form>输入框历史记录form标签设置的autocomplete属性，对该标签下的输入框生效，输入框也能单独设置autocomplete属性。<formaction=""method="post"><label>账号：</label><inputtype="text"autocomplete="off"/></form>输入框默认值input输入框能通过设置value属性，设置默认值。<formaction=""method="post"><label>姓名：</label><inputtype="text"value="大数据男孩"/></form>禁用输入框该输入框被禁用，在submit时，也不会被提交。input，button都能设置禁用。<formaction=""method="post"><label>姓名：</label><inputtype="text"disabled/><br><buttontype="submit"disabled>登录</button></form>输入框只读readonly只读，则无法改变输入框的值。<formaction=""method="post"><label>姓名：</label><inputtype="text"value="大数据男孩"readonly/></form>
表格<!--加一点CSS边框样式--><styletype="text/css">table,td,th{border:aqua1pxsolid;/*使边框线重叠*/border-collapse:collapse;}td,th{border:aqua1pxsolid;}</style><!--表格--><table><!--tr定义每一行--><tr><!--th定义表头--><th>姓名</th><th>年龄</th></tr><tr><!--td定义每一个表格--><td>大数据男孩</td><td>18</td></tr></table>跨格子colspan=”2”:column列跨两格rowspan=”2”:row行跨两格<styletype="text/css">table,td,th{border:aqua1pxsolid;/*使边框线重叠*/border-collapse:collapse;}td,th{border:aqua1pxsolid;}</style><table><tr><!--横跨两个--><thcolspan="2">姓名</th><!--竖跨两个--><throwspan="2">年龄</th></tr><tr><td>大数据男孩</td><td>18</td></tr></table>高级完整版表格结构<table><!--标题--><caption>信息</caption><thead><!--表头--></thead><tbody><!--表主体--></tbody><tfoot><!--表尾--></tfoot></table><styletype="text/css">table,td,th{border:aqua1pxsolid;/*使边框线重叠*/border-collapse:collapse;}td,th{border:aqua1pxsolid;}</style><table><!--标题--><caption>信息</caption><!--表头--><thead><tr><th>姓名</th><th>年龄</th></tr></thead><!--表主体--><tbody><tr><td>大数据男孩</td><td>18</td></tr></tbody><!--表尾--><tfoot><tr><tdcolspan="2">以上内容纯属虚构</td></tr></tfoot></table>
无序列表可以通过css的list-style-type属性，改变无序列表的小黑点，官方提供20多种，能通过CSS的list-style-image属性自行设置。<!--无序列表--><ul><li>大数据男孩</li><li>大数据男孩</li></ul><!--无样式--><ulstyle="list-style-type:none;"><li>大数据男孩</li><li>大数据男孩</li></ul><!--实心正方形--><ulstyle="list-style-type:square;"><li>大数据男孩</li><li>大数据男孩</li></ul><!--阿拉伯数字--><ulstyle="list-style-type:decimal;"><li>大数据男孩</li><li>大数据男孩</li></ul>有序列表有序列表属性属性值描述reversedreversed规定列表顺序为降序。(9,8,7,…)startnumber规定有序列表的起始值。type1、A、a、I、i规定在列表中使用的标记类型。<!--有序列表--><ol><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol><!--起始值--><olstart="10"><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol><!--符号类别--><oltype="A"><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol><!--倒序--><olreversed><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol>特殊列表（术语列表）<dl>标签定义了一个包含术语定义以及描述的列表。<dt>标签用于定义列表中的项目（即术语部分）<dd>标签用于定义列表中项目的描述部分。<dl><dt>计算机</dt><dd>用来计算的仪器......</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置......</dd></dl>
说明HTML网页的加载顺序是同步加载，意思是从上向下执行加载的，当解析到<script>标签，就会把<script>加载执行完成后，再继续加载网页，所以控制Js脚本的加载顺序还是有必要的。延迟Js脚本加载只对引用外部Js文件有用在script标签里加上defer属性，这个脚本就会在网页加载完成再加载。<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.4.1.min.js"defer></script>Js脚本异步加载使用异步加载时，一定要注意Js代码执行执行的逻辑顺序，因为会对脚本的执行顺序失去控制。只对引用外部Js文件有用在script标签里加上async属性，这个脚本就会在网页加载的同时，一起加载。<scripttype="text/javascript"src="https://code.jquery.com/jquery-3.4.1.min.js"async></script>小彩蛋<noscript>标签，有兴趣，自行百度
定义<meta>标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。<meta>标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。元信息可以被浏览器（指导它如何加载和显示页面）所使用，也可以有利于搜索引擎收录页面（指定关键词）。HTML5通过<meta>标签引入一个新的方法，让网页尺寸实现自适应。注意<meta>标签永远位于<head>标签内部。content属性必须和name或http-equiv属性共存亡。为了让网页尺寸实现自适应，你应该在HTML文档中加入下面代码：<metaname="viewport"content="width=device-width,initial-scale=1.0">部分属性name常于content属性连用name相关值application-name：当前页所属Web应用系统的名称。author：当前页的作者名。description：当前页的内容描述。generator：用来生成HTML的软件名称。keywords：当前页的关键词。viewport：网页尺寸自适应。实例实例一：指定网页编码<metacharset="UTF-8">实例二：为搜索引擎提供关键词<metaname="keywords"content="大数据技术,技术博客,技术分析,大数据开发,爬虫开发,大数据男孩,个人博客,可视化,bigdataboy,爬虫项目">实例三：描述网页内容<metaname="description"content="网络让我接近世界，但也让我远离生活~一个学习大数据的小白博主">实例四：定义网页的作者<metaname="author"content="大数据男孩">实例五：设置网页尺寸自适应<metaname="viewport"content="width=device-width,initial-scale=1.0">实例六：每5秒刷新一下浏览器并跳转到指定页面<metahttp-equiv="refresh"content="5;https://bigdataboy.cn/">