目录
1、标签
2、属性
3、事件
4、视频/音频
5、画布
6、浏览器本地存储
1、标签
<area>
定义图像映射中的区域。
<article>
独立于文章内容
<aside>
的内容可用作文章的侧栏
<audio>
标签定义声音,比如音乐或其他音频流。
<b>
粗体文本,标签定义文本中需要强调的部分。
<strong>
定义重要的文本。
<button>
标签定义按钮
- button标签一定要写type属性,因为不同的浏览器会提交不同type 默认值;
- 元素内可以放置内容,比如文本或图像。这是该元素与通过 input 元素创建的按钮的不同之处;
- 如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。
<canvas>
- 标签定义图形,比如图表和其他图像。
- 标签只是图形容器,您必须使用Javascript脚本来绘制图形
<caption>
定义表格标题。
- 必须放置在table标签内的第一个元素。
- 每个表格只能规定一个标题
<footer>
- 标签定义 section 或 document 的页脚。
- 在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
- 假如您使用 footer 来插入联系信息,应该在 footer 元素内使用 <address> 元素
<form>
标签标签用于创建供用户输入的 HTML 表单。
- form 元素包含一个或多个表单元素,比如:
- button
- input
- select
- textarea
- keygen
- object
- output
<head>
元素是所有头部元素的容器。
- 位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息,等等。
- 请记得始终为文档规定标题!
- 下面是可用在 head 部分的标签:
<base>
<link>
<meta>
<script>
<style>
<title>
<header>
标签定义文档的页眉,一般放在<article>
表示的文档标签内。
<html>
标签告知浏览器这是一个 HTML 文档。
- html 元素是 HTML 文档中最外层的元素。
- html 元素也可称为根元素。
<iframe>
标签创建包含另一个文档的行内框架。
- 在 HTML 5 中,仅仅支持 src 属性
<img>
标签定义 HTML 页面中的图像。
- 请注意,从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。
-
<img>
标签的作用是为被引用的图像创建占位符。 -
<img>
标签有两个必需的属性:src 和 alt。
<input>
标签规定用户可输入数据的输入字段。
根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
input 元素是空的,它只包含属性
请使用 label 元素为表单控件定义标签(label)。
-
type属性的值:
- text
- button
- checkbox(type="checkbox"时,必须有 value 属性)
- radio(type="radio"时,必须有 value 属性)
- password
- number
- file (type="file"时,不能使用 value属性)
- date
- datetime
- range
- hidden
- month
- reset
- submit
- time
- url
- week
- datetime-local
<label>
标签为 input 元素定义标签(label)。
- label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。
-
<label>
标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。
<link>
标签定义文档与外部资源之间的关系。
- 标签大多数时候都用来连接样式表。
- link 元素是空元素,它仅包含属性。
- 该元素只能位于head 部分,但可以出现任何次数。
<map>
标签用于定义客户端图像映射。
- 图像映射指的是带有可点击区域的图像。
- name 属性在 map 元素中是必需的。该属性与
<img>
标签的 usemap 属性相关联,以创建图像与映射之间的关系。 - map 元素包含若干 area 元素,定义图像映射中的可点击区域。
- 在 HTML5 中,如果同时规定了
<map>
标签的 id 属性,则必须为 name 属性规定相同的值。 - area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<meta>
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档的头部,不包含任何内容。
- 标签的属性定义了与文档相关联的名称/值对。
- name属性的值:
- author
- description
- keywords
- generator
- revised
- others
<nav>
标签定义导航链接的部分。
- 如果文档中有“前后”按钮,则应该把它放到
<nav>
元素中。
<noscript>
元素用来定义在脚本未被执行时的替代内容(文本)。
- 此标签用于可识别
<script>
标签但无法支持其中脚本的浏览器。 - 如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。
- 无法识别
<script>
标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别<script>
标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中!
<script>
标签用于定义客户端脚本,比如 JavaScript。
- script 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。
- JavaScript 通常用于图像操作、表单验证以及动态内容更改。
- 如果使用 "src" 属性,则
<script>
元素必须是空的。 - 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行,即html和javascript 代码同时进行)
- 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行(先解析html代码,在执行Javascript 代码)
- 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本(阻塞html 代码的解析,页面加载缓慢,甚至导致页面空白)
<section>
标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<source>
标签为媒介元素(比如 <video>
和 <audio>
)定义媒介资源。
<style>
标签定义 HTML 文档的样式信息。
- scoped 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。
- 如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。
- 如需链接外部样式表,请使用
<link>
标签。 - 如果未定义 scoped 属性,那么
<style>
元素必须位于<head>
部分中
<datalist>
定义下拉列表。
<summary>
标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
- "summary" 元素应该是 "details" 元素的第一个子元素。
<table>
标签定义 HTML 表格。
- 一个简单的 HTML 表格包括 table 元素,一个或多个 tr、th 以及 td 元素。
- tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
- 更复杂的 HTML 表格也可能包含 caption, col, colgroup, thead, tfoot, tbody 等元素。
- 在 HTML5 中,仅支持 "border" 属性,并且只允许使用值 "" 或 "1"
<text-area>
定义一个文本区域 (text-area) (一个多行的文本输入区域)。
- 用户可在此文本区域中写文本。
- 在一个文本区中,您可输入无限数量的文本。
- 文本区中的默认字体是等宽字体 (fixed pitch)。
<video>
标签定义视频,比如电影片段或其他视频流。
- 可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。
2、属性
属性 | 值 | 描述 |
---|---|---|
contenteditable | true / false | 规定是否允许用户编辑内容。 |
contextmenu | menu_id | 规定元素的上下文菜单。 |
data-yourvalue | value | 创作者定义的属性。HTML 文档的创作者可以定义他们自己的属性。必须以 "data-" 开头。 |
draggable | true / false / auto | 规定是否允许用户拖动元素。 |
hidden | hidden | 规定该元素是无关的。被隐藏的元素不会显示。 |
3、事件
4、视频/音频
5、画布
6、本地存储