css样式和一些复杂的html标签使用

hello，小伙伴们，我又来了。接着上次整理的html的简单使用，咱们这次说一些关于CSS和html中复杂的用法。好了话不多说，一起开始复习吧。
一、什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。
二、CSS的写入方法
内联式、外部式、嵌入式
三、CSS的语法
选择器{属性：属性值；}
四、CSS的选择器
标签选择器、class选择器、id选择器、后代选择器、子选择器、分组选择器、通用选择器、伪类选择器
后代选择器 => 空格表示
子代选择器 => 用大于号表示（>）
区别：子代选择器作用于元素的第一代内容，后代选择器作用于元素的所有后代内容
分组选择器 => 用逗号表示（，）
通用选择器 => 用星号表示（*）
伪类选择器 => 动态伪类选择器（锚点伪类、用户行为伪类）
锚点伪类
:link,超链接并且未被访问过
:visited，超链接并且已被访问过
用户行为伪类
:hover用户鼠标悬停在链接文本内容上 超链接并且被激活
:active 按下与松开之间的状态
:focus '焦点’当标签获得焦点时，一般是输入框被点击
Css3的:nth选择器(选择第几个子代元素)
我们把css3的:nth选择器也成css3结构类
选择方法
:frist-child、:last-child :nth-child、
:first-of-type :nth-of-type :last-of-type
:not
::before ::after
五、CSS
1.CSS背景
1、CSS属性定义背景效果：
background-color 背景颜色
background-image: 背景图片
background-repeat: 图片是否平铺
background-position: 图片位置
background-size: 图片大小
background-attachment：背景图片的定位（scroll【当滚动滑动条的时候，背景图片会随之发生位置的改变】、local【当滚动滚动条的时候，背景图片会随之进行发生位置上的移动】、fixed【当滚动滚动条的时候，背 景图片不会随之进行发生位置上的移动，如果盒子大小不支持展现全部，那么就会被其他盒子所遮挡】）
background-blend-mode：定义了背景层的混合模式（图片与颜色）
–normal 正常的样子
–multiply 正片叠加模式（当图片和颜色放在一起的时候，颜色会形成一个颜色层，叠加到图片上）
–overlay 叠加模式（当图片和颜色放在一起的时候，图片不会被颜色所罩着）
2、背景渐变
①线性渐变
background-image: linear-gradient(red,yellow,green)
–默认情况就是渐变是从上到下的，然后依次按照自己写的颜色顺序开始发生渐变
–要是想进行发生方向上的改变，可以使用to 方向，这样就是可以发生方向上的改变了。
例如：background-image: linear-gradient(to right,red,yellow,green)
–也可以写某个颜色的范围，
例如：background-image: linear-gradient(red 0% 10%,yellow 10% 20%,green 20%)
红色从0开始一直到盒子高度的10%，黄色从10%开始，一直到盒子高度的20%，绿色从盒子高度的20%，一直到最底部。
②径向渐变
background-image: radial-gradient(red,yellow,green)
–默认情况就是渐变是从内到外的，朝着最远的一个角进行发生渐变，然后依次按照自己写的颜色顺序开始发生渐变
–也可以写某个颜色的范围，
例如：background-image:radial-gradient(red 0% 10%,yellow 10% 20%,green 20%)
红色从0开始一直到盒子中心的10%，黄色从10%开始，一直到盒子中心的20%，绿色从盒子中心的20%，一直到最底部。
2.CSS字体
1.文本
color 文本颜色
2.文本对齐
text-align
–属性值可以是 right（右对齐） left（左对齐） center（居中对齐） justify（两端对齐）
–文本默认对齐为左对齐
3.文本装饰
text-decoration
–经常用来给a标签进行去掉下划线
–属性值：none（无样式） overline（为文字添加上划线） line-throuh（为文字添加删除线） dunderline（为文字添加下划线）
4.文本缩进
text-indent 文本缩进
–属性值：直接填写大小就可以
5.文本转化
text-transform 文本转化
–属性值：none（无转化效果） uppercase（全部转化成大写字母） lowercase（全部转换成小写字母） capitalize （单词开头字母变为小写）
6.文本字体
font-size 字体大小
font-family 字体系列
font-style 字体样式 normal（正常） italic(斜体)
font-weight 字体粗细 100-900 逐渐变粗，也可以是normal（正常）bold（加粗）bolder(更粗)
7.垂直居中
line-height 行高
–当高度和行高是一样高的时候，这个时候，这个文字就是垂直居中对齐。
8.文字阴影
text-shadow 文字阴影
text-shadow : h-shadow v-shadow blur color；
水平阴影、垂直阴影、模糊距离，以及阴影的颜色
例如：text-shadow: 0 0 20px red; 水平阴影为0（不会 发生水平方向的移动） 垂直阴影为0（不会发生垂直方向的移动） 模糊距离20px（使阴影变得更加模糊一些，如果写0，那就意味着和原来的字体一样） 阴影颜色为red红色（那就意味着阴影就是红色的）
3.盒模型
它包括：content（内容区），padding（内边距），border（边框），margin（外边距）
标准盒模型：
–设置的宽和高就是内容区的宽和高
–计算方式：
宽： 左右的外边距+左右的边框+左右的内边距+内容区的宽度=盒子的宽度
高： 上下的外边距+上下的边框+上下的内边距+内容区的高度=盒子的高度
怪异盒模型：
–设置的宽和高就是整个盒子的大小
内边距：
padding --它的设置会是向内部填充，背景也是和内容区一样，当盒子是标准盒模型的时候，不会影响到盒子的内容区，当盒子是怪异盒模型的时候，就会影响到盒子的内容区
–可以设置上下左右四个方向，也可以在一起写，顺序是上、右、下、左
外边距：
margin --它的设置就是让真个盒子发生位置上的改变，但不会影响到内部
–可以设置上下左右四个方向，也可以在一起写，顺序是上、右、下、左
–还可以设置居中对齐，margin：0 auto；盒子会在原水平线的方向进行居中对齐
边框：
border
border : 2px solid red
可以设置它的粗细、样式、颜色
–粗细直接写大小就可以（border-width）
–样式（border-style）
–dashed 虚线
–dotted 点线
–solid 实线
–颜色（border-color）
–直接写颜色就可以
–可以写十六进制的，也可以写rgb 的形式
边框圆角化：
boder-radius
–Border-top-left-radius 定义了左上角的弧度
–Border-top-right-radius 定义了右上角的弧度
–Border-bottom-right-radius 定义了右下角的弧度
–Border-bottom-left-radius 定义了左下角的弧度
盒子阴影：
box-shadow
box-shadow: h-shadow v-shadow blur sparead color position；
box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 ；
–X轴偏移量和Y轴偏移量就是我们设置的位置发生了改变
–阴影模糊半径，就是设置的阴影的模糊度，数值越大越模糊，数值越小越清晰，最小为0
–阴影扩展半径，就是设置阴影的大小，数值越大，它的范围越大
–阴影颜色，就是设置阴影颜色的
–投影方式，默认情况下是外阴影，也可以是设置为内阴影inset，无论是外阴影还是内阴影都不会影响到盒子本身的大小
四、元素分类：
块级元素：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>

