HTML规范 - 整体结构

转载 2015年07月06日 21:17:15

HTML基础设施
  • 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。
  • 必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码<meta charset="utf-8"/>。
  • 根据页面内容和需求填写适当的keywords和description。
  • 页面title是极为重要的不可缺少的一项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>NEC:更好的CSS方案</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>
  
</body>
</html>
结构顺序和视觉顺序基本保持一致
  • 按照从上至下、从左到右的视觉顺序书写HTML结构。
  • 有时候为了便于搜索引擎抓取,我们也会将重要内容在HTML结构顺序上提前。
  • 用div代替table布局,可以使HTML更具灵活性,也方便利用CSS控制。
  • table不建议用于布局,但表现具有明显表格形式的数据,table还是首选。
结构、表现、行为三者分离,避免内联
  • 使用link将css文件引入,并置于head中。
  • 使用script将js文件引入,并置于body底部。
保持良好的简洁的树形结构
  • 每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾的空格。
  • 使用4个空格代替1个Tab(大多数编辑器中可设置)。
  • 对于内容较为简单的表格,建议将tr写成单行。
  • 你也可以在大的模块之间用空行隔开,使模块更清晰。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<!-- 侧栏内容区 -->
<div class="m-side">
    <div class="side">
        <div class="sidein">
            <!-- 热门标签 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
                ...
            </div>
  
            <!-- 最热TOP5 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">最热TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div>
                ...
            </div>
        </div>
    </div>
</div>
<!-- /侧栏内容区 -->
</body>
另外,请做到以下几点
  • 结构上如果可以并列书写,就不要嵌套。

    如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>

  • 如果结构已经可以满足视觉和语义的要求,那么就不要有额外的冗余的结构。

    比如<div><h2></h2></div>已经能满足要求,那么就不要再写成<div><div><h2></h2></div></div>

  • 一个标签上引用的className不要过多,越少越好。

    比如不要出现这种情况:<div class="class1 class2 class3 class4"></div>

  • 对于一个语义化的内部标签,应尽量避免使用className。

    比如在这样一个列表中,li标签中的itm应去除:<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

HTML开发——项目心得(关于web布局以及代码冗余问题)

刚刚完成了一个练习小项目,这个项目包含了几个网页,但这几个网页的框架基本上是相同的。那么在做这样的项目时,首先要做的除了对单个网页的框架进行设计以外,我们还应该注意代码的冗余问题,就是要使你设计的那个...
  • tshshow
  • tshshow
  • 2017年10月21日 17:31
  • 554

Web标准结构语言—HTML

l  标准结构语言 结构语言是按照页面的内容主要包括那些部分从而提炼出来的语言。我们所见的一个页面通常包括标题、文字、段落、图片、链接、表格及表单等组成部件。 Web标准结构语言包括:HTML、X...
  • u010955843
  • u010955843
  • 2014年11月23日 16:31
  • 952

HTML网页和结构

HTML网页是利用HTML语言编写的文档,是一种半结构化的数据表现方式,结构特征可以归纳为三种:树状结构,层次结构和框结构。网页构成目前市面上大多数的网页为动态网页,在这样的动态网页中,JavaScr...
  • Steward2011
  • Steward2011
  • 2016年05月04日 23:11
  • 2976

掌握HTML整体结构

HTML文件有固定的结构: ... ... 代码讲解: 称为根标签,所有的网页标签都在中。 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有、、 、、 等标签。文...
  • qq_33606536
  • qq_33606536
  • 2017年10月27日 18:25
  • 29

阿里巴巴2011前端工程师笔试卷

1、请列举7种以上常用的HTML标签,说明其语义。 1)div标签,是一个块元素,就像一个大盒子,可以放各式各样的东西; 2)p标签,也是一个块元素,它通常用来放一段话的….; 3)h1,h2,...
  • taishan1063778204
  • taishan1063778204
  • 2016年08月24日 20:11
  • 437

HTML5 标准规范

HTML5是HTML最新的修订版本。 HTML5相对于之前的标准添加了许多新的语法特征,其中包括、和元素,同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容。其它新的...
  • aaa333qwe
  • aaa333qwe
  • 2017年08月21日 09:35
  • 582

C常见问题之对结构变量的整体赋值问题

对一个结构可以在初始化时进行整体赋值,例如: struct node{ int i; int j; }; struct node a = {1, 2};   但是对一个已经定义好的结构变量,不可以采用...
  • hws912
  • hws912
  • 2013年04月05日 15:35
  • 1044

HTML规范文档

html中的一些规范
  • kydkong
  • kydkong
  • 2016年08月01日 15:48
  • 1099

【HTML】文档整体结构【UNDONE】

文档整体结构
  • robinjwong
  • robinjwong
  • 2014年10月21日 01:27
  • 525

结构与连接

一个系统一般由很多对象组成,对象之间并不是互相孤立的,而是存在着各种各样的关系。包括:部分/整体、一般/特殊、实例连接、消息连接。 (1)部分/整体 对象之间存在的部分与整体的结构关系。如CPU是...
  • a284447396
  • a284447396
  • 2013年03月07日 15:17
  • 489
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML规范 - 整体结构
举报原因:
原因补充:

(最多只允许输入30个字)