1.属性值的计算过程
是指任何一个html元素，它从所有的css属性都没有值，到所有的css属性都有值，它需要一个计算过程，这个就是属性值的计算过程
2.视觉格式化模型
是指页面中多个盒子的排列规则，俗称布局规则
1》普通流
包含块：大多数情况下，包含块就是父元素的内容盒，它决定了盒子尺寸和排列位置
2》浮动
3》绝对定位
浏览器：
1》shell：外壳
2》core：内核（js执行引擎，渲染引擎，网络引擎）
chrom：webkit----》Blink
Safari：Webkit
Firfox：Gecko
IE：Trident
Opera：Presto/Blink
元素嵌套：
1》就会引出好多概念父元素，子元素，兄弟元素，祖先元素，后代元素
HTML是标记语言，记录数据的内容和结构，没有逻辑控制和操作
编程语言：
编译型语言
解释型语言
3.a元素 href是 超链接也是一个锚点
锚点是通过id来进行关联锚点的href属性的
普通用法：
<a href="https://www.baidu.com">百度一下</a>
锚点链接：
<a href="#selectiion1">第一章</1> <a href="#selectiion2">第二章</1> <a href="#selectiion3">第三章</1> <a href="#">回到顶部</a> <a href="锚链接.html#selettiion5">链接的第五章</a>
功能链接：
发邮件
<a href="mailto:[email protected]">点击发送右键</a>
打电话
<a href="tel:+18816967372">点击给我打电话</a>
执行js代码
<a href="javascript:alert('hello')">弹出hello</a>
target:
target="_blank"在空白页打开
target="_self"：在当前也打开
<a href="锚链接.html#selettiion5" target="_blank">链接的第五章</a>
img元素：
src属性：source的缩写（资源）
1.>站内资源
2>站外资源
alt属性：当图片资源失效的时候，在页面上展示该属性值
它表示图片加载失败的时候或者慢，就会显示alt的文字
<body>
<img src="img/四川路由路线.png" alt=“这个是一张四川旅游图片”>
</body>
map：也就是把一张图片当做一张地图
下面是用一张图片的矩形区域指向一个超链接，查看这个图片的坐标用的是adobe photoshop也可以用mspaint软件查看矩形区域的坐标的
在html里面要做个矩形区域，矩形区域的选取2个点的坐标分别为左上角坐标和右下角的坐标
本人用上海市地图为例子：点击青浦，就会跳转到青浦区政府网站，代码如下：
<img usemap="#shanghaimap" src="https://img2.baidu.com/it/u=1944639381,432423751&fm=253&fmt=auto&app=138&f=JPEG?w=608&h=759" alt="这是一张上海市地图" >// 这个超链接利用的是外部资源 </a> <map name="shanghaimap"> <area shape="rect" coords="132,407,214,457" href="https://www.shqp.gov.cn/shqp/index.html?wlsqzp" > //coords是坐标的意思，这个是青浦区政府网站，当点击下图的红色框区域的时候，就会跳转青浦区政府网站 </map>
4.块级元素：显示时独占一行的元素，成为块级元素
5.行内元素：不换行的元素称为行内元素
6.figure元素：目的是告诉浏览器和搜索引擎，我这个图片和这个文字是一个整体，让浏览器更容易理解
figcation元素：告诉搜索引擎这个是标题，是图片的标题
以上两个属性页面效果是没有变化的
7.列表元素
1>有序列表
有序列表ol，它的子列表必须是li
<h1>西红柿炒鸡蛋</h1>
<ol>
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
效果图：
ol有个属性type=1，表示用数字表示序号
<h1>西红柿炒鸡蛋</h1>
<ol type="1">
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
type=i，表示用小写罗马数字表示
<h1>西红柿炒鸡蛋</h1>
<ol type="i">
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
type=a，表示用小写字母表示顺序
<h1>西红柿炒鸡蛋</h1>
<ol type="a">
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
效果图
type=A，表示用大写字母表示顺序
<h1>西红柿炒鸡蛋</h1>
<ol type="A">
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
效果图
type=I，表示用大写罗马数字表示
<h1>西红柿炒鸡蛋</h1>
<ol type="I">
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
效果图：
reversed表示倒序它是个布尔熟悉，对于布尔熟悉的，我们只需要写属性名，没写表示假
<h1>西红柿炒鸡蛋</h1>
<ol type="I" reversed>
<li>西红柿洗净，切成小块；鸡蛋打散备用</li>
<li>热锅凉油，将鸡蛋液煎至黄色捞出沥干备用</li>
<li>将锅中余油留少许，放入葱姜蒜末爆香</li>
<li>加入西红柿翻炒至断生</li>
<li>
加入少许盐，白糖调味，继续翻炒至快出汁时计入鸡蛋，快速搅拌均匀即可起锅
</li>
</ol>
效果图
2>无序列表
<ul> <li>女的</li> <li>活的</li> </ul>
效果图：
3>定义列表（一般不怎么用）
<dl> <dt>标题</dt> <dd>描述1...</dd> <dt>标题2</dt> <dd>描述2...</dd> <dt>标题3</dt> <dd>描述3...</dd> </dl>
效果图：
8.容器元素
div：无语义，浏览器无法理解里面是什么
容器只是用来划分区域的，css来控制样式
header：页头/文章头部
footer：页脚/文章尾部
nav：导航链接
main：用来定义文档的主要内容
article：整篇文章
section：文章章节
aside：附加信息（侧边栏）
9.元素包含关系
块级元素可以包含行内元素，行内元素不可以包含块级元素
元素的包含关系，由元素的内容类别决定
容器元素可以包含任意元素
a元素基本可以包含任意元素
国定包含关系
习惯+查文档
10.css元素
在html的头里面写<head>
<style>
</style>
css注释 /* */
11.css规则
h1{
color:yellow;
backgrout-color:red;
text-align:center;
font-size:3em;
}
选择器：
元素选择器
id选择器
类选择器
12.css书写位置
1>内部样式表（写在style元素里面）
2>内联样式表（可以卸载元素的style属性里面）
3>外部样式表（写在外部文件里面，推荐的样式表，可以解决css重复的问题）
引用：<link rel="stylesheet" href="./css/index.css">
外部样式表的优点：可以解决样式重复的问题
有利于浏览器缓存，提高页面相应速度
结构和样式分离，有利于以后阅读和维护
css代码可以写在html的头部也可以写在body里面
1>写在head里面，目的是让它先加载出来，因为浏览器是按照顺序来读取的
2>写在body里面是让它后加载出来
基础样式声明
1.color：元素内部文字颜色
预设值：就是定义好的颜色值，比如red，bilue，green等等
这些预设值大概有140个
色值（三原色）
rgb（255,255,255）
#ffffffff：这个是16进制表示，2个ff表示255,6个刚好就表示3个255
简写方式：aabbcc：#abc
2.background-color：元素背景颜色
3.font-size：元素内部文字大小
px：像素
em：相对父元素的字体大小
如果元素没有声明字体大小，则使用父元素的字体大小，如果没有父元素，则使用基准字号
4.font-weight:文字粗细效果
strong元素：最重要的内容
5.font-family：字体
非衬线字体：字体边缘没有修饰
6.font-style：字体样式（常用于字体倾斜）
i元素：常用于表示图标（icon）
em：表示强调的意思
7.letter-spacing:文字间歇
8.text-align：用来设置元素内部文字水平对齐方式的
9.text-indent：首行缩进
10.text-decoration：文本加线
delete：表示废弃的内容
11.height：用来设置元素的高
12.width：用来设置元素的宽
13.line-height：用来设置文本行高，文字在行高内是垂直居中的
13.通配符选择器
*：表示通配符选择器
*{
color：green
}
属性选择器：
[title]{
color:red;
}
属性值是某些值,比如：title是标题的内容
[title="标题"]{
color:blue;
}
14.伪类选择器（选择某些元素的某种状态）
link
visited
hover：鼠标悬停状态
visited：超链接访问过的状态
hover：鼠标悬停状态
active：激活状态（鼠标暗笑状态）
网上记忆技巧：爱恨法则：love hate
15.伪元素选择器：
before
after
伪类选择器的属性用法：
<strong>你好</strong> <style> strong::before { content: "#"; color: red; } strong::after { content: "#"; color: red; } </style>
16.组合选择器
1>交集选择器
就是通过多个html的属性进行对元素的定位，然后修改该元素的css样式
<p class="abc" title="段落">p交集选择器</p>
<style>
strong::before {
content: "#";
color: red;
}
strong::after {
content: "#";
color: red;
}
p.abc[title="段落"] {
color: blue;
}
</style>
展示效果
2>并集选择器（逗号分隔）
就是这些css属性对多个元素同时使用
<dl>
<dt>标题</dt>
<dd>描述1...</dd>
<dt>标题2</dt>
<dd>描述2...</dd>
<dt>标题3</dt>
<dd>描述3...</dd>
</dl>
<strong>你好</strong>
<p class="abc" title="段落">p交集选择器</p>
<style>
strong::before {
content: "#";
color: red;
}
strong::after {
content: "#";
color: red;
}
p.abc[title="段落"] {
color: blue;
}
p,
dl {
background-color: aqua;
}
展示效果：
3>后代选择器
<p>p1元素后代选择器</p>
<main>
<p>p2元素后代选择器</p>
</main>
<style>
strong::before {
content: "#";
color: red;
}
strong::after {
content: "#";
color: red;
}
p.abc[title="段落"] {
color: blue;
}
p,
dl {
background-color: aqua;
}
main p {
color: red;
}
</style>
展示效果
4>子元素选择器
<main>
<p>p2元素</p>
<div>
<p>子元素后代选择器</p>
</div>
</main>
<style>
strong::before {
content: "#";
color: red;
}
strong::after {
content: "#";
color: red;
}
p.abc[title="段落"] {
color: blue;
}
dl {
background-color: aqua;
}
main > p {
color: red;
background: blue;
}
</style>
展示效果：
5>相邻兄弟选择器（+）
6>通用兄弟选择器（~，只能选择后面的兄弟）
17.层叠样式（权重计算）
解决声明冲突（浏览器解决）
一.比较重要性
重要性从从高到底
1>!important样式
2.普通样式
3.浏览器默认样式
可以用来重置浏览器默认样式表
可以使用网上色重置样式表，比如reset.css
@charset 'utf-8';
/*这些元素都建议重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
padding:0;
margin:0;
font-family:Arial,'Microsoft YaHei','宋体';
}
/*去掉列表默认排列*/
ul,ol,li{
list-style:none;
}
/*去掉底部横线*/
/*把a元素更改设置成块级元素，这个根据实际情况决定要不要*/
a{
text-decoration:none;
display:block;
}
/*img标签要清除border。*/
/*display设为block设置为块级元素，默认为display:inline;
存在下边线多出4px状况,所以一般设为block*/
img{
border:0;
display:block;
}
/*清除浮动破坏带来的塌陷问题*/
/*清除浮动的兼容IE*/
.clearfloat {
zoom: 1;
}
.clearfloat:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
二.比较特殊性
选择器选择的范围越窄，就越特殊
通过选择器计算出一个四位数（0000），这个四位数越大特殊性就越高
千位：内联样式记1，否则记为0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器，属性选择器以及伪类选择器的数量和
个位：等于选择器中所有元素选择器和伪元素选择器的数量和
三.比较源次序
代码靠后的胜出
18.继承
子元素会继承父元素的部分属性。通常来说，和文字类相关的属性都能被继承
css属性值计算过程：
浏览器要渲染一个元素的前提：该元素的所有css属性必须都要有值
1.确定声明值
样式表中没有冲突的声明，直接作为css属性值
2.层叠
样式表中有冲突的声明，使用层叠规则确定css属性值
比较重要性
比较特殊性
比较源次序
3.继承
前两步结束，任然没有值的属性，如果可以继承，则继承父元素的值
a{
text-decoration:none;
color:inherit;
initial:初始值，默认值，这个css标准规定的默认值，不是浏览器自己规定的默认值
}
4.使用默认值
前三步结束了，任然没有值的属性，使用默认值
19.盒子模型
每一个元素都会胜出一个矩形区域，这个矩形区域就被认为是一个盒子（box），而盒模型就是用来描述这个些盒子的方式
盒子类型：
1>行盒（行内元素）：display等于inline的元素，水平方向排列，不换行
2>块盒（块级元素）：display等于block元素，垂直方向排列，独占一行
不管是行盒和块行都是下面几部分组成：
从内岛外：内容：content：内容盒
宽度：width
高度：height
填充：padding，内边距
padding-top
padding-bottom
padding-left
padding-right
内容区+填充盒（padding box）
边框：border
border-style
border-width
border-color
border-radius（css3）
border：宽度 样式 颜色
内容区+填充区+边框：边框盒（border）
外边距：margin
margin-top，margin-bottom，margin-left，margin-right
简写属性：margin
29.实现单行内容的省略
overflow属性；
white-space
text-overflow
list-style-position：inside
white-space:nowrap; overlow:hidden; text-overflow:ellipsis;
list-style-position：inside；
显示效果：
30.行盒：
行盒是跟着内容延伸的，无法直接设置宽度和高度，宽高是由内容决定的
如果需要调节行盒的宽度和高度，可以通过字体大小和行高等，间接的来进行调整
内边距，边框，外边距：水平方向尺寸有效，垂直方向不占空间
31.块盒：
可以设置宽度和高度
32.行块盒：
display等于inline-block的盒子，水平排列，所有方向的尺寸都是有效的
空白折叠会发生在行盒内部以及行盒之间，当然也包括行快盒
可替换元素：页面上显示的内容，取决于元素属性，类似于行快盒.如：img，多媒体元素，文本框，按钮等等
不可替换元素：页面上显示的内容，取决于元素的内容
33.格式化视觉模型：页面中的多个盒子的排列规则，俗称布局规则
包含块：大多数情况下，包含块就是父元素的内容盒，它决定了盒子尺寸和排列位置
普通流：
文档流，标准流，常规流，普通文档流，常规文档流。。。
所有元素，默认情况下，都属于普通流布局，那么布局方式就是由盒模型的特点决定的
块盒独占一行，垂直排列。行盒不换行，水平排列。
行盒就是正常的水平排列
块盒：
水平方向：
默认情况下，快盒总宽度，等于包含块的宽度，因为width 默认值是auto，auto的作用是（剩余空间全部吃掉）
常规流里面，固定宽度，左右margin设置为auto，可以使块盒在包含块中居中
垂直方向：
height，默认就是auto，表示自适应内容高度
margin，auto就是0
百分比取值
width，height，padding，margin他们都可以用百分比取值
width，padding，margin的百分比，相对的都是包含块的宽度
height百分比：
1>如果包含块的高度不是auto，那么它就是相对于包含块的高度
2.>如果包含块的高度是auto，百分比无效
margin合并：
上下相邻的margin会进行合并，取最大值
浮动
不管是行盒还是块盒，盒子飘起来了，浮动之后，都会变成快盒
float：
1>默认值是none，普通流
2>left:左浮动，就是元素靠上靠左排列
auto：
1>width，height为auto时，适应内容宽度
2>margin为auto，表示上下左右都是0
浮动盒子排列时，会避开普通流盒子
普通流块盒排列时，会无视浮动盒子
高度坍塌的问题：
浮动流盒子脱离了文档流，所以普通流在计算高度的时候，不考虑浮动盒子。解决办法如下：
定位
position:用于控制元素在包含块中的精确位置
1>static(默认，没有定位)
2>relative(相对定位)
使元素相对于其自身原来的位置进行偏移，不会影响其它元素的位置，不会使元素脱离文档流（普通流）
3>absolute（绝对定位，脱离文档流）
包含块：包含块是所属定位元素的填充盒，如果它没有已定位的祖先元素，就会相对于初始包含块进行定位
4>fixed（固定定位，脱离文档流）
包含块：视口（就是浏览器的可视窗口）
auto：宽高适应内容，（上下或左右定位不冲突，否则auto会吃掉剩余空间）
初始包含块：是和视口大小一样的固定虚拟矩形，它会靠在页面上方，位置不会动，但大小会跟着视口变化
5>sticky（粘性定位，css3的）
可以理解为相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位
粘性定位元素的父元素显示，它就会一直显示，父元素消失，它也会消失
34.背景图
如果图片是作为网页内容显示的，应该用img元素
如果图片只是为了美化页面，应该使用背景图
background-image：
background-size：
background-repeat：
精灵图（sprite，雪碧图）
35.其他元素
video：展示视频的
媒体参与度：某些浏览器有自动播放策略，如果你与这个站点访问达到一定值的时候，浏览器就会放开对这个站点的播放策略，就可以自动播放了，否则可能会阻止自动播放的
controls：显示播放按钮等等,因为是布尔值，所以后面的等号里面的“crontrols”可以不写
autoplay：自动播放
muted：静音（消音）
loop：循环播放
audio：展示音频的
iframe：展示第三方网页的
内联框架元素
这3个都是可替换元素，它显示的内容都是一个行盒，但是在效果上都是一个行快盒
video例子：
<body> <video controls="controls" autoplay muted loop style="width:1000px;" src="media/hy.mp4"> </video> </body>
audio音频例子：
<audio controls src="audio/5.mp3"></audio>
iframe例子：
<iframe style="width: 1000px; height: 800px"
src="https://www.baidu.com" frameborder="0"></iframe>
把2个网页嵌入的iframe里面，同时点击对应的标签，会进行切换
在网页中嵌入b站视频
<iframe style="width: 1000px; height: 800px" src="https://www.bilibili.com/video/BV1rH4y1u7k5/?p=88&share_source=copy_web&vd_source=9706162bf0d4f035f791a7b5cc3ef8d9" frameborder="0" </iframe>
表单元素：
input：输入框
1>type属性：输入框类型
text：表示文本
password：密码
serach：搜索框
tel：这个在电脑浏览器上和文本输入框没有区别，但是在手机上会自动调用数字键盘
number：数字输入框
step:是步长的意思
2>placeholder:占位符
3>value:就是输入框的内容
<input type="text" placeholder="用户名"></input>
带value值的
<input type="text" placeholder="用户名" value="123456"></input>
效果图：
password类型：
<input type="password" placeholder="请输入密码" value="123456"></input>
效果图：
用div套上
<div>
<input type="text" placeholder="用户名" value="123456"></input>
</div>
<div>
<input type="password" placeholder="请输入密码" value="123456"></input>
</div>
显示效果：
搜索框：
<div>
<input type="text" placeholder="用户名" value="123456"></input>
</div>
<div>
<input type="password" placeholder="请输入密码" value="123456"></input>
</div>
<div>
<input type="search" placeholder="请输入搜索关键字" value="百度"></input>
</div>
显示效果：（内部设置默认值百度）
电话号码输入框：这个在电脑浏览器上和文本输入框没有区别，但是在手机上会自动调用数字键盘
数字输入框：
</div> <div> <input type="password" placeholder="请输入密码" value="123456"></input> </div> <div> <input type="search" placeholder="请输入搜索关键字" value="百度"></input> </div> <div></div> <input type="tel" placeholder="请输入手机号码" value="手机号"></input> </div> <div></div> <input type="number" placeholder="请输入数字" value="100"></input> </div>
带有最大值和最小值的数字框：
<div>
<input type="text" placeholder="用户名" value="123456"></input>
</div>
<div>
<input type="password" placeholder="请输入密码" value="123456"></input>
</div>
<div>
<input type="search" placeholder="请输入搜索关键字" value="百度"></input>
</div>
<div></div>
<input type="tel" placeholder="请输入手机号码" value="手机号"></input>
</div>
<div></div>
<input type="number" min="2" max="100" step="2" placeholder="请输入数字" value="100"></input>
</div>
显示效果：
单选框：
name属性表示这2个单选框是一组
<div> 性别： <input name="gender" type="radio" >男</input> <input name="gender" type="radio" >女</input> </div>
展示效果：
点击文字也能够选中：这种叫做显式关联
<div> 性别： <input id="male" name="gender" type="radio" > <label for="male">男</label> <input id="female" name="gender" type="radio" > <label for="female">女</label> </div>
显示效果：
隐式关联：就是直接把input放入到lable标签里面
<label>
<input checked id="male" name="gender" type="radio">男
</label>
<label>
<input id="female" name="gender" type="radio">女
</label>
显示效果一样：
多选框：
type=checkbox
checked：表示默认选中
name：表示是一组
<div>
爱好
<label>
<input name="hobby" type="checkbox">吃饭
</label>
<label>
<input checked name="hobby" type="checkbox">看电影
</label>
<label>
<input name="hobby" type="checkbox">逛街
</label>
</div>
显示效果：
日期框
<input type="date" >
显示效果：
颜色选择框：
<input type="color">
文件选择框：
<input type="file">
滑块调节框：
<input type="range">
展示效果：
可以设置：min，max
如果设置min=0，max=5，那么只有6个值可以选择,也可以设置步长，这样选择的值就多些
<input min="0" max="5" step="0.5" type="range">
按钮：
type=button/submit/reset
<div> <input type="button"> <input type="submit"> <input type="reset"> </div>
展示效果：
<input type="button" value="普通按钮"> <input type="submit" value="提交"> <input type="reset" value="重置">
button：
type属性：button/submit/reset
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
展示效果：
多行文本输入框：
textarea：也叫文本域
<textarea cols="30" rows="10" placeholder="请输入评论"></textarea>
显示效果：
禁止拉伸文本框大小
resize属性：禁止拉伸
<textarea cols="80" rows="20" style="resize:none;" placeholder="请输入评论"></textarea>
36.下拉列表选择框
代码：
<div>
请选择你要学习的语言
<select>
<option>python</option>
<option>java</option>
<option>c</option>
<option>c++</option>
</select>
</div>
显示效果
selected表示默认选中
<div>
请选择你要学习的语言
<select>
<option>python</option>
<option>java</option>
<option>c</option>
<option selected>c++</option>
</select>
</div>
显示效果：
下拉列表进行分组
<div>
请选择你要学习的语言
<select>
<optgroup label="后端">
<option>python</option>
<option>java</option>
<option>c</option>
<option selected>c++</option>
</optgroup>
<optgroup label="前端">
<option>css</option>
<option>html</option>
<option>js</option>
</optgroup>
</select>
</div>
进行分组
通常下拉列表只能有一个选项，可以修改参数进行多选：
<div>
请选择你要学习的语言
<select multiple>
<optgroup label="后端">
<option>python</option>
<option>java</option>
<option>c</option>
<option selected>c++</option>
</optgroup>
<optgroup label="前端">
<option>css</option>
<option>html</option>
<option>js</option>
</optgroup>
</select>
</div>
展示效果：
通过ctrl键进行多选
37.表单状态
readonly：只读状态
disabled：禁用状态
这2个属性，所有的表单都可以使用
<div>
<input type="text" readonly value="111111">
</div>
显示效果：
<div>
<input type="text" readonly disabled value="111111">
</div>
显示效果：
38.form表单
<form action="" method="get">
<div>
<input name="email" type="text" placeholder="邮箱">
</div>
<div>
<input name="tel" type="text" placeholder="电话">
</div>
<div>
<input name="nickname" type="text" placeholder="昵称">
</div>
<div>
<input name="pwd" type="text" placeholder="密码">
</div>
<div>
<input name="repwd" type="text" placeholder="确认密码">
</div>
<div>
<button type="submit">注册</button>
</div>
<div></div>
<button type="reset">清空</button>
</div>
</form>
展示效果：
action：填写的是京东的服务器地址，https://www.jd.com,我们的数据就发到京东服务器上去了
<form action="https://www.jd.com" method="get">
<div>
<input name="email" type="text" placeholder="邮箱">
</div>
<div>
<input name="tel" type="text" placeholder="电话">
</div>
<div>
<input name="nickname" type="text" placeholder="昵称">
</div>
<div>
<input name="pwd" type="text" placeholder="密码">
</div>
<div>
<input name="repwd" type="text" placeholder="确认密码">
</div>
<div>
<button type="submit">注册</button>
</div>
<div></div>
<button type="reset">清空</button>
</div>
</form>
显示效果：
fileset：
表单分组
<form action="https://www.jd.com" method="get">
<fieldset>
<legend>基本信息</legend>
<div>
<input name="email" type="text" placeholder="邮箱">
</div>
<div>
<input name="tel" type="text" placeholder="电话">
</div>
<div>
<input name="nickname" type="text" placeholder="昵称">
</div>
</fieldset>
<fieldset>
<legend>其它信息</legend>
<div>
<input name="pwd" type="text" placeholder="密码">
</div>
<div>
<input name="repwd" type="text" placeholder="确认密码">
</div>
<div>
<button type="submit">注册</button>
</div>
<div></div>
<button type="reset">清空</button>
</div>
</fieldset>
</form>
显示效果：
39.伪类选择器
focus：元素聚焦时的样式
<div>
<input tabindex="3" type="text">
</div>
<div>
<input tabindex="2" type="checkbox">选我选我
</div>
<div>
<input tabindex="1" type="button">点我点我
</div>
<style>
input:focus{
border: 5px solid red;
color：red；
}
</style>
显示效果：
checked:单选，多选框被选中时的样式
爱好
<label>
<input name="hobby" type="checkbox">
<span>吃饭</span>
</label>
<label>
<input checked name="hobby" type="checkbox">
<span>看电影</span>
</label>
<label>
<input name="hobby" type="checkbox">
<span>逛街</span>
</label>
<style>{
input:checked+span{
background-color: blue;
}
</style>
显示效果：
placeholder-shown:选中placeholder展示时的状态
<form action="https://www.jd.com" method="get">
<fieldset>
<legend>基本信息</legend>
<div>
<input name="email" type="text" placeholder="邮箱">
</div>
<div>
<input name="tel" type="text" placeholder="电话">
</div>
<div>
<input name="nickname" type="text" placeholder="昵称">
</div>
</fieldset>
<fieldset>
<legend>其它信息</legend>
<div>
<input name="pwd" type="text" placeholder="密码">
</div>
<div>
<input name="repwd" type="text" placeholder="确认密码">
</div>
<div>
<button type="submit">注册</button>
</div>
<div></div>
<button type="reset">清空</button>
</div>
</fieldset>
</form>
<style>
input:placeholder-shown{
background-color: red;
}
</style>
当输入的时候，背景红色就失效了
40.伪类选择器
。placeholder：选中placeholder，设置placeholder样式
标签：color,核心,元素,red,选择器,css,属性 From： https://www.cnblogs.com/miwaiwai/p/18444210