一、HTML语义化
1. HTML语义化是什么？
根据内容，选择使用最恰当的标签，看到标签就能知道内容和结构。
2. HTML语义化好处
- 在没有CSS样式的情况下，内容结构也可以很好呈现
- 使得HTML代码结构清晰，便于维护和开发
- 提升搜索引擎优化(SEO)的效果。爬虫依赖于标签来确定上下文和各个关键字的权重，使用语义化标签可以和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
- 便于团队开发和维护，减少差异化
3.语义化标签举例
- h1-h6 标签，标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
- <header> 标签，定义文档节页眉
<header>
<h1>Welcome to my page</h1>
<p>My name is Qiu</p>
</header>
- <main> 标签，规定文档的主要内容
<main>
<h1>My page content</h1>
<p>qqqqqqqqqqqqq</p>
<article>
<h1>content 1</h1>
<p>ppppppppp</p>
</article>
<article>
<h1>content 2r</h1>
<p>iiiiiiiiiiiii</p>
</article>
</main>
- <footer> 标签，定义文档或节的页脚
<footer>
<p>Posted by: qiudingding</p>
<p>Contact information:
<a href="mailto:someone@example.com">someone@example.com</a>.
</p>
</footer>
二、HTML5简单解析
1. 新特性
- 用于媒介回放的 video 和 audio 元素
- 用于绘画的 canvas 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
2. 部分标签解析
（1）<video> 视频标签
<video src="movie.ogg" width="320" height="240" controls="controls">
</video>
- 当前只支持三种视频格式，Ogg 、MPEG4 、WebM
- 允许多个视频资源，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>
- 标签属性，autoplay（添加后视频准备就绪即播放）、controls（添加后向用户显示控件，如播放按钮）、height（播放器高度）、width（播放器宽度）、loop（播放结束后重复播放）、preload（预加载），src（资源）
- 有对应的方法、属性及事件，如currenSrc属性、play()方法、puase事件等
（1）<audio> 音频标签
<audio src="song.ogg" controls="controls"></audio>
- 当前只支持三种音频格式，Ogg 、MP3、Wav
- 允许多个音频资源，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
- 标签属性，与video标签属性相同
- 有对应的方法、属性及事件，如currentTime属性、play()方法等
（3）<canvas>绘画标签，canvas 元素使用 JavaScript 在网页上绘制图像
- 创建画布，画出一个红色的矩形
<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas=document.getElementById('myCanvas'); //通过 id 找到canvas 元素
var ctx=canvas.getContext('2d'); // 创建 context 对象
ctx.fillStyle='#FF0000'; // 将其染成红色，
ctx.fillRect(0,0,80,100); // 确定了形状、位置和尺寸。
- canvas 标签可以画出各种不同形状的图案，需使用到不同API，详见文档
3. 本地储存的优化
（1）localStorage - 没有时间限制的数据存储
localStorage.setItem('a','1') //设置缓存，key-value
localStorage.getItem('a') //获取缓存，key
localStorage.clearItem() //清除缓存
（2）sessionStorage（回话储存） - 针对一个 session 的数据存储
sessionStorage .setItem('a','1') //设置缓存，key-value
sessionStorage .getItem('a') //获取缓存，key
sessionStorage .clearItem() //清除缓存
（3）两者的异同
相同点
- 与HTTP无关，HTTP不会带上其值
- 只有相同域名的页面才能互相读取值
- 每个域名最大储存量为5M，视浏览器情况不同有不同大小
相同点
- sessionStorage 在回话（页面）关闭后会消失
- localStorage 永远不会消失，除非用户清理
4. 应用缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
优点
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
- 详情可查阅文档
5. 表单
（1）input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- email：email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值
<input type="email" name="user_email" />
- url：url 类型用于应该包含 URL 地址的输入域在提交表单时，会自动验证 url 域的值
<input type="url" name="user_url" />
- number：number 类型用于应该包含数值的输入域
<input type="number" name="points" min="1" max="10" />
/*
min max value(默认值)
step(规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）)
*/
- range：用于应该包含一定范围内数字值的输入域，显示为滑动条
<input type="range" name="points" min="1" max="10" />
- Date pickers (date, month, week, time, datetime, datetime-local)：多个可供选取日期和时间的新输入类型
<input type="date" name="user_date" />
- search：search 类型用于搜索域，比如站点搜索或 Google 搜索，search 域显示为常规的文本域
网友评论