–display:block；
–每个块级元素都从新的一行开始，并且其后的元素也另起一行
–元素的高度、宽度、行高以及顶和底边距都可设置
–元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
行内元素

<a>、<span>、<br>、<em>、<strong>、<label>

–display:inline
–和其他元素都在一行上
–元素的高度、宽度及顶部和底部边距不可设置
–元素的宽度就是它包含的文字或图片的宽度，不可改变
块级行内元素
–display:inline-block；
–同时具备内联元素、块状元素的特点
–和其他元素都在一行上
–元素的高度、宽度、行高以及顶和底边距都可设置
五、浮动
float
–属性值： 左浮动（left） 右浮动（right）
–当下要清楚浮动的时候，clear：both；
–给内容加浮动了以后，外面包裹着内容的盒子会没有高度，这是不可避免出现的现象
–使用浮动后，注意及时清除浮动，以免影响浮动元素的相邻元素的布局
清除浮动：
1.给父级元素设置一个overflow:hidden;
2.:after或者是：before
例如：div:after{ display:block; content:""; clear:both; } div:before{ display:block; content:""; clear:both; }
六、定位
position
–属性值 相对定位（relative） 绝对定位（absolute） 固定定位（fixed） 粘性定位（sticky） 默认值（static）【不用写】
–父相子绝 父亲相对定位，儿子绝对定位
–设置完定位之后，可以使用left，right，top，bottom进行移动
相对定位 relative：
–position:relative（表示相对定位）
–它通过left、right、top、bottom属性确定元素在正常的文件流中的偏移位置
绝对定位 absolute：
–position:absolute(表示绝对定位)
–将元素从文档流中拖出来，脱离文本流
–absolute 定位使元素的位置与文档流无关，因此不占据空间
–absolute 定位的元素和其他元素重叠
固定定位 fixed：
–不会受文档流动影响
粘性定位sticky
–position: sticky；
–基于用户的滚动位置来定位
–粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed定位之间切换
七、过度
transition：property duration timing-function delay；
属性名 属性过渡时间/s 过渡时间曲线 延时过渡何时开始/s;
八、权重
！important>内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
注：如果权重一样的话，后写的会把之前写的所覆盖掉
九、2/3D装换
Transform
元素应用2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
–transform：rotate（XXdeg），顺时针旋转，绕着Z轴进行旋转。
rotateX（XXdeg），绕着X轴进行旋转
rotateY（XXdeg），绕着Y轴进行旋转
–transform：translate（）；
–translateX(x)仅水平方向移动（X轴移动）;
translateY(Y)仅垂直方向移动（Y轴移动）;
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。
–transform: scale（）；
–scaleX(x)元素仅水平方向缩放（X轴缩放）;
scaleY(y)元素仅垂直方向缩放（Y轴缩放）;
scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
–transform: skew（）；
–skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）;
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。
十、动画
animation：
–animation：动画名称 时间；

