第一节.基本的html文档

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;)

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,460评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 687评论 0 2
  • 关于HTML 超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网...
    YQY_苑阅读 673评论 0 1
  • 1.meta标签 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述...
    姚小帅阅读 333评论 0 1