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而解决浏览器之间的差异问题。
HTML文档与盒子模型的更多相关文章
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
- DOM 是什么，Document Object Model，文档对像模型
#为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...
- [译]ES读写文档时shard-replication模型
官网页面:https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-replication.html 本文是对官网页面的 ...
- MongoDB开发深入之一：文档数据关系模型详解（一对多，多对多）
文档关联模型通常有3种方式: 嵌入式(一对一.一对多) 后期手动统一ID处理(一对多.多对多) References引用(一对一.一对多) 文档树模型通常有3种方式: 父引用(Parent Refer ...
- Django文档阅读之模型
模型 模型是您的数据唯一而且准确的信息来源.它包含您正在储存的数据的重要字段和行为.一般来说,每一个模型都映射一个数据库表. 基础: 每个模型都是一个 Python 的类,这些类继承 django.d ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- Mongoose学习参考文档——基础篇
Mongoose学习参考文档 前言:本学习参考文档仅供参考,如有问题,师请雅正 一.快速通道 1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model ...
- AJAX文档
AJAX 文档 AJAX开发简略.................................................................................... ...
- 文档主题生成模型（LDA）
一．问题描述 1.1文本建模相关 统计文本建模的目的其实很简单:就是估算一组参数,这组参数使得整个语料库出现的概率最大.这是很简单的极大似然的思想了,就是认为观测到的样本的概率是最大的.建模的目标也是 ...
随机推荐
- 12_PCA之探究用户对物品类别的喜好细分降维
案例: 探究:用户对物品类别的喜好细分降维. 背景:把用户分成几个类别,分类的依据是用户购买了哪些物品. 先看商品products.csv数据,有product_id,product_name,ais ...
- 编写函数处理user_list，新方法
写函数,完成以下功能: # 例如有: user_list=[ {"name": "alex","hobby":"抽烟"} ...
- C++和C#之间的数据类型对应关系
最近接触WINAPI比较多,一直要楂数据类型间的对应关系,所姒就转载一下~ # Windows Data Type .NET Data Type # BOOL, BOOLEAN Boolean or ...
- Java程序员面试题收集（1）
一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪 ...
- 解决git push至远程仓库失败的问题
产生问题的原因: 远程仓库存在本地不存在的文件, 一个常见的例子是创建repository时勾选了README.md, 但此时本地还没有这个文件, 就会导致本地文件无法同步到远程仓库的问题. 解决方法 ...
- Odoo中使用的部分表名及用途
res_users 用户res_groups 用户组(角色)res_lang 语言res_partner 供应商/客户/联系人res_font 字体res_company 公司res_bank 银行r ...
- [HEOI2016/TJOI2016]排序 线段树+二分
[HEOI2016/TJOI2016]排序 内存限制:256 MiB 时间限制:6000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而 ...
- jeecms 前台拦截器的研究与改造
jeecms 前台拦截器的研究与改造 2013年12月24日 15:23:35 xinfei0803 阅读数 3511 jeecms出发点是面向大众的,具有前台开发性,也就是说,即时是未登录(游客 ...
- DVWA 之high级别sql注入
Sqlmap 高级注入,抓包,然后保存数据到1.txt 1.判断注入点 sqlmap -r /root/1.txt -p id --second-order "ht ...
- ECMAScript 5 严格模式
1. 变量必须使用var声明,杜绝不小心将本地变量声明成一个全局变量 在常规模式下,如果我们声明一个变量时省略了var关键字,解析引擎会自动将其声明为全局变量,但在严格模式下,会直接抛出异常,不会为我 ...