@keyframes  动画名称{
    0%{
            
    }
    100%{
            
    }
}

在这个中间可以放置其他的百分比，然后0%里面不要放置任何的代码块

/* 当产生多个动画的时候,最先开始的动画放到最后面,一次排列即可，*/
/*但不要分开写，如果分开写，那么后面的就会把前面的动画所替换掉，导致只能执行最后一个写的动画效果 */

十一、flex布局
给最外面的大盒子设置的

display：flex；

当给最外面的大盒子设置这个的时候，里面的所有盒子都被称为flex项目，默认情况下，里面的东西就会自动排列在一整行里面，如果宽度超过了100%，那么就会按照比例进行缩放。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
–如果是一行的话，就是会有一条主轴和一条交叉轴；
–如果是多行的话，那么就会变成每一行都有一个主轴和一条交叉轴。
属性：
–flex-direction：决定主轴的方向；

flex-direction: row | row-reverse | column | column-reverse;

–row 默认值，主轴方向为水平方向，起点在左侧，就是正常的从左往右进行排序
–row-reverse 主轴方向为水平方向，起点在右端，变成了水平方向的从右往左进行排序
–column 主轴方向为垂直方向，起点在上沿，变成了从上往下在左侧进行排序
–column-reverse 主轴方向为垂直方向，起点在下沿，就会变成从下往上在左侧进行排序
–flex-wrap：决定是否换行；

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

–nowrap:默认是不换行
–wrap：执行换行，并且第一行在上面
–wrap-reverse：执行换行，但是第一行在下面
–flex-flow：这个是flex-direction和flex-wrap综合写法

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

–其默认值是 row nowrap；
–justify-content 定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

–flex-start（默认值）：左对齐
–flex-end：右对齐
–center： 居中
–space-between：两端对齐，项目之间的间隔都相等
–space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
–align-items 定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

–flex-start：交叉轴的起点对齐
–flex-end：交叉轴的终点对齐
–center：交叉轴的中点对齐。
–baseline: 项目的第一行文字的基线对齐
–stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
–align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

–flex-start：与交叉轴的起点对齐。
–flex-end：与交叉轴的终点对齐。
–center：与交叉轴的中点对齐。
–space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
–space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
–stretch（默认值）：轴线占满整个交叉轴。
给里面的小盒子设置的
–order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

