HTML5与CSS3
HTML5
视频
视频最好是MP4格式
常见属性
<body>
<video src="治愈系风景_爱给网_aigei_com.mp4" autoplay="autoplay" muted="muted"
controls="controls" loop="loop"></video>
</body>音频
新增的input类型
input新增属性
<style>
input::placeholder{
color: pink;
}
</style>
</head>
<body>
<form action="">
<!--required:搜索框一定要填东西
placeholder：搜索框里的内容
autofocus：自动点击搜索框
autocomplete:记录搜索信息 on打开 off关闭
multiple:可以多选文件-->
<input type="search" name="search"
required="required"
placeholder="zyc"
autofocus="autofocus"
autocomplete="on">
<input type="file" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
CSS3
属性选择器
<style>
input[value]{
color: pink;
}
input[type=radio]{
width: 100px;
}
/* 权重1 */
div{
width: 30px;
height: 30px;
background-color: green;
border: 2px dashed red;
}
/* 权重10+1 */
div[class^=zyc]{
background-color: pink;
}
div[class$=zyc]{
background-color: black;
}
/* 属性选择器权重为10 */
</style>
</head>
<body>
<!-- 选择相同文本框中的不同属性 -->
1.<input type="text" value="请输入">
<input type="text" ><br>
<!-- 属性相同 还可以选择属性=值来选择 -->
2. <input type="radio">
<input type="password"><br>
<!-- 选择以zyc开头的 -->
3. <div class="zyc1"></div>
<div class="zyc2"></div>
<div class="jjy1"></div><br>
<!-- 以zyc为结尾的 -->
4. <div class="1-zyc"></div>
<div class="1-jjy"></div><br>
</body>child选择器
<style>
ul li:first-child{
background-color: pink;
}
ul li:last-child{
background-color: red;
}
ul li:nth-child(3){
background-color: green;
}
/* 选择偶数 */
ol li:nth-child(even){
background-color: blue;
}
/* 选偶数 */
ol li:nth-child(odd){
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
</ul>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
</ol>
</body>
type选择器
<style>
section div:nth-child(1){
background-color: red;
}
section div:nth-of-type(1){
background-color: green;
}
</style>
</head>
<body>
<!--child先执行，把子类排序后，再找div
但是第一个不是div，所有无效 -->
<!-- type是先找类型，找完后再排列，所有第一个是jjy -->
<section>
<p>zyc</p>
<div>jjy</div>
<div>zycjjy</div>
</section>
</body>
伪元素选择器
<style>
div{
width: 200px;
height: 35px;
border: 1px solid red;
}
/* 永远在div内容之前 */
div::before{
content: '1';
}
/* 永远在div内容之后 */
div::after{
content: '3';
}
</style>
</head>
<body>
<div>2</div>
</body>box-sizing
filter模糊图片
calc（）函数
过渡
div{
width: 100px;
height: 100px;
background-color: pink;
transition: width 1s ease 1s ;
}
div:hover{
width: 400px;
}
</style>
</head>
<body>
<div></div>当有多个属性时，用，号隔开
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
transition: width 1s ease 1s,height 1s ease 1s ;
}
div:hover{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>HTML5与CSS3
http://localhost:8090//archives/html5yu-css3