HTML
一、HTML介绍
TIP
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
HTML 标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
注释: 浏览器会自动地在标题的前后添加空行。
HTML 段落
HTML 段落是通过标签 <p> 来定义的。
注意:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:
HTML 链接
HTML 链接是通过标签 <a> 来定义的。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签 中使用了href属性来描述链接的地址。
HTML 图像
HTML 图像是通过标签 <img> 来定义的.
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
二、HTML规范
使用正确的文档类型
文档类型声明位于HTML文档的第一行
<!DOCTYPE html>
使用小写元素名
HTML5 元素名可以使用大写和小写字母。
推荐使用小写字母:
- 混合了大小写的风格是非常糟糕的。
- 开发人员通常使用小写 (类似 XHTML)。
- 小写风格看起来更加清爽。
- 小写字母容易编写。
关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如
元素),但我们建议每个元素都要添加关闭标签。
关闭空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要关闭:
<!-- 可以这么写 -->;
<meta charset="utf-8">
<!-- 也可以这么写 -->
<meta charset="utf-8" />
使用小写属性名
HTML5 属性名允许使用大写和小写字母。
我们推荐使用小写字母属性名:
- 同时使用大小写是非常不好的习惯。
- 开发人员通常使用小写 (类似 XHTML)。
- 小写风格看起来更加清爽。
- 小写字母容易编写。
属性值
HTML5 属性值可以不用引号。
属性值我们推荐使用引号:
- 如果属性值含有空格需要使用引号。
- 混合风格不推荐的,建议统一风格。
- 属性值使用引号易于阅读。
图片属性
图片通常使用 alt 属性。 在图片不能显示时,它能替代图片显示。
空格和等号
等号前后可以使用空格。(但我们推荐少用空格)
避免一行代码过长
使用 HTML 编辑器,左右滚动代码是不方便的。
每行代码尽量少于 80 个字符。
空行和缩进
不要无缘无故添加空行。
为每个逻辑功能块添加空行,这样更易于阅读。
缩进使用两个空格,不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
省略 <html> 和 <body>?
在标准 HTML5 中, <html> 和 <body> 标签是可以省略的。
不推荐省略 <html> 和 <body> 标签。
<html> 元素是文档的根元素,用于描述页面的语言
声明语言是为了方便屏幕阅读器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。
省略 <body> 在旧版浏览器 (IE9)会发生错误。
省略 <head>?
在标准 HTML5 中, <head>标签是可以省略的。
默认情况下,浏览器会将 <body> 之前的内容添加到一个默认的 <body> 元素上。
现在省略 head 标签还不推荐使用。
元数据
HTML5 中 <title> 元素是必须的,标题名描述了页面的主题:
<title>教程</title>
标题和语言可以让搜索引擎很快了解你页面的主题
HTML 注释
注释可以写在 <!-- 和 --> 中:
<!-- 这是注释 -->
长注释第一个字符缩进两个空格,更易于阅读。
样式表
样式表使用简洁的语法格式 ( type 属性不是必须的):
<link rel="stylesheet" href="styles.css">
- 将左花括号与选择器放在同一行。
- 左花括号与选择器间添加一个空格。
- 使用两个空格来缩进。
- 冒号与属性值之间添加一个空格。
- 逗号和符号之后使用一个空格。
- 每个属性与值结尾都要使用分号。
- 只有属性值包含空格时才使用引号。
- 右花括号放在新的一行。
- 每行最多 80 个字符。
在 HTML 中载入 JavaScript
使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):
<script src="myscript.js"></script>
使用小写文件名
大多 Web 服务器 (Apache, Unix) 对大小写敏感: london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感: london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格,我们建议统一使用小写的文件名。
文件扩展名
- HTML 文件后缀可以是 .html (或 .htm)。
- CSS 文件后缀是 .css 。
- JavaScript 文件后缀是 .js 。
.htm 和 .html 的区别
.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。
区别在于:
.htm 应用在早期 DOS 系统,系统现在或者只能有三个字符。
在 Unix 系统中后缀没有特别限制,一般用 .html。