HTML 初识

什么是HTML

HTML 是用来描述网页的一种语言，其全称是Hyper Text Markup Language，翻译成中文就是超文本标记语言，HTML 由一系列的标签组成。我们的互联网就是由无数的HTML 页面互相链接而成。

HTML 的发展

从 Web 诞生至今，已经发展出多个HTML 版本，如下所示：
版本 年份 说明
HTML 1991年 第一次由蒂姆·伯纳斯·李公开提出。
HTML+ / HTML1.0 1993年 6月作为互联网工程工作小组（IETF）工作草案发布。
HTML 2.0 1995年 11月作为RFC 1866发布。
HTML 3.2 1997年 1月作为W3C推荐标准。
HTML 4.01 1999年 12月作为W3C推荐标准。
HTML 5 2012年 HTML5是公认的下一代Web语言。

 

 

 

 

 

 

W3C 是什么

W3C 全称 World Wide Web Consortium，中文翻译为万维网联盟，它是Web技术领域最具权威和影响力的国际中立性技术标准机构。HTML 规范都是由这个组织发布。

浏览器的作用

HTML 页面由HTML 标签构成，也就是一系列的代码。光有HTML 页面是不行的，还需要有一个东西来展示HTML 页面，这就用到了浏览器。浏览器的作用是解释和渲染HTML 页面。
 

常见的浏览器

常用的五大浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。

 

 它们各自的市场份额可参见 https://tongji.baidu.com/research/site?source=index，目前拥有最大市场份额的浏览器是谷歌浏览器，程序员使用的最多的也是谷歌浏览器。

使用什么编辑器

我们可以使用任何文本编辑工具来编写HTML 代码，只要最后将文档后缀改为.html 即可。
比如我们可以使用记事本，Notepad++，Sublime 等。
不过前两种不是专门用来写HTML 代码的，Sublime 是用来专门编写代码的，所以，一般我们可以使用Sublime 来编写HTML 文档。
 
Sublime 的界面如下：

编写第一个HTML 页面

下面我们来编写第一个HTML 页面，如下所示：
 1 <!DOCTYPE html>
 2 <html>
 3     <!-- head 标签 -->
 4     <head>
 5         <title>我的第一个HTML 页面</title>
 6     </head>
 7    
 8     <!-- body 标签 -->
 9     <body>
10     这里是我的内容
11     </body>
12 </html>
View Code

将上面代码保存为一个HTML 文档后，用浏览器打开，效果如下所示：

其中：
① <!DOCTYPE html>  不是 HTML 标签，而是一种声明，告诉浏览器，本HTML 文档使用的是哪个版本的HTML。下面列出常用的 DOCTYPE 声明：
 1  <!-- HTML5 一般我们使用这个即可 -->
 2 <!DOCTYPE html>
 3 
 4 <!-- HTML 4.01 Strict -->
 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 6 
 7 <!-- HTML 4.01 Transitional -->
 8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 9 
10 <!-- HTML 4.01 Frameset -->
11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
12 
13 <!-- XHTML 1.0 Strict -->
14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
15 
16 <!-- XHTML 1.0 Transitional -->
17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
18 
19 <!-- XHTML 1.0 Frameset -->
20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
21 
22 <!-- XHTML 1.1 -->
23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
View Code
② <html></html> 标签，所有的HTML 标签和文档内容都应包含在<html> 标签中。
③ <head></head> 标签，用于定义文档的头部，它是所有头部标签的容器。<head> 标签中可以包含如下标签：
1 <base /> 标签
2 <link /> 标签
3 <meta /> 标签
4 <script></script> 标签
5 <style></stype> 标签
6 <title></title> 标签
View Code
④ <title></title> 标签，用于定义文档的标题，浏览器会将<title> 标签的内容显示在浏览器窗口的标题栏上。
⑤ <body></body> 标签，用于定义HTML 文档的主体。
⑥ <!-- --> 中间的内容被称为注释，是给程序员看的，浏览器在执行代码时，会忽略这部分内容。

HTML 标签的格式

HTML 标签均由两个尖括号包裹，由开始标签和结束标签组成，开始标签常被称为开放标签，结束标签常称为闭合标签。
既有开始标签又有结束标签的标签，叫做双标签。格式如下：
<标签名></标签名>
比如<title> 则是开始标签，</title> 则是结束标签，结束标签中有一个斜杠。 
只有一个标签的标签叫做单标签，这些标签在开始标签中关闭，格式如下：
<标签名 />
比如<br /> 标签，<link />标签等，斜杠直接放在开始标签中。

HTML 标签的关系

HTML 标签有两种关系，分别是嵌套关系和并列关系。
① 嵌套关系，例如 <title> 标签嵌套在 <head> 标签中：
<head>  
    <title></title>  
</head>

② 并列关系，例如 <head> 标签与 <body> 标签并列：

<head></head>
<body></body>

下面的书写方式是错误的：

<!-- 错误的书写方式 -->
<head><title></head></title>

HTML 标签的属性

属性是一个标签的附加信息，属性总是写在开始标签中，并且以键值对的形式出现，比如 name="value"。语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

例子如下：

<!-- 一个宽度为500，颜色为红色的横线 -->
<hr width="500" color="red" />
一个标签可以拥有多个属性，属性之间没有先后顺序之分。任何标签的属性都有默认值，省略该属性则取默认值。
常见的标签属性如下：
属性 含义
class 定义标签的类名
id 定义元素的唯一 id
stye 定义元素的行内样式
 
 
 
 
 
 
 
处了以上属性外，还有其它很多属性，这里不再一一列举，后面涉及到的时候再一一说明。

HTML 标签的书写规范

HTML 标签对大小写不敏感，例如<P> 等同于 <p>。但是我们推荐使用小写。

（本节完。）

posted @ 2020-01-11 16:12  卢敖寒  阅读(124)  评论(0)    收藏  举报