–如果是从左往右进行排列的话，数值小的就是在最左边；
如果是从右往左进行排列的话，数值小的就是排在最右边；
–如果是从上往下进行排列的话，数值小的就是在最上边；
如果是从下往上进行排列的话，数值小的就是排在最下边；
–flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

–如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
–如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
–flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

–如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
–如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
–负值对该属性无效。
–flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
–浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

–它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
–如果设置的值和自己原来的大小不一样的时候，它的宽或高就是会无效
– flex flex-grow, flex-shrink 和 flex-basis的简写（优先选择书写 ）
–默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：
–auto (1 1 auto)
–none (0 0 auto)。
–建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
–align-self 允许单个项目有与其他项目不一样的对齐方式
–可覆盖align-items属性。
–默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}		

–该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
利用flex写的网页：
总结：
① 设置display：flex，是给其父元素进行设置的，比如我想让一个盒子进行水平垂直居中，我就要给它的父元素设置flex，然后子再在父元素里面继续设置，水平方向和垂直方向的对齐模式
② 使用完display之后，里面的内容默认是水平摆放的，如果想要让它进行垂直摆放可以使用flex-direction：column 这个时候就是垂直摆放的
③ 设置完之后，里面的所有内容是不会自动换行的，要自己手动添加设置，才可以换行 flex-wrap: wrap ；
水平方向：
④ 如果想要让它进行水平居中，就要给其父元素设置 justify-conten: center;
⑤ 如果想要让它进行垂直方向的居中，就要给其父元素进行设置 align-items: center;
垂直方向：
⑥ 如果想要让它进行垂直居中，就要给其父元素设置 justify-conten: center;
⑦ 如果想要让它进行水平方向的居中，就要给其父元素进行设置 align-items: center;
十二、表单
HTML 表单用于搜集不同类型的用户输入。
form元素
属性：

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
</form> 

–accept-charset
-规定在被提交表单中使用的字符集（默认：页面字符集）。
–action（常用）
-规定向何处提交表单的地址（URL）（提交页面）。
-向服务器提交表单的通常做法是使用提交按钮。

<form action="action_page.php">

–autocomplete
-规定浏览器应该自动完成表单（默认：开启）。
–enctype
-规定被提交数据的编码（默认：url-encoded）。
–method
-规定在提交表单时所用的 HTTP 方法（默认：GET）。
-method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

–get：
-当使用 GET 时，表单数据在页面地址栏中是可见的。
-GET 最适合少量数据的提交。浏览器会设定容量限制。
–post
-POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
–name
-规定识别表单的名称（对于 DOM 使用：document.forms.name）。
–novalidate
-规定浏览器不验证表单。
–target
-规定 action 属性中地址的目标（默认：_self）。
label元素

<label for=""></label>

-label 用于为用户输入
当label里面的for属性值和input的name属性值一样的时候，那么就可以点击label标签里面的文本就可以将鼠标定位到与其name属性一样的输入框了
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
1.input元素
–文本输入 type=text 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
    <input type="text" name="" id="" value="">
<form>

–密码输入框

 <input type="password"> 
<form action="">   
    Password:<input type="password" name="pwd"/>
</form>

–单选按钮

 <input type="radio">
<form>
    <input type="radio" name="sex" value="male" checked>
    <br>
    <input type="radio" name="sex" value="female">
</form> 

–单选按钮允许用户在有限数量的选项中选择其中之一
–在设置单选按钮的时候，一定要注意它们的name名称，想要实现单选功能，必须是相同的name名称放在一起才可以实现，否则将不能被实现
–当选中某个单选按钮的时候，是不能被取消选择的
–提交按钮

<input type="submit">

用于向表单处理程序提交表单的按钮。

<form action="action_page.php">
    <input type="text" name="firstname" value="Mickey">
    <br>
    <input type="text" name="lastname" value="Mouse">
    <br>
    <input type="submit" value="Submit">
</form> 

-表单处理程序通常是包含用来处理输入数据的脚本的服务器页面，提交给action提供的地址
–复选框 checkbox

