背景颜色background-color默认背景是透明的语法/*十六进制颜色*/background-color:#00FFFF;/*rgb颜色*/background-color:rgb(255,99,71);/*rgba颜色*/background-color:rgba(255,99,71,0.5);背景图片background-image语法url()是必加的background-image:url(./img/icon.png);背景平铺background-repeat语法background-repeat:no-repeat;值描述repeat背景图片纵向横向铺满整个屏幕（默认）no-repeat不平铺repeat-xx轴平铺repeat-yy轴平铺背景位置background-position语法如果后面的位置只写一个则另一个默认居中。/*底部靠左*/background-position:bottomleft;/*表示x轴y轴，0,0在背景容器左上角*/background-position:10px20px;值描述length百分数、浮点数、px…都可以positiontop、center、bottom、right、left方位名词背景附着background-attachment语法background-attachment:scroll;值描述scroll背景会随对象内容滚动fixed背景图像固定背景简写background语法官方对背景简写没有顺序规定，约定以下面顺序写。下列不写的，就会自动使用默认值。background:背景颜色背景图片地址背景平铺背景滚动背景位置;背景透明背景透明其实是用颜色透明度实现的background-color:rgba(0,0,0,1);最后透明取值[0~1]之间注意是指：背景半透明，内容是不受影响的。
color文本颜色作用是：设置文本颜色值描述预留颜色比如：red、green、blue16进制比如：#00FFFFRGB代码比如：rgba(255,99,71)RGBA代码比RGB多一个透明度，比如：rgba(255,99,71,0.5).big{color:rgba(255,99,71,0.5);}text-align文字对齐方式用于设置标签里的文字的水平对齐方式。属性描述left左对齐（默认）right右对齐center水平居中.big{text-align:center;}line-height行高用于设置行间距。常用属性有三种：px（像素）、em（相对值）、%（百分比），使用最多的还是px。/*一般情况行高比字号大7、8像素就差不多了*/.big{line-height:26px;}text-indent首行文本缩进用于设置首行文本缩进缩进单位一般使用em，这里的em有单独的意思，1em是一个字的宽度，比如函汉子，1em就是一个字的宽度。.big{text-indent:2em;}text-decoration文本的装饰通常用于给链接的修改装饰。值描述none默认。通常用于取消<a>的下划线。underline定义文本下的一条线overline定义文本上的一条线line-through定义穿过文本的一条线。
标签的显示模式标签有三种显示模式三种模式能互相转化块级元素（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>