一、H5新增得语义化标签
1.什么是语义化?
即标签有了自己得含义,我们通过标签就能判断内容。
2.语言话标签有什么好处?
使得HTML页面结构更加明了清晰,且可读性增加,又便于团队的维护和开发。而且,更加有利于搜索引擎或者辅助设备理解 HTML页面的内容,这样搜索引擎可根据标签语言确定上下文、权重的关系。
二、H5常用的一些语义化标签
<header>:定义页面或内容的头部区域;
<nav>:定义页面导航;
<main>表示页面的主体内容(一个页面只能使用一次)
<time>:定义日期和时间
<main>表示页面的主体内容(一个页面只能使用一次)
<section>用于对网站和页面内容分块,划分单独的模块区域
<article>独立的文章展示
<aside>页面中的附属侧边信息
<mark>元素突出显示以表示引用的内容,或者突出显示与用户当前活动相关的内容,他不同于en或strong元素
<progress>元素用于定义一个进度条,有max(完成值)和value(进度条当前值)两个属性。
等等
三、H5的一些新增的属性值
1.<video>表示一段视频并提供播放的用户界面,属性值为:
.src:资源路径 .contorls:如果出现该属性,则向用户显示控件
.autoplay如果出现该属性,则视频在就绪后立刻播放
.loop:重复播放属性 .muted:静音属性 .poster规定视频正在下载时显示的图像,直到用户点击播放按钮
2.<hidden>
<hidden>属性是布尔属性。如果设置该属性,它规定元素仍未或不再相关。浏览器不应显示已规定 hidden 属性的元hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属 性 使 此元素可见。
四、标签
HTML5 新的 Input 类型:HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
<input>标签的常用属性:email ,url,number,range,Date pickers (date, month, week, time, datetime, datetime- local),search,color等等
五、HTML5新的元素
1.新的表单元素
-
datalist
-
keygen
-
output
2.新的form属性
-
autocomplete
-
novalidate
3.新的 input 属性:
-
autocomplete
-
autofocus
-
form
-
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
-
height 和 width
-
list
-
min, max 和 step
-
multiple
-
pattern (regexp)
-
placeholder
-
required
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input{
width: 90%;
}
</style>
</head>
<body>
<fieldset style="width: 400px; margin: auto;">
<legend>学生档案</legend>
姓名:<br>
<div class="cc">
<input type="text" placeholder="请输入你的姓名" /><br>
手机号码:<br>
<input type="tel" placeholder="1" /><br>
邮箱地址:<br>
<input type="email" placeholder="1"/><br>
所属学校:<br>
<input type="text" placeholder="1"/><br>
入学成绩:<br>
<input type="number" placeholder="0" /><br>
基础水平:<br>
<!--<input type="range" placeholder="10" /><br>-->
<meter style="width: 380px;height: 35px;" value="0.5"></meter><br>
入学日期:<br>
<input type="datatime" value="2020-02-03" placeholder="" /><br>
毕业时间:<br>
<input type="date" /><br>
课程进度:<br>
<input type="range" /><br>
<input type="button" value="保存" style="width: 100%; background-color: green; color: white;" />
</cc>
</fieldset>
<audio autoplay="autoplay">
<source src="video/F:\无损音乐\新建文件夹/"></source>
</audio>
</body>
</html>