跳到主要内容

HTML

参考资料

简介

超文本标记语言(HyperText Markup Language,HTML)是一种用于创建网页的标准标记语言。

HTML 是一种基础技术,常与 CSS、JavaScript 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

  • HTML 用于描述页面的结构;
  • CSS 用于控制页面中元素的样式;
  • JavaScript 用于响应用户操作。

注释

<!-- 注释文字 -->

标签

Detail of the structure of an HTML element

一个标签包含开始标签、结束标签和内容部分,其中标签属性包含在开始标签之中。

有种特殊的标签不包含内容部分,并且开始标签和结束标签合二为一,称为「自结束标签」或「空标签」,其格式如下。这种标签也不能含有子标签。

<tag />
<meta name="" content="" />

基本结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
  • <!DOCTYPE html> — 文档类型。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,DOCTYPE 用来链接一些 HTML 编写守则,比如自动查错之类。DOCTYPE 在当今作用有限,仅用于保证文档正常读取。现在知道这些就足够了。
  • <html></html> — 该元素包含整个页面的内容,也称作根元素。
  • <head></head> — 该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,没有理由再选用其他编码。
  • <title></title> — 该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。
  • <body></body> — 该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。

HTML 实体

HTML 实体(Entity)是一段以连字号(&)开头、以分号(;)结尾的文本。实体常常用于显示保留字符(这些字符会被解析为 HTML 代码)和不可见的字符(如「不换行空格」)。你也可以用实体来代替其他难以用标准键盘键入的字符。

HTML5 新元素

语义化标签

  • <header>
  • <nav>
  • <article>
  • <section>
  • <aside>
  • <footer>

多媒体标签

  • <video>
  • <audio>

表单类型

  • email
  • url
  • date
  • time
  • month
  • week
  • number
  • tel
  • search
  • color

canvas

<canvas id="myCanvas">
An alternative text describing what your canvas displays.
</canvas>

<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Emmet

Emmet 是一个快速生成 HTML 标签的工具,可以在许多编辑器中集成。以下是 Emmet 的语法。

  • *控制数量
  • >子节点
  • +兄弟结点
  • ^父节点
  • .控制类名
  • #控制 id
  • []其它属性,例如 a[href="#"]
  • ()分组
  • $自动编号
    • 一个$代表一位数
    • @可以指定起始编号
  • {}控制标签内部文字