發佈於 2018-06-14
从这篇开始,通过几篇的介绍,了解常用的 HTML 标记,熟悉每个标签在浏览器中的默认样式。
普通元素
自闭合元素
注意: 在 HTML5 中,自闭合元素 opening tag 末尾的 ‘/‘ 可以省略。
HTML 文档中包含了各种各样的元素,同时元素还可以用属性(attribute)进行配置,一个元素可以配置一个或者多个属性,如上图。
布尔属性只需要将属性名称添加到元素 opening tag 中即可:
<input disabled> |
---|
也可以为布尔属性指定一个空字符串(“”)或属性名称字符串作为其值也有同样的效果:
<input disabled=""> <input disabled="disabled"> |
---|
用户也可以自定义属性(或者扩展属性),自定义属性必须以 data- 开头。
<input data-creator="1ess" data-purpose="collection"> |
---|
HTML 通常会忽略这些自定义属性,在属性名称之前添加前缀 data- 是为了避免与 HTML 的未来版本中可能增加的属性名冲突。自定义属性通常与 CSS 和 JavaScript 结合使用。
局部属性通常和每个元素对应,每个局部属性都可以用来控制元素都有都有行为的某个方面。在介绍每个元素时再做介绍。
全局属性用来配置所有元素的共有的行为,可以用在任何一个元素身上。
class 属性用来将元素归类,方便找出文档中某一类元素或为某一类元素应用 CSS 样式。
<a class="class1 class2" href="https://github.com/1ess">Github</a> |
---|
一个元素可以被归入多个类别,类名间用空格分隔。
<p contenteditable>content is editable</p> |
---|
该属性用来规定元素中文字的方向,有效值有: ltr(用于从左到右的文字)和 rtl(用于从右到左的文字)。
<p dir="rtl">This is right-to-left</p> <p dir="ltr">This is left-to-right</p> |
---|
是 HTML5 支持拖放操作的方式之一,用来表示元素是否可被拖放。
也是 HTML5 支持拖放操作的方式之一,与 draggable 属性搭配使用。
表示相关元素当前毋需关注,浏览器通常是隐藏相关元素。
<p hidden>hidden</p> |
---|
用来给元素分配一个唯一的标识符,标识符通常被用于应用样式或者 JavaScript 逻辑到该元素。
<a id="github" href="https://github.com/1ess">Github</a> |
---|
说明元素使用的语言。
title 属性提供了元素的额外信息,浏览器通常用它显示工具提示。悬停时会显示。
用于直接在元素身上定义 CSS 样式。
!doctype 声明必须是 HTML 文档的第一行,位于 <html> 标记之前。在所有 HTML 文档中规定 DOCTYPE 是非常重要的,这样浏览器就能了解预期的文档类型,告诉浏览器要通过哪一种规范解析文档。 注意: !doctype 声明不属于 HTML 标签,它是一条指令,告诉浏览器编写页面所用的标记的版本。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,并且 HTML5 中的 !doctype 是不区分大小写的。 所以在现代 HTML5 规范规定: 仅需要在最前面声明 !doctype html 即可。
现代的浏览器需要不同模式,既要呈现久远的 HTML 界面,不至于界面结构混乱不堪,也需要呈现 W3C 标准的界面:
HTML 的注释:
<!– comments --> |
---|
head 内部元素通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载 JavaScript 文件(出于性能考虑,多数时候放在页面底部 body 标签结束前加载 JavaScript 或使用 async)。除了 title,head 里的内容对页面访问者来说都是不可见的。
head 元素中必须包含一个 title 元素,该元素内容会出现在浏览器的标签页中或者出现在浏览器窗口的顶部,作为网页标题,和浏览器相关。
<title>Your page title</title> |
---|
meta 元素用来定义文档的各种元数据,meta 元素可以有多种用途,但每个 meta 元素只能用于一种用途,如果需要使用不止一种,就需要在 head 元素中添加多个 meta 元素。
<meta name="author" content="1ess"> |
---|
<meta name="description" content="页面描述信息"> <meta name="keywords" content="页面关键字"> |
---|
<meta name="robots" content="noindex"> |
---|
该属性有三个大多数搜索引擎都认识的值:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
---|
<meta charset="utf-8"> |
---|
<meta http-equiv="refresh" content="5;https://github.com/1ess"> |
---|
http-equiv 属性的可选值如下:
<meta http-equiv="content-type" content="text/html charset=UTF-8"> |
---|
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> |
---|
定义页面上相对 URL 的基准 URL。
<base target="_blank" href="http://www.example.com/"> |
---|
<style type="text/css"> a{ background-color: grey; color: white; padding: 0.5em; } </style> |
---|
用来在 HTML 文档和外部资源(如 CSS 样式表)之间建立联系。
<link rel="stylesheet" type="text/css" href="styles.css"> |
---|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> |
---|
如果网站标志文件位于/favicon.ico(即 Web 服务器的根目录),那就不必用到 link 元素,大多数浏览器在载入页面时都会自动请求这个文件,就算没有 link 元素也是如此。
<link rel="prefetch" href="/index.html"> |
---|
用于在页面中加入脚本,可以直接在文档中定义脚本和引用外部文件中的脚本。
<script> document.write("This is from the script"); </script> |
---|
使用 async 和 defer 属性可以对脚本的执行方式加以控制。
<script defer src="index.js"></script> |
---|
<script async src="index.js"></script> |
---|
noscript 元素用来向禁用了 JavaScript 或浏览器不支持 JavaScript 的用户显示一些内容。
<noscript> <h1>JavaScript is required!</h1> <p>You cannot use this page without JavaScript</p> </noscript> |
---|
注意: 许多人通过查看源代码,然后复制粘贴来学习 HTML、CSS 及 JavaScript。然而他们并没有考虑到原本的网站,是否符合规范。如:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
---|
相当于 meta 元素的
<meta charset="utf-8"> |
---|
我们一定要注意编写符合当前规范的 HTML。之后的所有讲解都是基于规范,当出现不在建议使用的元素时会提示。