网页前端后台技巧(CSS+HTML)【HTML+CSS】傲视苍穹H5_VIP专题

第一节.基本的html文档

2019-03-22  本文已影响0人  ef81c5299c9a

1.一个html文档由4个 基本部分组成:

(1).一个文档类型声明,表明这个文档是html文档

(2).html标签对,用于表明html文档的开始和结束

(3).head标签对,其内容构成html的开头部分,包含一些辅助元素

(4).body标签对,其内容构成html的主体部分

2.html文档的基本结构

2.1.文档类型的说明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">

所有的html文档必须要以文档类型说明(DTD)开头,它说明了文档类型和所遵守的标准规则。大多数现代浏览器在实

际显示网页会根据声明的DTD不同而有区别。

(1).html 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org//TR html4/strict.dtd">

这类文档类型很严格,其定义中不包含那些已经不推荐使用的元素和属性,也不包含出现在框架集中的元素和属性。

(2).html 4.01 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org//TR html4/loose.dtd">

这类文档比较广泛,包含不推荐使用的元素和属性。

(3).html 4.01 Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org//TR html4/frameset.dtd">

这类最广泛,不仅包含Transitional DTD所包含的元素和属性,还包含框架集中的元素和属性。

2.2.<html>标签对和属性

1.dir属性

该标签有两个基本属性--dir属性和lang属性,其中dir属性决定了浏览器该用什么方向来显示包含在元素中的文本。其

中dir元素属性用于<html>时,决定整个文本在整个文档将以什么方向显示;但用在其它标签的时候,只决定那个标签内

容的文本的显示方向。dir又有itr和rtl两个属性值,分别意味着文本从左到右显示和从右到左显示。见(显示.html)

2.lang属性

lang属性来指明文档内容或某个元素内容使用的语言。如果包含在<html>标签中,那么lang属性可以用来指定整个文档使用的语言。

如果在其它标签中,则此属性将指出那个标签中内容所使用的语言

2.3<head>标签对和属性

1.<head>标签对

包含有关html文档的信息,可以包含一些辅助性标签,<title>,<base>,<link>,<meta>,<style>,<script>等

注意:除了标题栏会显示<title>元素外,浏览器不会向用户显示head元素内容的任何内容

2.<head>属性

head元素中有profile属性,该属性提供了于当前文档相关的配置文件的URL。

2.4<body>标签对和属性

1.<body>标签对

包含许多其它标签,比如:<p>,<h1>,<br>等众多标签

2.<body>属性

body有许多属性,可以用于设置文档的背景,文本颜色,链接颜色,边距等

3.HTML标签,元素,属性

介绍:一个html文档是由元素构成。元素由开始标签,结束标签,属性,元素的内容4部分构成。

3.1.什么是标签

元素是由标签组成,用来标记内容块,也用来标记元素内容的意义。标签使用尖括号包围

3.1.1

1.成对出现的标签

2.单独出现的标签

如:<br>换行标签

没有相应的结束标签还有:<area>,<base>,<basefont>,<br>,<col>,<frame>,<hr>,<img>,<input>,<param>,<link>

3.标签的嵌套

标签可以放在另一个标签所影响的片段中,以实现某一段文档的多重标签效果

3.2.元素

网页内容由元素构成

例如:<html></html>标签之间都是元素内容

3.3.属性定义

与元素相关的特性成为属性,可以为属性赋值(每一个属性总是对应一个属性值,因此也称为“属性、值”对,并且属性名

不区分大小写)。“属性/值”对出现在元素开始标签的最后一个“>”之前,通过空格分开。

3.4.属性值的定义

注意:属性值是不区分大小写的

1.不定义属性值

html规定可以没有值。下面定义是合法的。

<dl compact>

2.属性值的空白

html规定属性只可以空白,但这种情况要用引号,因为属性之间使用空白分隔的。

<img src="c://Document and Setting/test.jpg" width=1024 height=768 />

不使用引号会出错

<img src=c://Document and Setting/test.jpg width=1024 height=768 />

这样说属性值必须是连续的字符串,如果将空白替换为“%20”,那么也可以不使用引号。

<img src=c://Document%20and%20Setting/test.jpg width=1024 height=768 />

而属性值开头以及结尾的空白处,用户浏览器会将它们删除

3.属性使用单引号以及双引号

单引号可以作为属性值,但单引号作为属性值的时候不能用用单引号去包括属性值。但单引号作为属性值的时候,也可以

用数字字符引用(&#39;)来代替单引号。

当为双引号时,必须用数字字符引用(&#39;)或字符实体(&quot;)来代替双引号

4.标准属性

html标签拥有属性。但有些属性通用于每个标签,我们称作标准属性。

4.1.核心属性

这类属性包含关于元素的一般性信息。可以几乎在任何元素的开始标签内。

4.1.1.class

表示特定元素所属的一个类或一组。同属一类的元素使用相同的css样式规则。类名几乎可以是任何文字。但只能由字母,

数字,连字符(-),下划线(_)组成。可以多个元素构成一类。此外,一个元素不止一个类,此时属性值中的多个类名用空格分隔。

4.1.2.id

为元素指定一个唯一性的标识符。id可以是几乎任何简短文字。但它在文档中是唯一的,不能多个元素使用一个标识符。id属性不能

包含除了连字符(-)和下划线以外(_)的任何标点符号和特殊符号。其中,第一个必须是字母,而不能是数字或其他字符。

4.1.3.style

为元素指定css属性,则成为内联样式定义。但应该避免使用,因为它将内容和表现混合在一起。

4.1.4.title

为元素指定一个文本标题。许多图形化浏览器将title属性的值显示在“工具提示”(即但用户的鼠标指针停留在所呈现的元素上方时出

现的那个小小的浮动窗口)中。

4.2.语言属性

他们几乎包含在任何元素内容中

4.2.1.dir属性

4.2.2.lang属性

4.3.键盘属性

当某些元素--尤其是链接和表单控件--处于预激活状态中时,称为拥有焦点,因为浏览器的“注意力”放在集中该元素中,准备激活它。

为一些元素设置焦点元素,以增强网页浏览者使用键盘在网页导航时的可用性。

4.3.1.accesskey属性

为元素分配一个键盘快捷键,以便在使用键盘导航时时能更方便,更快捷地访问它。该属性的值时应于访问键的值。

4.3.2.tabindex属性

指定元素在使用制表键遍历链接和表单控件时所形成的访问顺序的位置

5.html字符实体

一些字符在html中拥有的特殊含义,例如小于号(<)用于定义html标签的开始,不可以直接在网页中输出。如果我们希望浏览器能正确

地显示这些含有这些特殊含义的字符。我们必须在html源码中插入字符实体。

实体名称对于大小写敏感。

6.空白和空白字符

在html文档中包含空白,每个空白对应一个空白字符。

在html文档中,空白分两类:

(1).有意义的空白

(2).无意义的空白:浏览器一般不给予保留

6.1.断行符

断行符表示一行的结束,它是空白字符。虽然在html源文档中看不到这个字符,但每一个换行处都有一个换行符的。

sgml规定,紧跟开始标签的之后断行符应该被忽略,在一个结束标签之前断行符应该被忽略。

<p>

注意开始标签前面和结束标签后面

</p>

相当于<p>注意开始标签前面和结束标签后面</p>

6.2.空白字符

在html文档中,将一下字符归为空白字符:

(1)ascii空白(&#x0020;)

(2)ascii制表符(&#x0009;)

(3)ascii换页(&#x000C;)

(4)零宽空白(&#x200B;)

注意:不同文字语言在空白区域的处理是不一样的

上一篇下一篇

猜你喜欢

热点阅读