HTML5和CSS3基础总结
HTML5
建⽴在html4的基础上，新增了⼀些有语义的标签，新增了⼀些api(application programming interface) 应⽤程序接⼝，本地存储，地理位置，绘制图形canvas，⾳频标签，视频标签
1.h5新增语义标签
<header>头部标签</header>
<nav>导航标签</nav>
<section>主体
<aside>侧边栏</aside>
<article>⽂章标签</article>
</section>
<footer>底部标签</footer>
2.h5新增标签属性
1./* 禁⽤属性，disabled*/
<input type="text" disabled="disabled">
2.<!-- ⾃动获取焦点 autofocus -->
<input type="text" autocus="autofocus">
3.<!-- ⾮空验证 required -->
<input type="text" required="required">
4. 浏览器⾃动补全 autocomplete(off/on)
off默认值
on 要配合name属性使⽤
33<form action="http:www.baidu">
<input type="text"  autoocomplete="on" name="eifht">
</form>
3.h5表单新增类型
input 新增type值
⽂本框：
email  邮箱类型，提交时进⾏邮箱验证
.
url    ⽹址，提交的时候进⾏验证
number  数字类型，属性 max、min、step
datetime-local  本地时间
data 选择⽇期年⽉⽇
month  选择⽉份
week  周类型
day    选择天
search 搜索框
4.h5⾳频新增类型
⾳频标签：
audio
source 多个⽂件
属性：
src ⾳频路径
controls  控制器⾯板
autoplay  ⾃动播放
loop    循环播放
单个⽂件引⼊⽅式：
<audio src = "" controls="controls"  autoplay="autoplay" loop="loop"> </audio>
多个⽂件引⼊⽅式，当⽂件不被识别时，继续向下识别
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src=""></source>
<source src="music/yinyue.mp3"></source>
</audio>
5.h5视频新增类型
视频标签的单个和多个⽂件以及属性的⽅式和⾳频标签⼀样
单⽂件：
<video src = "" controls="controls"  autoplay="autoplay" loop="loop"> </video>
多⽂件：
<video controls="controls"  autoplay="autoplay" loop="loop">
<source src="video/movie.webm"></source>
<source src=""></source>
<source src="video/movie.MP4"></source>
</video>
CSS3
选择器
1.交集选择器
li.open{}
.item.active{}
ul li.current{}
2.关系选择器
.news-list li{}  后代选择器
.news-list>li{}  ⼦代选择器
.one+span{}    相邻兄弟选择器：紧挨着的下⼀个兄弟元素.active~p{}  通⽤兄弟选择器: .one 后⾯的所有兄弟p元素3.属性选择器
1.有title属性的
ul li[title]{
color:blue;
}
2.有class属性的
ul li[class]{
color:red;
}
3.class属性=box的
ul li[class = "box"]{}
4.class属性带*号包含box
ul  li[class *= "box"]{
color:red;
}
5.class属性值以box开头
ul li[class ^="box"]
6.class属性值以box结束
ul li[class $= "box"]{}
7.class属性值是独⽴单词box
ul li[class ~="box"]{}
4.伪类选择器
第⼀种类型会受其他标签影响
1.第⼀个⼉⼦元素li
ul li:first-child{
}
2.最后⼀个⼉⼦元素li受影响
ul li:last-child{}
3.根据位置编号选择
odd：奇数
even: 偶数
表达式：字母必须是n，n从0开始
ul li:nth-child(n){}
ul li:nth-last-child{} 选择器元素必须是所有兄弟元素中的倒数度n个元素
第⼆种类型：不受其他标签影响:
ul li:first-of-type{}  第⼀个⼉⼦元素
ul li:last-of-type{}  最后⼀个⼉⼦元素
ul li:nth-of-type(){}    选择的元素必须是所有兄弟元素中同标签类型的第n个
ul li:nth-last-of-type{}  选择的元素必须是所有兄弟元素中同标签类型的倒数第n个
.box span:only-child{} 唯⼀⼀个⼦元素
--------------------------------------
.box2:empty{} 内容必须是空，（不能有空格，⽂本，标签）
:not(selecter) 排除掉复合selecor的元素否定伪类选择器
第三者：状态选择器
docues伪类，获取焦点。表单标签友谊写默认的属性
kuaijiejtab . takelshuxd
带前缀的属性，都属于测试属性测试属性，
，测试熟悉⼏个
cheacked伪类，选中标签
target伪类⽬标伪类，当单击内部跳转时，此时跳到的标签就是⽬标状态
div：target{}
案例：
5.圆⾓属性
5.1模拟三⾓形
盒⼦的边框：相邻两个边框相交形成平分，增⼤边框⼤⼩，把内容区渐变为0，也就是宽⾼最后吧不显⽰的三边框设置为透明⾊框和三⾓形是占位置的
5.2圆⾓属性
圆⾓单属性：⼀个值是⽔平垂直。两个值：第⼀个⽔平，第⼆个垂直
左上： border-top-left-radius:150px;
右上：border-top-right-radius:150px;
右下：border-bottom-right-radius:150px;
左下border-bottom-left-radius:150px;
5.3圆⾓符合属性
⼀个值：左上 右上 右下 左下
border-radius：50%
两个值：左上右下 右上左下
border-radius：10px 20px ;
三个值：左上 右上左下 左下
border-radius：10px 20px 30px;
四个值：左上 右上 右下 左下
border-radius：10px 20px 30px 40px;
⽔平/垂直
椭圆：
border-radius：100px 100px 100px 100px/50px 50px 50px 50px
6.伪元素
在元素的内部，有⼀前⼀后两个盒⼦，分别是before和after两个伪元素
，伪元素默认是⾏内显⽰模式
伪元素中的⽂本是不会被搜索引擎抓取的
7.理解clearfix清除浮动
.clearfix::after{
content:"";
display:block;
clear:both;
}
8.理解fontclass⽅式图标字体的实现
9.标准盒⼦模型和怪异盒⼦模型
标准盒⼦模型：box-sizing:content-box
盒⼦在⽹页中的尺⼨=content+padding+border，当元素设置padding和border后，会撑⼤盒⼦才尺⼨。
cssclass属性
怪异盒⼦模型（内减模式）：box-sizing:border-box
1.盒⼦在⽹页中的尺⼨=content+padding+border，当元素设置padding和border后，不会撑⼤盒⼦的尺⼨，会⾃动从content区域减去，盒⼦尺⼨不变
2.要给盒⼦设置固定宽⾼
阴影

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。