HTML5新增属性
HTML5新增属性
typora-root-url: ./
HTML5新增元素及属性
1、HTML5阶段内容
HTML5新增元素、属性
表单元素
CSS3高级特效以及CSS3动画
video、audio
canvas
本地存储、离线缓存
课程导学
课程特点：
少逻辑多语义
简单易学高效
学习方法
固定标签、属性、语法需要记忆
勤加练习，善于总结，归纳易错点
本章目标
了解什么是HTML5及其应用场景
掌握HTML5新增的元素及属性
会使用CSS3高级选择器美化网页
掌握HTML5新增的表单元素及属性
2、HTML5应用场景
酷炫网站制作
游戏开发
移动开发
应用开发
3、什么是HTML5
HTML5是用于取代HTML和XHTML的标准版本
新特性
新的语义化标签，比如 header、footer、nav
新的表单控件，比如 email、url、search
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
4、HTML5新增结构元素
做网页布局使用：
标签 | 说明 |
|---|---|
header | 页面或页面中某一个区块的页眉，通常是一些引导和导航信息 |
nav | 可以作为页面导航的链接组 |
section | 页面中的一个内容区块，通常由内容及其标题组成 |
article | 代表一个独立的、完整的相关内容块，可独立于页面其它内容使用 |
aside | 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容【侧边栏】 |
footer | 页面或页面中某一个区块的脚注 【版权信息】 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x2Gv7duX-1629718533816)(/assetis/image-20210323211328426.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5结构元素</title>
<style>
.box{
width: 800px;
margin: 0 auto;
}
header{
height: 40px;
background-color: rgb(252, 111, 111);
}
nav{
height: 40px;
background-color: aquamarine;
}
.main{
width: 800px;
height: 500px;
overflow: hidden;
}
aside{
width: 300px;
height: 100%;
background-color: rgb(190, 218, 35);
float: left;
}
article{
width: 500px;
height: 100%;
background-color: rgba(23, 179, 106, 0.747);
float: left;
}
footer{
height: 40px;
background-color: rgb(236, 165, 165);
}
</style>
</head>
<body>
<div class="box">
<header>header导航栏</header>
<nav>nav导航主题连接部</nav>
<div class="main">
<aside>aisde边侧栏</aside>
<article>article主题部分</article>
</div>
<footer>footer底部</footer>
</div>
</body>
</html>5、HTML5废除的元素
能用css替代的元素：big、center、font、strike等
不再使用frame框架
只有部分浏览器支持的元素：applet、bgsound、marquee等
其他被废除的元素：rb、dir、isindex、listing、nextid等
iframe框架，网页嵌套:
<iframe src="http://www.baidu.com" frameborder="0" width="100%" height="800px"></iframe>6、HTML5新增全局属性
属性 | 说明 |
|---|---|
contentEditable | 规定是否允许用户编辑内容 |
designMode | 规定整个页面是否可编辑 【js中，document.designMode=‘on’；off代表不可编辑】 |
hidden | 规定对元素进行隐藏 |
time | 标签定义日期或时间所有的浏览器都不支持，作用就是用来标识时间，方便爬虫获取 |
tabindex | 规定元素的tab键迭制次序 |
body>
<!-- tabindex 根据tabindex='值' 设置按table键执行的先后顺序 -->
<p tabindex="5">哈哈哈哈</p>
<h1 tabindex="3">h1h1h1h1h1h1h1</h1>
<ul>
<li tabindex="1">li_11111</li>
<li tabindex="4">li_22222</li>
<li tabindex="2">li_33333</li>
</ul>
</body>7、HTML5废除的属性
table部分属性：bgcolor、border、cellpadding、width等
html的version属性
a元素或者link元素的charset属性
br的clear属性、img的align属性
摒弃的原因，可以用css样式实现的方法，h5在结构中摒弃掉。 即：样式和结构分离
8、CSS3高级选择器
选择器 | 描述 |
|---|---|
first-of-type | p:first-of-type选择属于其父元素的首个元素 |
last-of-type | p:last-of-type选择属于其父元素的最后元素 |
only-of-type | p:only-of-type 选择属于其父元素唯一的 元素 |
first-child | p:first-child选择属于其父元素第一个子元素 |
last-child | p:last-child选择属于其父元素最后一个子元素，如果最后一个子元素不是p,则不生效 |
nth-child(n) | p:nth-child(n)选择属于其父元素的第n个子元素，n从1开始 |
nth-of-type(n) | p:nth-of-type(n)选择属于其父元素的第n个p元素 |
:before | p:before在每个元素的内容之前插入内容 |
:after | p:after在每个元素的内容之后插入内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3高级选择器</title>
<style>
/* p:last-child{
color: red;
} */
p:last-of-type{
color: red;
}
/* p:first-of-type{
color: green;
} */
/* 找到第一个子元素，同时第一个子元素需要时p */
p:first-child{
color: red;
}
.four:only-of-type{
color: red;
}
p:nth-of-type(3){
color: green;
}
/* 元素的内容前插入 */
h1::before{
/* content: '￥'; */
content:url(./fang.png);
}
/* 元素的内容后插入 */
h1::after{
content: '元';
}
</style>
</head>
<body>
<!-- 选择器 描述
first-of-type p:first-of-type选择属于其父元素的首个<p>元素
last-of-type p:last-of-type选择属于其父元素的最后<p>元素
only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素
first-child p:first-child选择属于其父元素第一个子元素<p>
last-child p:last-child选择属于其父元素最后一个子元素<p>
nth-child(n) p:nth-child(n)选择属于其父元素的第n个子元素<p>
:before p:before在每个<p>元素的内容之前插入内容
:after p:after在每个<p>元素的内容之后插入内容
-->
</body>
<div>
<a href="">第一个a</a>
<p>我是第1个p</p>
<p>我是第2个p</p>
<p>我是第3个p</p>
<p class="four">我是第4个p</p>
<a href="">最后的a</a>
<h1>999999</h1>
</div>
</html> 9、优先级算法-
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载入样式以最后载入的定位为准
- !important > 内联>id > class > tag
- !important 比内联优先级高，但内联比 id 要高
加了!important 的属性优先级最高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 加了!important 的属性优先级最高 */
ul{
color: yellow !important;
}
#a{
color: tomato;
}
</style>
</head>
<body>
<ul style="color:green" id="a">
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
</ul>
</body>
</html>10、HTML5新增input类型
类型 | 说明 |
|---|---|
电子邮件地址文本框，提交表单时会自动验证email的值 | |
url | 网页的URL，提交表单时会自动验证url的值 |
color | 主要用于选取颜色 |
search | 用于搜索引擎（搜索框） |
number | 只包含数值的字段，能够设定对所接受的数字的限定 |
range | 滑动条，特定值范围内的数值选择器 |
Date pickers | 拥有多个可供选取日期的新输入类型 |
email:
<form action="">
<input type="email">
<button>提交</button>
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bi5gb5SE-1629718533819)(/assetis/image-20210323222805609.png)]
<form action="">
<!-- 网址必须输入http://**** .com/cn -->
网址：<input type="url">
<button>提交</button>
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bf9ahomc-1629718533823)(/assetis/image-20210323223116305.png)]
<form action="">
颜色：<input type="color">
<button>提交</button>
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dB6vbIlo-1629718533826)(/assetis/image-20210323223334098.png)]
<form action="">
搜索：<input type="search">
<button>提交</button>
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGmEw1yl-1629718533828)(/assetis/image-20210323223511081.png)]
新增input类型—number
<input type="number" name= "num" min="3" max="20" step="3" value="3"/>属性 | 值 | 说明 |
|---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔 |
value | number | 规定的默认值 |
<form action="">
<!-- 如果默认中是偶数 step是非1的数字 第一下加减的时候会先加减一 变为奇数 -->
数字：<input type="number" max="10" min="1" step="2" value="4">
<button>提交</button>
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bszu4q7L-1629718533831)(/assetis/image-20210323224019865.png)]
新增input类型—range
<input type="range" name= "point" min="2" max="15" step="1" value="3"/>属性 | 值 | 说明 |
|---|---|---|
max | number | 规定允许的最大值 |
min | number | 规定允许的最小值 |
step | number | 规定合法的数字间隔 |
value | number | 规定的默认值 |
<form action="">
范围：<input type="range" max="10" min="1" step="1" value="5">
<button>提交</button>
</form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whDgSLAf-1629718533833)(/assetis/image-20210323224530526.png)]
新增input类型—Date pickers
类型 | 说明 |
|---|---|
date | 选择日、月、年 |
month | 选择月、年 |
week | 选择周和年 |
time | 选择时间（小时和分钟） |
datetime-local | 选择时间、日、月、年（本地时间） |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LfqulG73-1629718533835)(/assetis/image-20210323224950047.png)]
<form action="">
<div>年月日：<input type="date"></div>
<div>年月：<input type="month"></div>
<div>年周：<input type="week"></div>
<div>小时和分钟：<input type="time"></div>
<div>本地时间：<input type="datetime-local"></div>
</form>新增input属性
属性 | 说明 |
|---|---|
autofocus | 页面加载时自动获得焦点 |
required | 规定输入域不能为空 |
placeholder | 提供一种提示，描述输入域所期待的值 |
pattern | 规定验证input域的模式（正则表达式）如：pattern="[0-9]+" |
height、width | 仅适用于image类型的input标签的图像高度和宽度 |
规定不能为空 required：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ehTPquwk-1629718533837)(/assetis/image-20210323225529313.png)]
规定输入的内容：pattern="[0-9]+"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrfqK0iM-1629718533839)(/assetis/image-20210323225735552.png)]
<form action="">
<div>用户名：<input type="text" required></div>
<div>密 码:<input type="password" autofocus></div>
<div>输入0-9:<input type="text" pattern="[0-9]+"></div>
<button>提交</button>
</form>| 规定验证input域的模式（正则表达式）如：pattern="[0-9]+" |
| height、width | 仅适用于image类型的input标签的图像高度和宽度 |
规定不能为空 required：
[外链图片转存中…(img-ehTPquwk-1629718533837)]
规定输入的内容：pattern="[0-9]+"
[外链图片转存中…(img-yrfqK0iM-1629718533839)]
<form action="">
<div>用户名：<input type="text" required></div>
<div>密 码:<input type="password" autofocus></div>
<div>输入0-9:<input type="text" pattern="[0-9]+"></div>
<button>提交</button>
</form>腾讯云开发者
