H5（1）

DOCTYPE或者称为Document Type Declaration（文档类型声明，缩写DTD），通常情况下，DOCTYPE位于一个HTML文档的最前面的位置，位于根元素HTML的起始标签之前。因为浏览器必须在解析HTML文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析。

到目前为止（2018年），各浏览器主要包含了三种模式。在HTML5草案中，更加明确地规定了模式的定义：

传统名称	HTML5草案名称	document.compatMode返回值
standards mode(strict mode)	no-quirks mode	CSS1Compat
almost standards mode	limited-quirks mode	CSS1Compat
quirks mode	quirks mode	BackCompat

在IE9以上的浏览器中，三种模式在渲染方面几乎没有区别

在IE7、8、9中，理论上存在怪异模式，实际只有标准模式

在IE6中，标准模式和怪异模式渲染的区别最大。在ie6以下的浏览器中，只有怪异模式

attr&prop

Attribute（标签属性）：用于扩展HTML tag，可改变标签行为或提供元数据，属性总是以name=value的格式（属性的识别码后接与之相关的值）

html预定义属性

html自定义属性

property：js原生对象的直接属性

每一个预定义的attribute都会有一个property与之对应

区别

布尔值属性：property是布尔值类型

非布尔值属性：property是非布尔值类型

非布尔值属性中，不管什么情况attribute和property都是相等的

布尔值属性中，

property永远不会同步attribute
在没有更改过property时，attribute会同步property。一旦更改property，attribute就不会同步property

浏览器只认property，而且用户操作的也是property

H5中的小功能

class

变量名.classList.add("字符串");

在该变量中添加类名

变量名.classList.remove("字符串");

在该变量中删除类名

变量名.classList.toggle("字符串");

如果该变量没有该类名就添加，如果有则删除

**data-*（自定义属性）**

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有html元素上嵌入自定义数据属性的能力，并可以通过脚本在HTML与DOM表现之间进行专有数据的交换。

所有自定义数据属性都可以通过所属元素的HTMLElement接口来访问。HTMLElement.dataset属性可以访问它们。* 中的名称有以下限制：

该名称不能以xml开头，无论这些字母是大写还是小写；
该名称不能包含任何分号；
该名称不能包含A至Z的大写字母。

注意：自定义数据属性data-test-value可以通过HTMLElement.dataset.testValue来访问，即任何破折号都会被下一个大写字母替代。

可编辑内容

contenteditable

该属性是一个枚举属性，而非布尔值属性。表示元素是否可被用户编辑。如果可以，浏览器会修改元素的部件以允许编辑。

该属性必须是下面的值之一：

true或空字符串，表示元素是可编辑的；
false表示元素是不可被编辑的。

如果没有设置该属性，其默认值继承自父元素

语义化标签

语义化的好处：HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签，这种语义化的特性提升了网页的质量和语义，对搜索引擎更加友好。

hgroup

该元素代表网页或者section的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>HTML5</h1>
    <h2>gg</h2>
</hgroup>

注意：如果只需要一个h1~h6标签就不用hgroup；如果有连续多个标题或其他文章数据，h1~h6标签可用hgroup包含，和其他文章元数据一起放入到header标签中

该元素代表网页或section的页眉，通常包含h1~h6元素或hgroup

<header>
    <hgroup>
        <h1>HTML5</h1>
        <h2>gg</h2>
    </hgroup>
</header>

注意：可以是“网页”或任意“section”的头部部分，没有个数限制。

nav

该元素代表页面的导航链接区域，用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML5</li>
        <li>gg</li>
    </ul>
</nav>

注意：如果用在整个页面的主要导航上，不合适便不要使用

section

该元素代表文档中的节或段，段可以是指一篇文章里按照主题的分段，节可以是指一个页面里的分组。

注意：section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以使用div；article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要使用section，无实际意义的使用div

article

该元素容易与section和div混淆，其实article代表一个在文档，页面或网站中自成一体的内容（文章）

注意：独立文章用article；单独模块用section；无语义用div

aside

