一、HTML元素
HTML 文档由 HTML 元素定义,由嵌套的HTML元素(可以包含其他HTML元素)构成,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML元素语法
- HTML 元素以开始标签起始,以结束标签终止;
- 元素的内容是开始标签与结束标签之间的内容;
- 某些 HTML 元素具有空内容(empty content);
- 空元素在开始标签中进行关闭(以开始标签的结束而结束);
- 大多数 HTML 元素可拥有属性。
HTML 文档由嵌套的HTML元素(可以包含其他HTML元素)构成。
HTML空元素
- HTML空元素即为没有内容的HTML元素;
- HTML空元素应该在开始标签中关闭;
- HTML的一个空元素为
<br>
(用于定义换行),<br>
元素就是没有关闭标签; - HTML空元素的关闭方法是在开始标签中添加斜杠,比如
<br/>
,HTML、XHTML和XML都接受这种方式。
使用小写标签
由于HTML标签对英文字母的大小写不敏感,所以<P>
和<p>
表达的意思相同,不过大部分网站喜欢使用大写的HTML标签。
推荐使用小写标签。
HTML元素参考手册
标签 | 描述 | HTML5新属性 |
---|---|---|
基础 | ||
<!DOCTYPE> |
定义文档类型 | |
<html> |
定义一个HTML文档 | |
<title> |
为文档定义一个标题 | |
<body> |
定义文档的主体 | |
<h1> to <h6> |
定义HTML标题 | |
<p> |
定义一个段落 | |
<br> |
定义简单的折行 | |
<hr> |
定义水平线 | |
<!--...--> |
定义一个注释 | |
格式 | ||
<abbr> |
定义一个缩写 | |
<address> |
定义文档作者或拥有者的联系信息 | |
<b> |
定义粗体文本 | |
<bdi> |
允许您设置一段文本,使其脱离其父元素的文本方向设置 | ● |
<bdo> |
定义文本的方向 | |
<blockquote> |
定义块引用 | |
<cite> |
定义引用(citation) | |
<code> |
定义计算机代码文本 | |
<del> |
定义被删除文本 | |
<dfn> |
定义定义项目 | |
<em> |
定义强调文本 | |
<i> |
定义斜体文本 | |
<ins> |
定义被插入文本 | |
<kbd> |
定义键盘文本 | |
<mark> |
定义带有记号的文本 | ● |
<meter> |
定义度量衡。仅用于已知最大和最小值的度量 | ● |
<pre> |
定义预格式文本 | |
<progress> |
定义运行中的任务进度(进程) | ● |
<q> |
定义短的引用 | |
<rp> |
定义不支持 ruby 元素的浏览器所显示的内容 | ● |
<rt> |
定义字符(中文注音或字符)的解释或发音 | ● |
<ruby> |
定义ruby注释(中文注音或字符) | ● |
<s> |
定义加删除线的文本 | |
<samp> |
定义计算机代码样本 | |
<small> |
定义小号文本 | |
<strong> |
定义语气更为强烈的强调文本 | |
<sub> |
定义下标文本 | |
<sup> |
定义上标文本 | |
<time> |
定义一个日期/时间 | ● |
<u> |
定义下划线文本 | |
<var> |
定义文本的变量部分 | |
<wbr> |
规定在文本中的何处适合添加换行符 | ● |
表单 | ||
<form> |
定义一个 HTML 表单,用于用户输入 | |
<input> |
定义一个输入控件 | |
<textarea> |
定义多行的文本输入控件 | |
<button> |
定义按钮 | |
<select> |
定义选择列表(下拉列表) | |
<optgroup> |
定义选择列表中相关选项的组合 | |
<option> |
定义选择列表中的选项 | |
<label> |
定义 input 元素的标注 | |
<fieldset> |
定义围绕表单中元素的边框 | |
<legend> |
定义 fieldset 元素的标题 | |
<datalist> |
规定了 input 元素可能的选项列表 | ● |
<keygen> |
规定用于表单的密钥对生成器字段 | ● |
<output> |
定义一个计算的结果 | ● |
框架 | ||
<iframe> |
定义内联框架 | |
图像 | ||
<img> |
定义图像 | |
<map> |
定义图像映射 | |
<area> |
定义图像地图内部的区域 | |
<canvas> |
通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像) | ● |
<figcaption> |
定义一个 caption for a <figure> element | ● |
<figure> |
figure 标签用于对元素进行组合 | ● |
Audio/Video | ||
<audio> |
定义声音,比如音乐或其他音频流 | ● |
<source> |
定义media元素 (<video> 和 <audio>)的媒体资源。media | ● |
<track> |
为媒体(<video> 和 <audio>)元素定义外部文本轨道 | ● |
<video> |
定义一个音频或者视频 | ● |
链接 | ||
<a> |
定义一个链接 | |
<link> |
定义文档与外部资源的关系 | |
<nav> |
定义导航链接 | ● |
列表 | ||
<ul> |
定义一个无序列表 | |
<ol> |
定义一个有序列表 | |
<li> |
定义一个列表项 | |
<dl> |
定义一个定义列表 | |
<dt> |
定义一个定义定义列表中的项目 | |
<dd> |
定义定义列表中项目的描述 | |
<menu> |
定义菜单列表 | |
<command> |
定义用户可能调用的命令(比如单选按钮、复选框或按钮) | ● |
表格 | ||
<table> |
定义一个表格 | |
<caption> |
定义表格标题 | |
<th> |
定义表格中的表头单元格 | |
<tr> |
定义表格中的行 | |
<td> |
定义表格中的单元 | |
<thead> |
定义表格中的表头内容 | |
<tbody> |
定义表格中的主体内容 | |
<tfoot> |
定义表格中的表注内容(脚注) | |
<col> |
定义表格中一个或多个列的属性值 | |
<colgroup> |
定义表格中供格式化的列组 | |
样式/节 | ||
<style> |
定义文档的样式信息 | |
<div> |
定义文档中的节 | |
<span> |
定义文档中的节 | |
<header> |
定义一个文档头部部分 | ● |
<footer> |
定义一个文档底部 | ● |
<section> |
定义了文档的某个区域 | ● |
<article> |
定义一个文章内容 | ● |
<aside> |
定义其所处内容之外的内容 | ● |
<details> |
定义了用户可见的或者隐藏的需求的补充细节 | ● |
<dialog> |
定义一个对话框或者窗口 | ● |
<summary> |
定义一个可见的标题。当用户点击标题时会显示出详细信息 | ● |
元信息 | ||
<head> |
定义关于文档的信息 | |
<meta> |
定义关于 HTML 文档的元信息 | |
<base> |
定义页面中所有链接的默认地址或默认目标 | |
程序 | ||
<script> |
定义客户端脚本 | |
<noscript> |
定义针对不支持客户端脚本的用户的替代内容 | |
<embed> |
定义了一个容器,用来嵌入外部应用或者互动程序(插件) | ● |
<object> |
定义嵌入的对象 | |
<param> |
定义对象的参数 |
二、HTML属性
属性是为HTML元素提供的附加信息。属性和属性值对大小写不敏感。推荐使用小写的属性/属性值。
- HTML元素可以设置属性;
- 属性可以在元素中添加附加信息;
- 属性一般描述于开始标签;
- 属性总是以名称/值对的形式出现,比如:
name="value"
。 - 属性值应该始终被包括在引号内;
- 双引号是最常用的,不过使用单引号也没有问题。
HTML属性参考手册
属性 | 描述 | HTML5新属性 |
---|---|---|
accesskey |
设置访问元素的键盘快捷键。 | |
class |
规定元素的类名(classname) | |
contenteditable |
规定是否可编辑元素的内容。 | ● |
contextmenu |
指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 | ● |
data-* |
用于存储页面的自定义数据 | ● |
dir |
设置元素中内容的文本方向。 | |
draggable |
指定某个元素是否可以拖动 | ● |
dropzone |
指定是否将数据复制,移动,或链接,或删除 | ● |
hidden |
hidden 属性规定对元素进行隐藏。 | ● |
id |
规定元素的唯一 id | |
lang |
设置元素中内容的语言代码 | |
spellcheck |
检测元素是否拼写错误 | ● |
style |
规定元素的行内样式(inline style) | |
tabindex |
设置元素的 Tab 键控制次序。 | |
title |
规定元素的额外信息(可在工具提示中显示) | |
translate |
指定是否一个元素的值在页面载入时是否需要翻译 | ● |