1.1什么是HTML
1)HTML(HyperTextMarkupLanguage)是一种超文本标记语言,是一种纯文本类型的语言,是用来设计网页的标记语言。
2)用该语言编写的文件,以.html或者.htm为后缀。
3)由浏览器解释运行。
4)HTML是一个扩展性很强的语言,可以嵌套用脚本语言编写的程序段,如:VBScript、javaScript。嵌入Javascript代码可以实现动态效果,同时也可以使用CSS定义样式。
1.2Web浏览器
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)不需要结束标记,不能包含内容,可以设置属性。
例如: helloWord<br>helloword
helloword<br/>helloword
注意事项:
<br/>为当前标准,<br>为早期版本。
对于单标记,建议写法<br/>,而不是<br>。
2.4元素和属性
1)元素:每一对尖括号包围的部分,如<body></body>包围的部分就叫做body元素。
2)属性:用来修饰元素,每个属性都有值,属性放在开始标记中。
2.5注释
为代码添加适当的注释是一种良好的编码习惯。
1)注释只在编辑文档情况下可见,在浏览器展示页面时并不会显示。
2)添加注释的语法:
<!--注释的文本内容-->
注意事项:
“<!--”和“-->”之间的任何内容都不会显示在浏览器中。
注释不可以嵌套在其他注释中。
2.6HTML文档的标准结构
1)结构:
版本信息
<html><!--HTML页面-->
<head></head><!--文件头-->
<body></body><!--文件主体部分-->
</html>
2)例如:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body></body>
</html>
2.7版本信息
1)在文档的起始用DOCTYPE声明指定的版本和风格,让浏览器清楚文档的版本、类型和风格。版本信息分为三种:严格型、传统型(过渡型)、框架型。
2)StrictDTD:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3)TransitionalDTD:(常用)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4)FramesetDTD:(不常用了)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//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>
<metahttp-equiv="refresh"content="3"/><!--3秒刷新一次-->
<!--文档内容为:文本格式的html,字符集采用utf-8-->
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
</head>
2.12案例:创建一个标准结构的HTML文档,并创建头元素。
<!--版本信息-->
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--html元素,表示整个文档-->
<html>
<!--头元素:描述整个文档的相关信息-->
<head>
<title>第一个网页</title>
<metahttp-equiv="refresh"content="3"/><!--3秒刷新-->
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
</head>
<!--文档主体:显示-->
<body>
</body>
</html>
注意事项:若不想出现乱码,则存储时的物理编码和查看时的编码需要一致;若出现乱码,则一看保存时的编码,二指定查看编码。
新闻热点
疑难解答