该元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<header>
			<hgroup>
				<h1>我是header</h1>
				<h2>我是header的副标题</h2>
			</hgroup>
		</header>
		<section>
			<header>
				<hgroup>
					<h1>我是content</h1>
					<h2>我是content的副标题</h2>
				</hgroup>
			</header>
		</section>
		<footer>
			<header>
				<hgroup>
					<h1>我是footer</h1>
					<h2>我是footer的副标题</h2>
				</hgroup>
			</header>
		</footer>
	</body>
</html>

语义效果：

canvas基本用法

canvas（画布）是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，用于绘制图形，创建动画。

该元素默认具有高宽：width:300px height:150px

IE9之前的浏览器不支持此元素

canvas标签的两个属性

canvas和img标签很像，唯一不同的是它没有src和alt属性。实际上，canvas标签只有两个属性——width和height，这些都是可选的。当没有设置高度和宽度时，使用默认长度。

画布的高宽：

html属性设置width和height时只影响画布本身不影响其内容
css属性设置width和height时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）

渲染

canvas元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，需要找到它的渲染上下文。

该元素有一个对象叫做getContext()方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式：

——获取方式

var canvas=document.getElementById("xxx");
var ctx=canvas.getContext("2d");

——检查兼容性

var canvas=document.getElementById("xxx");
if(canvas.getContext){
    var ctx=canvas.getContext("2d");
}

canvas绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他图形的绘制都至少需要一条路径。

绘制矩形

canvas提供了三种方法绘制矩形（画笔上的方法）：

——绘制一个填充的矩形(填充色默认为黑色）

fillRect(x,y,width,height)

——绘制一个矩形的边框（默认边框为一像素的实心黑色）

strokeRect(x,y,width,height)

——清除指定矩形区域，让清除部分完全透明

clearRect(x,y, width,height)

x与y指定了相对于canvas画布上所绘制的矩形的左上角（原点）的坐标

width和height设置矩形的尺寸，宽高无单位。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

边框向上取0.5px，向下取0.5px，又由于css中不支持小数点像素，最终会被渲染成1+1=2px，故若要1px的宽度，偏移量需要取 .5px；或者通过清除方法。如：

在水平和垂直偏移量为100px的位置取1px的边框，应为strokeRect(100.5,100.5,100,100)，即第一个100.5：100，第二个100.5：101，故100~101

样式和颜色

fillStyle：设置图形的填充颜色

strokeStyle：设置图形轮廓的颜色

lineWidth：该属性设置当前绘线的粗细，必须为正数，无单位。默认值为1.0

同步思维，有别于浏览器本身的渲染机制。上述样式必须放在canvas方法之前，否则无法生效。

覆盖渲染

谁在后谁覆盖最上面，即层级最高

lineJoin

设定线条与线条间接合处的样式（默认值为miter）

round：圆角

bevel：斜角

miter：直角

canvas绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤

首先，需要创建路径起始点
然后使用画图命令画出路径
之后把路径闭合
一旦路径生成，就能通过描边或填充路径区域来渲染图形

绘制

beginPath()

新建一条路径，生成之后，图形绘制命令就被指向到路径上准备生成路径。

生成路径的第一步叫beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

moveTo(x,y)

将笔触移动到指定的坐标x和y上

当canvas初始化或者beginPath()调用后，通常会使用moveTo()函数设置起点

lineTo(x,y)

绘制一条从当前位置到指定x和y坐标的直线

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

闭合路径closePath()不是必须的。这个方法会通过绘制一条从当前点到开始的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数无任何作用。

当调用fill()时，所有没有闭合的形状都会自动闭合，所以不需要调用closePath()，但是stroke()不会自动闭合。

stroke()

通过线条来绘制图形轮廓

fill()

通过填充路径的内容区域生成实心的图形。

rect(x,y,width,height)

绘制左上角坐标(x,y)，宽高为width和height的矩形。

当该方法执行时，moveTo()方法自动设置坐标参数(0,0)，也就是说，当前笔触自动重置回默认坐标。

lineCap

lineCap是canvas 2D API指定如何绘制每一条线段末端的属性（默认值为butt）。

有三个可选值：

butt：线段末端以方形结束

round：线段末端以圆形结束（在两端末尾添加）

square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域

____@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