一、html5基本骨架更简单
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
</body>
</html>
1
二、html5语言特性
单标签可以不使用 / 结束
<img src="./images/0.jpg" alt="">
<input type="text">
1
html属性值可以不再使用双引号进行包裹
<input type=button value="我就不加双引号">
1
标签名大小写都合法
<button>我是大写的button 我们没有什么不同</button>
1
所有的type都不用写了
<script></script>
<style>
button{
border: solid 4px red;
}
</style>
<link rel="stylesheet" href="">
1
布尔型属性，可以不用写布尔值
三、html5中可以用来替换div的语义化新标签
<!-- html5中的新标签 header footer section nav -->
<!-- 头部标签header 可以用来标识页面的头部或者是页面中某个区域的头部 -->
<header class="">header部分</header>
<!-- 导航标签nav 一般用来标识页面中的导航部分 -->
<nav class="">
<!-- logo部分 -->
<h1 class="logo"></h1>
nav部分
</nav>
<!-- banner部分 -->
<div class="banner">banner部分</div>
<!-- 页面中主要内容区域部分section标识 -->
<section class="">
section部分
<!-- 设置边栏 aside -->
<aside></aside>
<!-- 文章，微博评论等等 artical -->
<artical>
<!-- 文章可能会有大标题 和 多个副标题 那么我们会将他们作为一个群组 hgroup -->
<hgroup>
<!-- 标题群组部分 -->
</hgroup>
<div class="content">
内容区域
图文结合
<!-- 独立的流内容 设置图片 表格 表单等等 -->
<figure>
<img src="./images/1.jpg" alt="">
<figcaption>给独立的流内容添加标题</figcaption>
</figure>
</div>
</artical>
</section>
<!-- 脚部标签footer 可以用来标识页面的脚部或者是页面中某个区域的脚部 -->
<footer>
<div class="ft-top"></div>
<div class="ft-copy"></div>
</footer>
1
四、html5中其它语义化标签的介绍
time 修饰时间
mark 高亮显示
details和summary
<details> 标签用于描述文档或文档某个部分的细节。<summary> 元素包含 details 元素的标题，<details>元素用于描述有关文档或文档片段的更多详情。
<!-- 普通文本 -->
黄河之水天上来
<!-- 高亮显示 -->
<mark>疑是银河落九天</mark>
<!-- details 描述细节 summary类似与总结，details的标题 一般情况下两个配合使用-->
<details>
<summary>静夜思</summary>
<p>窗前明月光</p>
<p>低头思故乡</p>
<p>举杯邀明月</p>
<p>对影成三人</p>
</details>
1
四、html5中的表单新特性
4.1 form与控件的关联 在不包含控件的情况下，可以给控件form属性与表单id属性关联
4.2 label标签可以直接包裹控件
4.3 表单中新增type类型
date
month
week
time
search
tel
email 自动验证功能 需要包含@
url 自动验证功能 http:// 或 https:// 开头
color
number
range
注意：以上需要考虑浏览器兼容性，部分浏览器部分效果不兼容
<form action="get" target="_blank" id="des">
<label>请输入关键字</label> <input type="search" ><br >
<label for="username">用户名</label> <input type="text" id="username" name="username">
<div>
<label>性别：</label>
<label><input type="radio" name="sex" id="">男</label>
<label><input type="radio" name="sex" id="">女</label>
</div>
<div>入职日期：<input type="month"></div>
<div>公司成立的第几周：<input type="week"></div>
<div>公司邮箱：<input type="email"></div>
<div>公司网址：<input type="url"></div>
<div>你喜欢的颜色：<input type="color"></div>
<div>你喜欢的数字：<input type="number"></div>
<div>滚动条：<input type="range"></div>
<input type="submit">
</form>
<h2>隔开</h2>
<p>隔开</p>
<label for="date">出生日期：</label> <input type="date" id="date" name="date" form="des">
1
4.4 表单新增属性
placeholder 信息提示文本
autofocus 自动获取焦点 提示：如果有多个，默认以第一个为准
required 必填项
disabled 禁用
readonly 只读
multiple 多选
size 页面显示数量
<form action="" method="get" target="_blank">
<input type="search" placeholder="请输入查找内容" autofocus> <button>点击查找</button><br>
用户名：<input type="text" required><br>
密码：<input type="password" name="pass" value="123456" disabled><br>
公司名称：<input type="text" name="com" value="爱创课堂" readonly><br>
<input type="submit">
</form>
1
4.5 表单新增标签
datalist智能感应任何的文本框都可以用list属性和一个datalist标签产生绑定，表示智能感应
<!-- datalist 和 文本框 进行绑定 ，产生只能感应 -->
<input type="text" list="honor" placeholder="请选择你理想的荣耀手机">
<datalist id="honor">
<option value="荣耀v20"/>
<option value="荣耀20"/>
<option value="荣耀8x"/>
<option value="荣耀20i"/>
</datalist>
1
五、多媒体标签
h5之前，使用flash插件，添加视频到页面；
h5出现之后，可以使用h5的新标签来添加视频和音频
video 视频标签
audio 音频标签
属性：controls 控件出现
autoplay 自动播放 部分浏览器不兼容
loop 播放次数
<!-- 音频标签 -->
<h3>梦涵 - 17岁 (live)</h3>
<audio src="./videos/梦涵 - 17岁 (live).mp3" controls autoplay loop>您的浏览器不支持此h5标签</audio>
<!-- 视频标签 -->
<video src="./videos/1.mp4" controls height="200px">您的浏览器不支持此h5标签</video>
1
注：h5中视频支持的格式：
mp4 = 带有 h.264 视频编码和 aac 音频编码的 mpeg 4 文件
webm = 带有 vp8 视频编码和 vorbis 音频编码的 webm 文件
ogg = 带有 theora 视频编码和 vorbis 音频编码的 ogg 文件
元素支持多个 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签。
</video>
六、css3简介
css3作为css的最新版本，较之前版本新增了一些特性：
新增选择器：
属性选择器
结构性伪类选择器
伪元素选择器
ui状态伪类选择器
等....
新增属性：
border-radius
border-color
background-size
渐变色、阴影等等...
新增媒介查询 @media 可以用来进行响应式布局
新增过渡
新增动画
新增弹性盒布局
等等...
七、css3选择器
7.1 基本选择器
标签选择器
类选择器
id选择器
全局选择器
7.2 高级选择器
交集选择器
并集（群组）选择器
后代选择器
子代选择器 >
相邻兄弟选择器 + 只匹配后面符合条件的相邻兄弟
7.3 css3选择器
通用兄弟选择器 selector1 ~ selector2{att:val}
.item2{
background: red;
}
/* 相邻兄弟选择器 */
.item2+li{
background: blue;
}
/* 通用兄弟选择器 */
.item2~li{
background: orange;
}
1
属性选择器
selector[prop] 匹配含有指定属性prop的元素(css2)
selector[prop = val] 匹配含有的指定属性prop属性值为val的元素(css2)
selector[prop ^= val] 匹配含有的指定属性prop属性值以val开头的元素(css3)
selector[prop $= val] 匹配含有的指定属性prop属性值以val开头的元素(css3)
selector[prop *= val] 匹配含有的指定属性prop属性值含有val的元素(css3)
注意：val不能是数字
/* 属性选择器 */
/* 只要含有属性即可匹配 */
input[autofocus]{
background: #ee33ee
}
/* 属性需要等于指定的属性值 */
input[type=password]{
background: orange;
}
input[type=button]{
border: solid 1px red;
/* 外轮廓线 */
outline: none;
}
/* 属性值以val开头的元素 */
li[class ^= item]{
background: pink;
}
/*val不能是数字
li[class ^= 4]{
background: blue;
} */
/* 属性值以val结束的元素 */
li[class $= t]{
background: red;
}
/* 属性值含有val的元素 */
li[class *= list]{
color: green;
}
/* id和class的值不能以数字开头 类选择器匹配不到*/
/* .4list4{
background:yellow;
} */
1
结构性伪类选择器：
儿子序选择器:匹配到指定的第几个元素，会受其他元素的影响
first-child
last-child
nth-child(n)
nth-last-child(n)
n的值可以是阿拉伯数字，还可以是关键字 odd(奇数) even(偶数) ，还可以是公式 an + m
n从0开始依次递增，a 和 m是自己定义的数字，比方：2n+1 3n+2 5n+9
儿子类型选择器; 匹配到指定的第几个元素，不会受其他元素的影响
first-of-type
last-of-type
nth-of-type(n)
nth-last-of-type(n)
注意：以上所有去匹配的时候，都必须属于同一个父元素下面的同级子元素
.first-menu li:nth-child(1){
background: red;
}
.first-menu li.item1{
background: yellow;
}
/* 匹配奇数行 */
.first-menu ol li:nth-child(odd){
background: pink;
}
/* 匹配偶数行 */
.first-menu ol li:nth-of-type(2n+2){
background: orange;
}
/* 查看两者不同，是否受其他元素的影响 */
ol:first-child{
border: solid 3px red;
}
ol:first-of-type{
border: dotted 4px blue;
}
1
表单相关的UI伪类选择器
:disabled
:enabled
:checked
用户名：<input type="text" name="" id=""><br>
密码：<input type="password" disabled><br>
兴趣爱好：
<input type="checkbox" name="hobby" id=""><span>足球</span>
<input type="checkbox" name="hobby" id=""><span>羽毛球</span>
<input type="checkbox" name="hobby" id=""><span>网球</span>
<input type="checkbox" name="hobby" id=""><span>玻璃球</span>
input:enabled{
background: pink;
}
input:disabled{
background: red;
}
input:checked+span{
color: blue;
font-family: 楷体;
}
1
伪元素选择器
::after
::before
配合content在元素内部的起始和结尾处添加内容
可以用其来清除浮动，还可以使用它来制作先导符号，还可以用来设置相关字体，相关蒙版应用
::first-letter匹配第一个字
::first-line匹配第一行
<p>伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用
伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用
伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用
伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用
伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用
伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用伪元素选择器应用
伪元素选择器应用</p>
兴趣爱好：
<input type="checkbox" name="hobby" id=""><span>足球</span>
<input type="checkbox" name="hobby" id=""><span>羽毛球</span>
<input type="checkbox" name="hobby" id=""><span>网球</span>
<input type="checkbox" name="hobby" id=""><span>玻璃球</span>
p::first-letter{
font-size: 30px;
font-family: 楷体;
color: red;
font-weight: bold;
}
p::first-line{
color: red;
}
input:checked+span{
color: blue;
font-family: 幼圆;
}
input:checked+span::before{
content: "我的爱好是："
}
input:checked+span::after{
content: "，其实我是逗你玩的！！！"
1 }
八、伪元素应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
height: 200px;
width: 200px;
margin: 200px;
line-height: 200px;
text-align: center;
border: solid 2px gray;
position: relative;
}
.box::before{
display: block;
height:100px;
width: 100px;
content: "";
background: red;
border: solid 2px;
border-radius: 50%;
position: absolute;
top:-50px;
left: 50%;
transform: translateX(-50%);
z-index:10;
}
.box::after{
display: block;
height: 200px;
width: 200px;
content: "";
background:black ;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
display: none;
}
.box:hover::after{
display: block;
}
</style>
</head>
<body>
<div class="box">
盒子中的内容
</div>
</body>
</html>
关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程
网友评论