-<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<input type="checkbox" name="like"  value="banner">香蕉
<input type="checkbox" name="like" id="" value="apple">苹果

–这个是可以选择之后，然后再取消选择的。
–在使用复选框的时候，input标签里的name属性也是一样要保持一致的
–日期 date

-<input type="date">    类型允许你从一个日期选择器选择一个日期。
<label for="birthday">生日</label>
<input type="date" name="birthday">

-设置完之后，就可以进行在里面的日期表里面去选择自己的想要的日期了
–电子邮件 email

<input type="email" name="usremail">

–在提交表单时，会自动验证 email 域的值是否合法有效:
–数字 number

<input type="number" name="quantity" min="1" max="5">

–这样，和这个输入框里面只能去写数字了，不能去输入其他的东西
–属性
–min：允许最小的数字是多少
–max：允许最大数字是多少
–maxlength：规定输入字段的最大字符长度
–value：规定输入字段的默认值
–button 标签
–标记是表示可单击按钮的元素，可以用在表单或文档其它需要使用简单标准按钮的地方

<button type="button" onclick="alert('你好，世界!')">Click me</button>

–在 button>元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
–button标记不能是放在a标记的后面。
属性：
–autofocus
-属性值 autofocus 规定在页面加载时下拉列表自动获得焦点。
–disabled
-属性值 disabled 当该属性为 true 时，会禁用下拉列表。
–form
-属性值 form_id 定义 select 字段所属的一个或多个表单。
填写的属性值就是我们form定义的id名称
–formaction
-属性值 填写URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用。
–formmethod
-get、post
-规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。
-该属性与 type=“submit” 配合使用。
–formnovalidate
-属性值 formnovalidate
-如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。
-该属性与 type=“submit” 配合使用。
–formtarget
-属性值：_blank 、 _self 、 _parent 、 _top
-_self-表示响应加载到当前框架或上下文中
_blank-表示响应加载到新窗口或上下文中
_parent-表示响应加载到父框架或上下文
_top-表示响应加载到完整的原始窗口中
-规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用。
–name
-属性值 name（自定义一个名字）
-规定按钮的名称。
–type
-submit 、 reset 、 button
-submit 提交-表示按钮将表单数据提交到服务器（如果未指定类型，则为默认值）
reset 重置-表示按钮重置所有控件
button 按钮-表示该按钮没有默认行为
–value
-属性值 text
-规定按钮的初始值。可由脚本进行修改。
–fieldset 标签
-标记位于 form标记内，用于对HTML表单中的相关元素进行分组。使用 legend标记为 fieldset创建标题。该标记通常也称为 fieldset元素。

<form>
  <fieldset>
    <legend>客户资料(cainiaojc.com)</legend>
    名称: <input type="text"><br>
    地址: <input type="text"><br>
    电话号码: <input type="text">
  </fieldset>
</form>

–这样，我们的这个表单就会有一个大边框了
–默认情况下，我们的大边框是黑色的，但是我们可以通过css样式进行改变
–legend 标签
–HTML 标签用于为 标签生成标题。此标签通常也称为 元素。
–他产生的效果就是会导致我们设置的标题，不完全在我们的fieldset标签里面。
–下拉列表
– 元素表示一个控件，创建一个下拉列表，供用户选择。这些下拉值由 标签内的一系列 标签定义。

<select name="pets" id="pet-select">
    <option value="">--请选择一个列表--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

