(10.31更新) 一些 HTML5 标签

内容相关标签

header, main, footer, article等

功能相关标签

canvas, video等

canvas标签的用法 (支持Safari, IE9等) HTML写法: <canvas id="canvas"></canvas>

// JavaScript 写法：

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

eg.fillStyle = "lightblue";
eg.fillRect(10, 10, 100, 100);

//  运行效果如下图

video 标签的用法 (支持Safari, IE9等)

用法和<img>标签类似，在src属性中加入文件地址。

传入的文件可以是视频，也可以是音频，但是音频使用<audio>标签会有更好的交互体验。

此外还可以自定义视频的宽度/高度/循环播放等属性。

<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">
            
    Sorry, your browser doesn't support embedded videos.
</video>

具体操作可参考MDN官方文档： developer.mozilla.org/en-US/docs/…

1. a标签的用法

三个作用

跳转外部页面: 如网址 https: //google.com
跳转内部锚点: 如内部路径 /a/b/c
跳转到邮箱或电话等

常用属性

href:超链接，即hyper+reference
target：在哪个窗口，打开href
download：理论上是下载页面，但是有很多浏览器（尤其是手机浏览器）不支持该属性
rel=noopener：防止bug用的，以后的课程会讲到

a的href的取值

https的网址，如google.com
http的网址，如google.com
无协议网址，如//google.com；无协议网址最高级，用//可以自动选择使用https还是http，所以以后写代码中的网址，我们都选用这种写法
路径，如/a/b/c，以及a/b/c
直接写文件，如index.html以及./index.html（在当前目录找index.html）
伪协议：-javascript；写一个a标签，但是什么都不做其中xxx代表id
邮箱
手机号
id：举例如下，xxx代表id

<a href = "#xxx">

a标签的target属性

指在哪个属性下打开href/指定在哪个窗口打开href，例如在空白页打开href可以写作下面的：

target = "_blank"

内置名字包含blank/top/parent/self

2. img标签的用法

image，注意不要写成全称

<img src="x" alt="y">

这里的“x”一般是图片地址或者相对/绝对路径，“alt”指属性

作用：发出get请求，展示一张图片

属性

alt：加载失败后显示文字
height/width：长度和宽度，可以只写一个，另一个默认等比例缩放。但是不能同时设置，因为这样会使非正方形比例的图片产生形变。而前端的底限之一是：

HTML 常用标签小结

(10.31更新) 一些 HTML5 标签

内容相关标签

功能相关标签

1. a标签的用法

三个作用

常用属性

a的href的取值

a标签的target属性

2. img标签的用法

image，注意不要写成全称

作用：发出get请求，展示一张图片

属性

永远不要让图片变形

事件：onload和onerror

响应式

可替换元素：考试可能会问

3. table标签的用法

相关标签

相关的样式