首页 > 网站 > WEB开发 > 正文

Html那些事《一》

2024-04-27 14:27:14
字体:
来源:转载
供稿:网友
Html那些事《一》

1.1什么是HTML

  • HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)
  • HTML 不是一种编程语言,而是一种标记语言(markup language)
  • 标记语言是一套标记标签(markup tag)
  • HTML 使用标记标签来描述网页

1)HTML(HyperTextMarkupLanguage)是一种超文本标记语言,是一种纯文本类型的语言,是用来设计网页的标记语言。

2)用该语言编写的文件,以.html或者.htm为后缀。

3)由浏览器解释运行。

4)HTML是一个扩展性很强的语言,可以嵌套用脚本语言编写的程序段,如:VBScript、javaScript。嵌入Javascript代码可以实现动态效果,同时也可以使用CSS定义样式。

1.2Web浏览器

1)主要功能:

①代理访问者提交请求。

②作为HTML解释器和内嵌脚本程序执行器。

③用图形化的方式显示HTML文档。

2)主要Web浏览器产品

IE、FirefoxChromeOpera、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>

注意事项:若不想出现乱码,则存储时的物理编码和查看时的编码需要一致;若出现乱码,则一看保存时的编码,二指定查看编码。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表