select标签的属性
–autofocus
-属性值 autofocus 规定在页面加载时下拉列表自动获得焦点。
–disabled
-属性值 disabled 当该属性为 true 时，会禁用下拉列表。
–form
-属性值 form_id 定义 select 字段所属的一个或多个表单。 填写的属性值就是我们form定义的id名称
–multiple
-属性值 multiple 当该属性为 true 时，可选择多个选项。 默认情况下，最多可以出现四个选项
–name
-属性值 text 定义下拉列表的名称。
–required
–属性值 required 规定用户在提交表单前必须选择一个下拉列表中的选项
–size
–属性值 number 规定下拉列表中可见选项的数目。
–默认情况下，是1，当设置为零的时候，出现的效果和设置为1的效果是一样的
–当设置的数值小于选项的时候，就会出现上下箭头，进行选择
–当设置的数值大于选项的数量的时候，就会出现多出来几个空格
–optgroup 标签
– 标签在 控件的值的下拉列表中创建一组选项
–在下拉列表中是无法被选中的，是一个灰色的
–将一些类似属性的选项放在一起，用这个标签进行定义
–option 标签
– 可以在弹出窗口和 html 文档中的其他项目列表中表示菜单项。
–属性：
–disabled
属性值 disabled 规定此选项应在首次加载时被禁用。
–label
属性值 text 定义当使用 时所使用的标注。
–selected
属性值 selected 规定选项（在首次显示在列表中时）表现为选中状态。
–value
属性值 text 定义送往服务器的选项值。
–datalist 标签
– 元素包含了一组 元素，这些元素表示其它表单控件可选值

<datalist id="tutorial_types">
    <option value="HTML">
    <option value="CSS">
    <option value="SQL">
</datalist>

–这个和select标签你不一样的地方在于，datalist标签所提示的是一个类似与对话框的
十三、表格
table 标签
–表格头，th标签，基本上会放在tr里面
–表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），
–每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

<table>
    <tr>
         <td>行 1, 列 1</td>
         <td>行 1, 列 2</td>
    </tr>
    <tr>
         <td>行 2, 列 1</td>
         <td>行 2, 列 2</td>
    </tr>
</table>

属性
–表格标题 基本上会放在table标签里面的第一行
–但是如果这个时候给table标签设置边框的话，caption则不会被设置上
–单元格跨行合并
–colspan colspan=“2” 这样代表的意思是将这个单元格和后面的一个单元格进行合并，且合并后文本水平居中
如果第二个单元格由内容的话，内容会被挤到下一个单元格内，以此类推
–单元格跨列合并
–rowspan owspan=“2” 这样代表的意思是将这个单元格和下面的一个单元格进行合并，且合并后文本垂直居中
如果第二个单元格由内容的话，内容会被挤到这一行下一个单元格内，以此类推
十四、less
–less是css的一种拓展性语言，它的写法和css差不多
–可以直接在cmd里面进行下载使用

npm install -g less

–或者是可以直接在html文件里面直接引用：

<link rel="stylesheet/less" type="text/css" href="style.less" />

或者是

<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

–注意：href里面是本地的路径，link必须要在script标签的前面
–在vscode中使用是必须要加插件（Live Server），不然会报跨域的错误
–less的使用：
–嵌套

#header{
    width:100%;
    height:500px;
    #header_left{
        width:300px;
        float:left;
        }
    }

–变量

@width:100%;
@height:500px;
@color:#f00;
#header{
    width: @width;
    height: @height;
    color:@color;
}

不仅如此，我们还可以进行更改我们的变量数据

@width:100px;
@height:@width+400px;

还可以用它来代替我们的标签名称

@myapp:header;
#@{myapp}{
    
}

还可以只修改一部分

@images: "../img";
#header{
    background: url("@{images}/white-sand.png");
}

十五、icon
就是我们经常看的一些小图标
我们可以直接在html文件进行引用
–首先,去找到你需要的那个图标，然后将其加入购物车
–去购物车中将你刚刚加入的图标添加至项目
–然后点击下载至本地，并将文件添加到你要写的文件夹中，建议所有文件包在一个文件夹中
–打开文件夹里面会有一个HTML文件
–选择Unicode模式需按照使用步骤进行注意：
第一步src中url的地址必须是你本地的路径
第三步里面的代码必须是你要出现的图标编码
–选择font-class 引用注意
第一步不要引入错误，第二步类名不要书写错误
–选择Symbol 引用
注意第一步不要引入错误 第三步id名不要书写错误
–Unicode模式和font-class 引用两个可以合在一起
–使用font-class 引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

–使用第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

–但是并不使用相应的类名而是使用Unicode模式的图标编码
–结合起来的真正写法就是

<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont">&xxx</span>

好了，今天的分享就到这里了。如果有雷同纯属巧合，如果有写错的地方还请小伙伴们可以在评论区留言，谢谢。