HTML和HTML5

2020-04-12 本文已影响0人球丁丁

一、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 域显示为常规的文本域

HTML和HTML5

一、HTML语义化

1. HTML语义化是什么？

2. HTML语义化好处

3.语义化标签举例

二、HTML5简单解析

1. 新特性

2. 部分标签解析

（3）<canvas>绘画标签，canvas 元素使用 JavaScript 在网页上绘制图像

3. 本地储存的优化

（1）localStorage - 没有时间限制的数据存储

（2）sessionStorage（回话储存） - 针对一个 session 的数据存储

（3）两者的异同

相同点

相同点

4. 应用缓存

优点

5. 表单

（1）input类型

猜你喜欢

热点阅读