一、HTML 5 新加标签
header : 头部
nav: 导航链接部分
footer:页脚、底部
article:文章
section:文章内的节 区域 也就是 某一块
aside:内容之外的内容;边栏使用;
等,了解更多需要去 w3c 看。
二、HTML 5 新增属性
1、下拉框效果
上层 input 标签 内的 list 属性必须为下层 datalist 标签的 id;
内层 option 标签 必须包含 value 属性。
代码:
<input type="text" value="请输入内容" list="star"/>
<datalist id="star">
<option value="a1234">a1234</option>
<option value="a1234">a1111</option>
<option value="a1234">a2222</option>
<option value="a1234">a3333</option>
<option value="a1234">a44444</option>
<option value="a1234">a55555</option>
</datalist>
2、无法形容的效果
看着挺好的效果
代码:
<fieldset style="width: 200px">
<legend>修改密码</legend>
旧密码:<input type="text"><br>
新密码:<input type="text">
</fieldset>
3、新增表单 type 属性值
input 内的 type 属性的新增
email : 输入 电子邮箱;
tel :输入手机号 手机使用 会主动弹出数字键盘
url:输入 url 格式
number:输入 数字格式
search:搜索框
range:自由拖动模块 相当于 可拖动的进度条
time:小时分钟
data:年月日
datetime:时间
month:月年
week :星期年
4、新增表单属性熟悉
placeholder:提示文字 相当于 Android 的 hint 属性
autofocus:自动获取焦点 也就是自动获取输入光标
multiple:多文件上传 可以文件多选
required:内容不能为空
accesskey:规定激活某个元素的快捷键
5、插入音视频
1)、音频
标签:
属性:src 资源引入
autoplay 自动播放
controls 显示播放相关的控制开关
loop 循环播放
代码:
<audio autoplay loop controls>
<source src="test.mp3"/>
</audio>
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akvVfQLV-1572505404156)(https://upload-images.jianshu.io/upload_images/6433394-e09c1b8acf2e5e2a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
2)、视频
标签:
属性:src 资源引入
autoplay 自动播放
controls 显示播放相关的控制开关
loop 循环播放
代码:
<video autoplay controls loop>
<source src="test.mp3" />
</video>
三、CSS 新增内容
1、新增伪类选择器
:first-child : 属于其父类元素下 第一个子元素;
:last-child : 属于其父类元素下 最后一个子元素;
:nth-child(n) :从第一个开始数,第 n 个子元素; 括号内 even 表示所有偶数的子条目,odd 表示所有奇数 的子条目,n 表示全选,2n 表示偶数,2n+1 表示奇数;
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: 200px;
}
ul li:first-child {
background-color: red;
}
ul li:last-child {
background-color: green;
}
ul li:nth-child(3) {
background-color: cornflowerblue;
}
ul li:nth-child(even){
background-color: darkorange;
}
</style>
</head>
<body>
<ul>
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
<li>英国</li>
<li>法国</li>
</ul>
</body>
2、属性选择器
标签 带有某个属性的 都可以被选择;
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
width: 200px;
}
li[class] {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<ul>
<li >中国</li>
<li class="demo">美国</li>
<li>俄罗斯</li>
<li>英国</li>
<li class="fg">法国</li>
</ul>
</body>
效果:
以某一个 属性值开头的 属性^=属性值
,以某个属性值结尾的属性$=属性值
,
代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
width: 200px;
}
li[class^=demo] {
background-color: cornflowerblue;
}
li[class$=demo]{
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>中国</li>
<li class="demo2333">美国</li>
<li>俄罗斯</li>
<li>英国</li>
<li class="2333demo">法国</li>
</ul>
</body>
效果:
3、伪元素
一个点类名,两个点是伪选择器,四个点是伪元素选择器
属性
::first-letter :选择第一个字
::first-line :选择第一行
::selection :选中的数据
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p::first-letter {
font-size: 40px;
color: green;
}
p::first-line {
color: red;
}
p::selection {
font-size: 10px;
color: darkorange;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<p>
记忆在时间中尘封,往事如流水匆匆逝去,生命花瓣在冬夜飘零,犹如停留叶面的晨露。人们都在追寻一片乐土,可以远离战火和纷争,享受上苍给予的快乐与宁静,背负着坎坷命运的大地上,这样的梦想似乎遥不可及。曾经有这样一个人,他的梦就是要把虚无的遥远变成触手可及的真实,即便是去白日的阳光,永远行走在黑夜的暗影。岁月不断沧桑残酷,破晓分割黑夜白昼,当天边的北斗星再一次升起,这个梦将被无尽的延续..
</p>
</body>
4、伪元素清除浮动
属性和值:
::before :在某个元素之前
::after :在某个元素之后
这两个伪元素都将数据内容插入到了 其它标签的内部;这两个伪元素被指为行内元素。
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div::before {
content: "我在";
width: 200px;
height: 200px;
display: block;
background-color: cornflowerblue;
color: white;
}
div::after {
content: "上班";
width: 200px;
height: 200px;
color: white;
background-color: green;
}
</style>
</head>
<body>
<div>
望京
</div>
</body>
四、Css 3 盒子模型
Css 2 的盒子模型:盒子尺寸=盒子原有尺寸+padding +border
Css 3的盒子模型:盒子尺寸=原有盒子尺寸=内容尺寸+padding+border
将 Css 2的盒子模型转换为 Css 3 盒子模型步骤在原有的样式内添加:box-sizing:border-box;
实现向内的边框代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
height: 500px;
background-color: cornflowerblue;
position: relative;
}
div:hover::after {
content: "";
width: 100%;
height: 100%;
border: 5px solid red;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
</body>