请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 190|回复: 9

Web开发学习心得2——HTML的结构

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-25 22:57:14 | 显示全部楼层 |阅读模式

现在我们来学习HTML的结构(我们只讨论严格型的,也包括XHTML)。

首先给出一份严格的HTML的一些常见的规则:

1.网页总以一个DOCTYPE开始,紧接着,<html>元素必须出现在网页的开头和结尾。

2.只有<head>、<body>元素可以直接包含于<html>中,其他任何元素都必须包含于<head>或<body>中。

3.必须给<head>元素一个<title>元素。

4.只能在<body>中直接放置块元素(如<h1>,<p>,<div>等)。所有内联元素和文本都必须在块元素中才能运行。

5.只有文本和其他内联元素可以嵌入内联元素中。块元素在任何情况下都不允许包含在内联元素中。

6.块元素禁止包含于<p>元素中。

这份规则请一定要记住,因为这是良构的HTML最起码的条件。

该规则的第1、2、3点都非常好理解,这里不再赘述,至于第4、5、6点,则必须首先理解什么是块元素,什么是内联元素。

HTML中,<body>内的元素,基本上分为两大类,一类是块元素,一类是内联元素。

所谓块元素,是指独立显示,独占整行,好像前后都有换行的那种元素,如<div>,<p>,<h1>,<ul>,<ol>,<li>等都是块元素。

所谓内联元素,是指在网页中随着文字流出现在行内的那种元素,如<span>,<a>,<em>,<img>等都是内联元素。

不知道大家是否理解了什么是块元素、什么是内联元素,如果还不理解的话,请写几个HTML文件看看它们的表现,或者Google一下吧,相信不难理解。

现在,div+css的布局非常流行,这里的div,就是指块元素<div>。实际上,<div>一点都不神秘,它是division的简称,表示的就是“区域”这样的结构,与普通的<h1>、<p>等没有本质的区别,区别就在于,它表示“区域”,因此,我们可以把一个网页用<div>分隔成好几个区域。比如下面这个文档

<body>
<div id="header">
</div>
<div id="content">
<div id="leftbar">
</div>
<div id="details">
</div>
</div>
<div id="footer">
</div>

我们就把整个body分解为3个区域,分别是“header”、“content”、“footer”。然后,我们还可以在这3个区域中加入嵌套的<div>,就像“content”继续分为“leftbar”与“details”两部分一样,这样就可以把区域逐级往下分,如此,一份结构清晰良好、可读性强的文档就诞生了。当然,该文档不包含任何用于展示的元素,它表示的纯粹是结构。这份文档再搭配上不同的CSS,就会有不同的外观,就好比人穿不同的衣服就有不同的形象一样。div+css,实际上,就是这么简单。


回复

使用道具 举报

2

主题

941

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2016-3-14 14:25:18 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

0

主题

903

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-23 16:17:26 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

0

主题

944

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2016-10-1 09:58:04 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

0

主题

858

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-11-16 19:50:08 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

8

主题

1005

帖子

88

积分

注册会员

Rank: 2

积分
88
发表于 2016-12-19 20:22:06 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

1

主题

1042

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2017-8-28 12:14:29 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

0

主题

864

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2017-12-3 17:49:29 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

0

主题

957

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2018-5-4 17:33:22 | 显示全部楼层
大神啊!豁然开朗。。。。。。
回复 支持 反对

使用道具 举报

2

主题

920

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2018-10-29 10:10:11 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-21 01:39 , Processed in 0.204393 second(s), 31 queries .

快速回复 返回顶部 返回列表