HTML 初始

浏览器的作用
HTML 页面由HTML 标签构成，也就是一系列的代码。光有HTML 页面是不行的，还需要有一个东西来展示HTML 页面，这就用到了浏览器。浏览器的作用是解释和渲染HTML 页面。
在这里插入图片描述
常见的浏览器
常用的五大浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。

在这里插入图片描述
它们各自的市场份额可参见百度统计，目前拥有最大市场份额的浏览器是谷歌浏览器，程序员使用的最多的也是谷歌浏览器。

使用什么编辑器

我们可以使用任何文本编辑工具来编写HTML 代码，只要最后将文档后缀改为.html 即可。
比如我们可以使用记事本，Notepad++，Sublime 等。

编写第一个HTML 页面
下面我们来编写第一个HTML 页面，如下所示：

<!DOCTYPE html>
<html>
    <!-- head 标签 -->
    <head>
        <title>我的第一个HTML 页面</title>
    </head>
   
    <!-- body 标签 -->
	<body>
        这里是我的内容
	</body>
</html>

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

在这里插入图片描述
其中：

① 不是 HTML 标签，而是一种声明，告诉浏览器，本HTML 文档使用的是哪个版本的HTML。下面列出常用的 DOCTYPE 声明：


<!-- HTML5 一般我们使用这个即可 -->
<!DOCTYPE html>
 
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
<!-- XHTML 1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

② <html></html> 标签，所有的HTML 标签和文档内容都应包含在<html> 标签中。

③ <head></head> 标签，用于定义文档的头部，它是所有头部标签的容器。<head> 标签中可以包含如下标签：

<base /> 标签
<link /> 标签
<meta /> 标签
<script></script> 标签
<style></stype> 标签
<title></title> 标签

④ <title></title> 标签，用于定义文档的标题，浏览器会将<title> 标签的内容显示在浏览器窗口的标题栏上。

⑤ <body></body> 标签，用于定义HTML 文档的主体。

⑥  中间的内容被称为注释，是给程序员看的，浏览器在执行代码时，会忽略这部分内容。

HTML 标签的格式
HTML 标签均由两个尖括号包裹，由开始标签和结束标签组成，开始标签常被称为开放标签，结束标签常称为闭合标签。

既有开始标签又有结束标签的标签，叫做双标签。格式如下：

<标签名></标签名>

比如则是开始标签，则是结束标签，结束标签中有一个斜杠。

只有一个标签的标签叫做单标签，这些标签在开始标签中关闭，格式如下：

<标签名 />

比如<br /> 标签，<link />标签等，斜杠直接放在开始标签中。

HTML 标签的关系
HTML 标签有两种关系，分别是嵌套关系和并列关系。

① 嵌套关系，例如 <title> 标签嵌套在 <head> 标签中：

<head>  
    <title></title>  
</head>

② 并列关系，例如标签与标签并列：

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

HTML 标签的属性
属性是一个标签的附加信息，属性总是写在开始标签中，并且以键值对的形式出现，比如 name=“value”。语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

例子如下：

<!-- 一个宽度为500，颜色为红色的横线 -->
<hr width="500" color="red" />

一个标签可以拥有多个属性，属性之间没有先后顺序之分。任何标签的属性都有默认值，省略该属性则取默认值。

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

目录

猜你喜欢