Html那些事《一》
1.1什么是HTML
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
1）HTML（HyperText Markup Language）是一种超文本标记语言，是一种纯文本类型的语言，是用来设计网页的标记语言。
2）用该语言编写的文件，以.html或者.htm为后缀。
3）由浏览器解释运行。
4）HTML是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段，如：VBScript、JavaScript。嵌入JavaScript代码可以实现动态效果，同时也可以使用CSS定义样式。
1.2 Web浏览器
1）主要功能：
①代理访问者提交请求。
②作为HTML解释器和内嵌脚本程序执行器。
③用图形化的方式显示HTML文档。
2）主要Web浏览器产品
IE、Firefox、Chrome、Opera、Safari
2.HTML基础语法
2.1标记语法
1）HTML用于描述功能的符号称为“标记”，比如<p>、<h1>等。
2）标记在使用时必须使用尖括号括起来，有些标记还必须成对出现。
2.2封闭类型标记：双标记
1）语法：
<标记>内容</标记>
<标记 属性1="值" 属性2="值">内容</标记>
2）属性的声明必须位于开始标记里。
3）一个标记的属性可能不止一个，多个属性之间用空格隔开。
注意事项：
封闭类型的标记必须成对出现。
如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误。
2.3非封闭类型标记：单标记或者空标记
1）语法：
<标记>或者<标记 />
2）不需要结束标记，不能包含内容，可以设置属性。
例如： hello word <br>hello word
hello word <br />hello word
注意事项：
<br />为当前标准，<br>为早期版本。
对于单标记，建议写法 <br />，而不是 <br>。
2.4元素和属性
1）元素：每一对尖括号包围的部分，如<body></body>包围的部分就叫做body元素。
2）属性：用来修饰元素，每个属性都有值，属性放在开始标记中。
2.5注释
为代码添加适当的注释是一种良好的编码习惯。
1）注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示。
2）添加注释的语法：
<!--注释的文本内容-->
注意事项：
“<!--”和“-->”之间的任何内容都不会显示在浏览器中。
注释不可以嵌套在其他注释中。
2.6 HTML文档的标准结构
1）结构：
版本信息
<html><!--HTML页面-->
<head></head><!--文件头-->
<body></body><!--文件主体部分-->
</html>
2）例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body></body>
</html>
2.7版本信息
1）在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本、类型和风格。版本信息分为三种：严格型、传统型（过渡型）、框架型。
2）Strict DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3）Transitional DTD：（常用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4）Frameset DTD：（不常用了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
注意事项：传统型不需要命名空间，严格型需要命名空间。
2.8 <head>元素
1）<head> 元素用于为页面定义全局信息
①所有其他头元素的容器。 ②紧跟在起始标签<html>之后。
2）定义整个文档相关的信息，常包含如下子元素：
①<title>：标题。
②<meta>：元数据元素，定义页面的编码格式或者刷新频率等。
③<script>：JavaScript脚本（或引入Ajax、jQuery脚本等）。
④<style>：定义内部样式表。
⑤<link>：为当前页面引入其他资源（如外部样式表）。
2.9 <body> 元素
文档的主体，包含所有要显示的内容。
2.10头元素：<title>
标题元素<title></titile>用于为文档定义标题。
1）标题元素的内容出现在浏览器顶部。
2）没有属性。
3）必须出现在<head>元素中。
4）一个文档只能有一个标题元素。
例如：<head>
<title>第一个网页</title>
</head>
2.11头元素：<meta>
元数据元素<meta />用于定义网页的基本信息。
1）为空标记。
2）常用属性有：content、http-equiv
例如：<head>
<title>第一个网页</title>
<meta http-equiv="refresh" content="3" /><!--3秒刷新一次-->
<!--文档内容为：文本格式的html，字符集采用utf-8-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
2.12案例：创建一个标准结构的 HTML 文档，并创建头元素。
<!--版本信息-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--html元素，表示整个文档-->
<html>
<!--头元素：描述整个文档的相关信息-->
<head>
<title>第一个网页</title>
<meta http-equiv="refresh" content="3" /><!--3秒刷新-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<!--文档主体：显示-->
<body>
</body>
</html>
注意事项：若不想出现乱码，则存储时的物理编码和查看时的编码需要一致；若出现乱码，则一看保存时的编码，二指定查看编码。