HTML文档与盒子模型
关于HTML
百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。
为什么叫用于“描述”网页文档的“标记”语言呢?
简单地说,它不像Java,C++等程式语言,而是通过标记(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习。
HTML的构成HTML文件的结构通常由以下几个部分构成:
文档类型声明(doctype)
网页头部信息(head)
网页主体内容(body)
一个最简单的网页文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
复制代码文档类型
如果你了解过HTML,你可能会发现很多网页的头部会有这么一段又臭又长的东西:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这到底是什么呢?这就是文档类型的声明了。XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional以及 Frameset,为了兼容性与开发方便,我们一般使用Transitional。
但如果你比较细心,你会发现上面最简单的网页文件代码只使用了这么一小段代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这段代码是HTML5文档类型的声明方式,而且是向后兼容的。自从有了它,妈妈再也不用担心文档类型的声明(哈哈,小小的开个玩笑)~
元素
块元素(block)
div , p , h1~h6 , ul , li , dt , dd , dl , form, section , article , nav , aside...
特点:在文档流中默认占据整行的位置。
内联元素(inline)
span , em , strong , label , a , img , input , button , select , var , del ...
特点: 在文档流中默认一行可以展示多个内联元素。
嵌套规则块元素可以嵌套所有内联元素,内联元素不能嵌套块元素。
错误的写法:
<span><div>内容</div></span>
盒子模型(Box Model)
无论是块元素,还是内联元素,在HTML中都是一个“盒子”,这个盒子包含了以下属性:
外边距(Margin)
边框(Border)
内边距(Padding)
内容(Content)
可以看出,在W3C标准模式下的CSS盒子模型中,盒子的内容是不包含边框跟内边距的,但在IE的Quirks(怪异)模式下,盒子的内容包含了边框与内边距,因此相同的代码在不同的浏览器中查看,看到的布局可能的是完全不同的,这也是造成网页浏览器差异的一个重要原因。
一种很简单却实用的解决方式是,CSS中的padding及border属性不要同width及height属性出现在同一个盒子上,而是将其分解在父子两个元素上,便可以避免实用CSS Hack而解决浏览器之间的差异问题。
最新文章
- C# 工程中引用出现感叹号
- 第46套题【STL】【贪心】【递推】【BFS 图】
- 双机倒换(NewStartHA,SKYbility,hacmp,hp unix双机)
- 开发中/listfile.jsp(11,31) quote symbol expected 这个错误
- hunnu 小明的烦恼——找字符串
- 在 IIS MIME 类型中添加 md 扩展名
- poj2993 poj2669
- WindowsAPI一日一练
- Android中进行流量统计
- Solr之NamedList 简单介绍与实例解析
- 这是一篇关于:以时间表的形式来介绍Java如何演变至今,以及Java版本的一些特性的分享
- 酷炫的loading
- .net core mysql ef
- Hadoop生态集群YARN详解
- document.wrtie()用法
- idea maven +spring mvc
- freeswitch报错
- python实现线性排序算法-计数排序
- jetty 之 form too large | form too many keys 异常
- 【转】Python之文件与目录操作(os、zipfile、tarfile、shutil)
热门文章
- Asp.net Core Jenkins Docker 实现一键化部署
- mariadb ROW格式复制下从库结构变更引发1677错误
- Chapter 6 排序
- [转]用DateTime.ToString(string format)输出不同格式的日期
- 【bzoj2120】数颜色 带修莫队
- hibernate一对多关系 在一方查询会获得重复数据,重复数量就是多端数据数量用@Fetch(FetchMode.SUBSELECT)解决
- 【DM8168学习笔记6】学习思路整理
- 利用GitHub来进行团队协作开发项目
- JasperReport生命周期3
- 2018-8-14-Resharper-如何把类里的类移动到其他文件