180706 HTML5

最新推荐文章于 2022-07-29 17:15:26 发布

simpleone_

最新推荐文章于 2022-07-29 17:15:26 发布

阅读量175

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/simpleone_/article/details/80946099

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

语义化

什么是HTML语义化？

HTML 标签语义化是让机器可以读懂内容。
便于开发者阅读和写出更优雅的代码的同时对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。

为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

*SEO：SEO（Search Engine Optimization）:汉译为搜索引擎优化。
这里写图片描述
写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML5新增语义标签

这里写图片描述

article标签：定义一个独立内容区块：一篇文章、一个视频文件等
section标签：定义一个区域，如文章的章节等
nav标签：定义目录导航
aside标签：定义侧边栏
figure/figcaption标签：定义一组媒体内容以及它们的标题
header/footer标签：定义一个头部/底部
hgroup标签：标题分组
address标签：地址、联系信息等

一些常见html5语义化标签

canvas

这里写图片描述
– 作用：图形容器。
– 属性：

height/weight

canvas是基于状态的绘制，先设置状态，在调用函数。
canvas标签内部设置width/height与css设置width/height的区别：

css设定的是canvas画布的显示大小，标签内部设置还会设置canvas画布内里的大小。
内部标签设置没有单位。

– 如何使用canvas：

Canvas 有对应的HTML DOM对象。该对象有一个方法—getContext(contextID)：返回一个用于在画布上绘图的环境。参数是画布维数。
Canvas 绘图 API 定义在通过画布的方法 canvas.getContext(contextID)产生的实例对象上面。
Canvas 对象的 getContext() 方法把直接量字符串 “2d” 作为唯一的参数传递给CanvasRenderingContext2D对象。
CanvasRenderingContext2D的常用属性：
- fillStyle：填充样式
- strokeStyle：画笔样式
- lineWidth：画笔宽度
CanvasRenderingContext2D的常用方法：
- moveTo(x,y)：设置当前位置开始一条新路径。从哪里。
- lineTo(x,y) ：为当前子路径添加一条直线。到哪里。
- beginPath()：在一个画布中开始子路径的一个新的集合。顿笔，下一个字。
- closePath()：关闭当前路径。封口。
- stroke()：沿着当前路径绘制或画一条直线。勾勒。
- fill()：填充当前路径的内部。上色。
- rect(x,y,dx,dy)：为当前路径添加一条矩形子路径。
- strokeRect(x,y,dx,dy)：绘制（但不填充）一个矩形。
- fillRect(x,y,dx,dy)：绘制或填充一个矩形。
- clearRect(x,y,dx,dy)：在一个画布的一个矩形区域中清除掉像素。
- arc(x, y, radius, startAngle, endAngle, counterclockwise)：使用一个中心点和半径，为一个画布的当前子路径添加一条弧。0顺时针1逆时针。
- arcTo()

HTML DOM CanvasRenderingContext2D 对象

`2---<video>`

– 属性：

autoplay：如果出现该属性，则视频在就绪后马上播放。
controls：如果出现该属性，则向用户显示控件，比如播放按钮。
loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。

html5学习笔记（五）音频、视频

SVG

Scalable Vector Graphics 可缩放矢量图形
区别于光栅图像格式：用像素值来描绘的矩阵。
是一种用于描述图形的XML语法。
一个SVG图形是对画该图形时的必要路径的一种精确，分辨率无关的描述。

1基本图形：

<rect>矩形：x, y, width, height, rx, ry
这里写图片描述

<circle>圆形：cx, cy, r
这里写图片描述

<ellipse>椭圆：cx, cy, rx, ry
这里写图片描述

<line>线段：x1, y1, x2, y2
这里写图片描述

<polyline>折线：x1, y1, x2, y2, x3, y3
这里写图片描述

<polygon>多边形：x1, y1, x2, y2, x3, y3
这里写图片描述
2基本属性：
fill：填充
stoke：描边
stroke-width：描边粗细
transform：自由变换

3基本操作API：

创建图形元素：documentcreateElementNS(ns，tagName)
添加到DOM树：element.appendChild(childElement)
设置/获取属性：element.setAttribute(name，value)/getAttribute(name)

矢量图和位图的区别：

矢量图（SVG、AI等）：基于数学的描述。
位图（BMP、PNG、JPG等）：基于颜色的描述。

SVG与Canvas的区别

canvas来绘制图形是通过调用它提供的方法；
SVG绘制图形是通过构建一颗XML元素树。
SVG绘制图形，可以通过移除相应的元素来编辑图片。
canvas的API是基于JS的。

HTML5 API

地理位置API：允许程序向浏览器询问用户真是的地理位置。

支持地理位置API的浏览器会定义navigator.geolocation。

该对象有三个方法：

navigator.geolocation.getCurrentPostion() 获取用户当前位置
navigator.geolocation.watchPosition() 获取当前位置，同时不断地监视当前位置，一旦用户位置改变，就会调用回调函数。
navigator.geolocation。clearWatch() 停止监视用户位置

历史记录管理：浏览器会记录在一个窗口中载入的所有文档，同时提供了“后退”和“前进”按钮。允许用户在这些文档之间切换浏览。用户想通过浏览器的交互直观的切换应用状态，就必须使用历史记录管理。H5定了两种历史记录管理的机制。

第一种：

location.hash：更新显示在地址栏中的URL，同时会在浏览器的历史记录中添加一条记录。hash属性设置URL的片段标识符，通常是指要滚到的文档中某一部分的ID。但是也可以是字符串。
hashchange事件：浏览器一旦发现片段标识符发生了改变，就会在window对象上触发hashchange事件。
window.onhashchange()：在支持hashchange事件的浏览器中，可以通过设置该函数为一个处理程序。对location.hash的值进行解析，然后使用该值包含的状态信息来重新显示应用。

第二种：

history.pushState()：当web应用进入一个新的状态的时候，它会调用history.pushState()方法将该状态添加到浏览器的浏览历史记录中。
popstate事件

结构性复制：递归的复制所有嵌套对象或者数组的内容。好比将一个对象传递给JSON.stringify()方法，然后再将结果字符串传递给JSON.parse()方法。