标签的显示模式标签有三种显示模式三种模式能互相转化块级元素（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;
font-size大小实例p{font-size:16px;}作用：设置字体的大小单位相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用绝对长度单位（使用较少）说明in英寸cm厘米mm毫米pt点注意：谷歌浏览器默认文字大小16px。不同浏览器可能默认大小不一样，所以尽量给一个明确值。font-family:字体实例p{font-family:"宋体";}作用：设置使用哪一种字体。多个字体使用,隔开，表示浏览器不支持第一种，就去使用第二种，都不支持，则使用默认字体。p{font-family:"宋体","microsoftyahei";}font-weight:粗细实例p{font-weight:normal;}字体的粗细也能使用标签来实现。使用<b>、<strong>标签时文字加粗属性值：属性值描述normal默认值（相当于400值）bold粗体（相当于700值）100-900定义粗细的值，没有单位font-style:字体风格实例p{font-style:oblique;}字体的斜体也能使用标签来实现。使用<i>、<em>标签时文字斜体。属性值：属性作用normal默认值，正常样式italic显示斜体平时很少使用CSS的字体斜体，标签斜体更常使用foot:综合设置字体样式（重点）语法p{font:font-stylefont-weightfont-size/line-heightfont-family;}注意：以上语法顺序不能跟换，使用空格隔开。不需要设置的省略即可，但必须保留font-size、font-family属性，不然不起作用。
[attr][attr]单独使用是匹配所有带attr属性的标签a[attr]匹配a标签下带attr属性的标签语法[attr]{CSS样式}实例选择包含target属性的标签<styletype="text/css">/*选择a标签里包含target属性的值*/a[target]{background-color:#00FFFF;}</style><ahref="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr=value]用于选择指定属性和值的标签。语法[attribute=value]{CSS样式}实例styletype="text/css">/*a标签里id为bigdataboy的标签*/a[id="bigdataboy"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr*=value]选择attr属性中包含value值的标签语法[attr*=value]{CSS样式}实例<styletype="text/css">a[id*="data"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr^=value]选择attr属性中以value值开头的标签语法[attr^=value]{CSS样式}实例<styletype="text/css">a[id^="big"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr$=value]选择attr属性中以value值结尾的标签语法[attr$=value]{CSS样式}实例<styletype="text/css">a[id$="boy"]{background-color:red;}</style><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>[attr~=value]选择attr属性中包含value值的标签，注意有一个坑下面实例有说明语法[attribute~=value]{CSS样式}实例<styletype="text/css">a[id~="data"]{background-color:red;}</style><!--注意id是有空格的，没有空格不能识别包含--><aid="bigdataboy"href="https://bigdataboy.cn"target="_blank">大数据男孩</a>
交集选择器交集选择器，找到指定标签间的共有部分语法element.class||element#id{CSS样式;}实例选择p标签里的class="important"的标签。<style>p.important{color:green;}</style><h1class="important">大数据男孩</h1><pid="important">该标签被选择</p><pclass="important">大数据男孩</p>并集选择器并集选择器，找到所有满足的标签语法element1,element2,element3,...{CSS样式;}实例<style>.important,#important,.union{color:green;}</style><h1class="important">该标签被选择</h1><pid="important">该标签被选择</p><pclass="important">大数据男孩</p><pclass="union">该标签被选择</p><p>大数据男孩</p>后代选择器后代选择器，选择elment1元素内部的element2元素语法element1element2{CSS样式;}实例divp{color:green;}<div><h1class="important">大数据男孩</h1></div><div><pid="important">该标签被选择</p></div><p>大数据男孩</p>子元素选择器子元素选择器，选择element1元素中符合直接子元素的element2元素语法element1>element2{CSS样式;}实例div>p{color:green;}<div><h1class="important">大数据男孩</h1></div><div><p>该标签被选择</p></div><div><p>该标签被选择</p><p>该标签被选择</p><p>该标签被选择</p></div><p>大数据男孩</p>相邻兄弟选择器相邻兄弟选择器，element1元素之后紧跟的第一个元素。语法element1+element2{CSS样式;}实例div+p{color:green;}<div><h1class="important">大数据男孩</h1></div><div><p>该标签被选择</p></div><div><p>该标签被选择</p></div><p>大数据男孩</p><p>大数据男孩</p>兄弟选择器兄弟选择器，选择具有相同父元素的同级元素语法element1~element2{CSS样式;}实例p~div{color:green;}<div><h1class="important">大数据男孩</h1></div><div><p>大数据男孩</p></div><p>大数据男孩</p><div><p>该标签被选择</p></div><p>大数据男孩</p>
按钮类普通按钮<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/">
概述WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有：尺寸单位样式导入尺寸单位rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。建议：开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6Plus1rpx=0.552px1px=1.81rpx样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。/*pages/css/css.wxss*/@import"test.wxss";.middle-p{padding:15px;}内联样式WXML上也支持使用style、class属性来控制组件的样式。style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。<viewstyle="color:{{color}};"/>class：使用规则跟Html标签里的class一样<viewclass="normal_view"/>支持的选择器选择器样例样例描述.class.intro选择所有拥有class=”intro”的组件#id#firstname选择拥有id=”firstname”的组件elementview选择所有view组件element,elementview,checkbox选择所有文档的view组件和所有的checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容全局样式与局部样式定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。