一、语义标签
语义标签的作用
-
1.使HTML的结构更清晰
-
2.代码的可读性较好
-
3.代码的可维护性好
-
4.搜索引擎可根据标签的语言确定上下文和权重
-
5.移动设备的支持度更好
SEO 搜索引擎优化：zhuanlan.zhihu.com/p/97649981
1、article标签
2、aside标签
-
aside 标签定义 article标签外的内容
-
aside 的内容可用作文章的侧栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
aside {
width: 40%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
box-shadow: inset 5px 0 5px 0px lightskyblue;
font-style: italic
}
</style>
</head>
<body>
<p>
Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both
larval and adult forms.
</p>
<aside>
<p>
The Rough-skinned Newt defends itself with a deadly neurotoxin.
</p>
</aside>
<p>
Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina,
the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,
worms and other small creatures.
</p>
</body>
</html>
3、header标签
<style>
header {
background: left/cover url(images/puppy-header-logo.jpg);
height: 120px;
width: 100%;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>Cute Puppies Express!</h1>
</header>
<main>
<p>
I love beagles so much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!
</p>
</main>
</body>
4、footer标签
<style>
footer {
display: flex;
justify-content: center;
background-color: lightskyblue;
padding: 30px;
color: #ffffff
}
</style>
</head>
<body>
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard</li>
<li>Wear a tall, pointed hat</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
© 2018 Gandalf
</footer>
</article>
</body>
5、nav标签
nav 标签定义导航链接的部分
<style>
.bikes ol {
list-style-type: none;
padding-left: 0px;
/* margin-left: 0px; */
}
.bike {
display: inline-block;
}
.bike a:after {
display: inline-block;
content: ">"
}
</style>
</head>
<body>
<nav class="bikes">
<ol>
<li class="bike"><a href="#">Bikes</a></li>
<li class="bike"><a href="#">BMX</a></li>
<li class="bike">Jump Bike 3000</li>
</ol>
</nav>
<h1>
Jump Bike 3000
</h1>
<p>
This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your
skills.
</p>
</body>
6、section标签
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
section与article的区别
- article是一个特殊的section标签，它比section具有更明确的语义
- 它代表一个独立的、完整的相关内容块。
- div、section、article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。
- 原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。
<article>
<header>
<h1> Section与Article区别</h1>
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
</header>
<section>
<p>
article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。
div、section、article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用
article。 原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。
</p>
</section>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：maizi</h3>
<p><time pubdate datetime="2016-6-14">1小时前</time></p>
</header>
<p>这篇文章很不错啊，顶一下！</p>
</article>
<article>
<header>
<h3>发表者：小妮</h3>
<p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>    
</header>
<p>这篇文章很不错啊，对article解释的很详细</p>    
</article>
</section>
</article>
二、智能表单
1、新增输入控件
<form action="" method="GET">
<table>
<tr>
<td>E-mail:</td>
<td><input type="email" name="user_email" /></td>
</tr>
<tr>
<td>URL:</td>
<td><input type="url" name="user_url" /></td>
</tr>
<tr>
<td>Number:</td>
<td><input type="number" name="user_number" min="1" max="10" step="2" /></td>
</tr>
<tr>
<td>Range:</td>
<td><input type="range" name="user_range" min="1" max="100" /></td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="user_date" />
<!-- <input type="month" name="user_date" /> -->
<!-- <input type="week" name="user_date" /> -->
<!-- <input type="time" name="user_date" /> -->
</td>
</tr>
<tr>
<td>Search:</td>
<td>
<input type="search" name="user_search" />
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
email邮箱输入框要求输入正确格式，此外，还可以添加 multiple 属性以允许同时输入多个以逗号分隔的email。
<input type="email" name="user_email" />
url
URL地址输入框要求必须输入一个包含访问协议的完整的URL路径。
<td>URL:</td>
<td><input type="url" name="user_url" /></td>
输入类型 number 及 range
number 及 range 类型与包含数值的输入有关，并且支持浮点数表达式。不同的是range类型是用一个滑块来进行输入。 输入数值的取值范围由 min和 max两个属性来设置，默认是不限定；调节步长使用 step属性，默认步长是1.
<input type="number" name="user_number" min="1" max="10" step="2" />
<input type="range" name="user_range" min="1" max="100" />
number：
range：
tel 及 search
tel(电话输入文本) 及 search(搜索关键字输入的文本框) 类型与普通的文本没什么不同， 唯一不同的是输入关键字后search文本框右侧会出现一个"X"按钮，单击"X"后清空输入内容，由此带来方便。
date
date表示日期
<input type="date" name="user_date" />
<input type="month" name="user_date" />
<input type="week" name="user_date" />
<input type="time" name="user_date" />
2、表单autocomplete属性
会显示你曾经输入的东西 浏览器设置中的自动填充要打开
表单中 autocomplete默认开启
<input type="email" name="user_eamil" autocomplete="off">
3、表单autofocus属性
自动获取焦点 一些无障碍网站或者超市的那些收银机器，一般不使用鼠标，对焦点的要求非常严格。
<input type="text" name="user_fname" autofocus/>
4、表单form属性
在h5中，控件在表单外面时，使用form属性表示它也属于form里面，form进行提交时也会将这个控件的数据进行提交
<form action="" method="GET" autocomplete="on" id="user_form">
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="user_fname" autofocus/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="user_lname" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
<input type="email" name="user_email" autocomplete="off" form="user_form"/>
5、重写表单属性
对表单已有属性进行重写
<form action="a.html" method="get" autocomplete="on">
<table>
<tr>
<td><input type="submit" value="submit" formnovalidata="formnovalidate"></td> //将h5中的自动验证关闭
</tr>
<tr>
<td><input type="submit" value="submit" formaction="b.html"></td> //改变form的actin属性，改为提交给b.html
</tr>
<tr>
<td><input type="submit" value="submit" formmethod="post"></td>
</tr>
</table>
之前网站的地址是“xxx.com/xxx.jsp?id=… ，会有隐私风险，不安全 。因此现在网站都使用restful风格，将各种信息都隐藏了起来
6、list属性
<td>
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
</td>
7、multiple属性
multiple 属性规定输入字段可选择多个值。
<input type="file" name="user_file" multiple/>
8、novalidate属性
<form novalidate>……</form>
整个表单都不进行检验
9、pattern属性
通过这个属性添加校验的条件 pattern=“正则表达式”
<input type="text" name="user_fname" pattern="[A-z]{3}"/>
10、placeholder属性
提示文字
11、required属性
作一个非空的校验
<input required></input>
//这个输入不能为空
三、视频和表单
1、video标签
视频
<video src="./res/mov_bbb.mp4" controls></video>
controls属性 是向用户显示播放按钮、进度条等控件
2、audio标签
音频
<audio src="./res/song.mp3" controls></audio>
3、兼容性语法
有些版本的浏览器并不支持这两个标签
<body>
<video controls> //controls 属性规定浏览器应该为视频提供播放控件。
<source src="./res/..." type="video/mp4">
<source src="./res/..." type="video/ogg">
<source src="./res/..." type="video/webm">
当前浏览器不支持video直接播放
</video>
4、标签的attribute（属性）
- controls就是一个属性
- width与height属性
- 自动播放属性 autoplay (有的浏览器也不支持)
<video controls autoplay></video>
- 静音 muted
- 循环播放 loop
- 海报 poster
给视频添加一个海报，这时不应该设置自动播放
<video controls poster="./res/timg.jpg" width="300px" height="300px"></video>
5、对象的property（属性）
video对象有自己的属性
它继承自html mediaElement元素
-
duration 视频长度
-
loadeddata 事件在第一帧数据加载完成后触发。
-
currentTime 视频当前时间（进度）
-
volume 音量
video.volueme = 0.5 //音量为一半 -
muted 静音
-
videoWidth video宽度 ，videoHeight video高度
<video src="./res/mov.mp4"></video> //如果只写这个则没有进度条之类的东西，视频不能播放
//可以自己来写播放框
<button onclick="playVideo()">播放</button>
<script>
var video = document.querySelector("video")
var button = document.querySelector("button")
/*console.log("视频长度"，video.duration) NAN，因为视频的加载是一个异步任务，代码读取到这一行的时候视频有可能还没有加载完*/
/*loadeddata 事件在第一帧数据加载完成后触发。*/
video.addEventListener("loadeddata",function(){
console.log("视频长度"，video.duration) /*这才会打印出视频长度*/
})
//视频开始播放后，每过一秒显示视频的当前时间
setInterval(()=>{
console.log(video.currentTime)
},1000)
function playVideo(){
if(video.paused){
video.play()
button.innerHTML = "暂停"
}else{
video.pause
button.innerHTML = "播放"
}
}
</script>
