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文档与盒子模型,布布扣,bubuko.com

时间: 2024-12-15 11:28:25

HTML文档与盒子模型的相关文章

css文档之盒模型阅读笔记

前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如它的颜色.背景.边框方面--及这些盒子的位置. 在CSS中,这些矩形盒子用 标准盒模型 来描述.这个模型描述了一个元素所占用的空间.每一个盒子有四条边界:外边距边界margin edge, 边框边界border edge, 内边距边界padding edge 与 内

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

搜索引擎的检索模型-查询与文档的相关度计算

1. 检索模型概述 搜索结果排序时搜索引擎最核心的部分,很大程度度上决定了搜索引擎的质量好坏及用户满意度.实际搜索结果排序的因子有很多,但最主要的两个因素是用户查询和网页内容的相关度,以及网页链接情况.这里我们主要总结网页内容和用户查询相关的内容. 判断网页内容是否与用户査询相关,这依赖于搜索引擎所来用的检索模型.检索模型是搜索引擎的理论基础,为量化相关性提供了一种数学模型,是对查询词和文档之间进行相似度计算的框架和方法.其本质就是相关度建模.如图所示,检索模型所在搜索引擎系统架构位置: 当然检

Mongoose学习参考文档——基础篇

Mongoose学习参考文档 前言:本学习参考文档仅供参考,如有问题,师请雅正 一.快速通道 1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 Entity : 由Model创建的实体,他的操作也会影响数据库 注意: 1.本学习文档采用严格命名方式来区别不同对象,例如: var PersonSchema; //Person的文本属性 var PersonModel; //

XML编程总结(七)——使用XPath对象查询xml文档

(七)使用XPath对象查询xml文档 XPath,一种为查询 XML 文档而设计的查询语言.XPath 并不是 Java 语言,事实上 XPath 不是一种完整的编程语言.有很多东西用 XPath 表达不出来,甚至有些查询也无法表达.幸运的是,可以把 XPath 结合到 Java 程序中,这样就能发挥两者的优势了:Java 做 Java 所擅长的,XPath 做 XPath 所擅长的.Java 程序执行 XPath 查询所需要的应用程序编程接口(API)还因形形色色的 XPath 引擎而各不相

文档主题生成模型(LDA)

主题模型(topic modeling)是一种常见的机器学习应用,主要用于对文本进行分类.传统的文本分类器,例如贝叶斯.KNN和SVM分类器,只能将测试对象分到某一个类别中,假设我给出三个分类:"算法"."网络"和"编译"让其判断,这些分类器往往将对象归到某一类中. 但是如果一个外行完全给不出备选类别,有没有分类器能够自动给出类别判断呢? 有,这样的分类器就是主题模型. 潜在狄立克雷分配(Latent Dirichlet Allocation,L

内联元素的盒子模型与文档流定位padding属性

        内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100px ; height:100px}   表现效果相同,由此可见内联元素不可以设置高度和宽度 2.内联元素可以设置水平方向的内边距padding-left或padding-right span{padding-left:20px ; padding-right:200px} 3.内联元素可以设置垂直

盒模型、文档流

盒模型 一.盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin. width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距” 二.认识padding 背景色会填充到padding中去,padding区域有背景颜色,background-color

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g