关于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文档与盒子模型的更多相关文章

  1. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  2. DOM 是什么，Document Object Model，文档对像模型

    #为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...

  3. [译]ES读写文档时shard-replication模型

    官网页面:https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-replication.html 本文是对官网页面的 ...

  4. MongoDB开发深入之一：文档数据关系模型详解（一对多，多对多）

    文档关联模型通常有3种方式: 嵌入式(一对一.一对多) 后期手动统一ID处理(一对多.多对多) References引用(一对一.一对多) 文档树模型通常有3种方式: 父引用(Parent Refer ...

  5. Django文档阅读之模型

    模型 模型是您的数据唯一而且准确的信息来源.它包含您正在储存的数据的重要字段和行为.一般来说,每一个模型都映射一个数据库表. 基础: 每个模型都是一个 Python 的类,这些类继承 django.d ...

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

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

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

    Mongoose学习参考文档 前言:本学习参考文档仅供参考,如有问题,师请雅正 一.快速通道 1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model ...

  8. AJAX文档

    AJAX 文档 AJAX开发简略.................................................................................... ...

  9. 文档主题生成模型（LDA）

    一．问题描述 1.1文本建模相关 统计文本建模的目的其实很简单:就是估算一组参数,这组参数使得整个语料库出现的概率最大.这是很简单的极大似然的思想了,就是认为观测到的样本的概率是最大的.建模的目标也是 ...

随机推荐

  1. python学习笔记3.2_数据导出

    一.data.to_csv:数据导出 1.to_csv:将数据导出为逗号分隔的文件 2.输出为其他分隔符的文件 写入到控制台,并打印:sys.stdout na_rep:对空值进行标注 二.serie ...

  2. ucore 地址映射的几个阶段

    第零阶段: 启动之后的实模式阶段 vir = lin = pa 第一阶段 : 启动 bootloader 的段式分页 这里段基址是0 ,所以地址空间维持不变 vir addr = lin addr = ...

  3. Ajax请求Session超时解决

    web前端js代码: $.ajaxSetup({ contentType : "application/x-www-form-urlencoded;charset=utf-8", ...

  4. Foundation框架系列-NSString

    NSString OC字符串与C语言字符串转换 NSString *str = @"Hello world ! !"; // OC字符串 --> C语言字符串 char *c ...

  5. linux-c getopt()参数处理函数

    转自:https://www.cnblogs.com/qingergege/p/5914218.html 最近在弄Linux C编程,本科的时候没好好学啊,希望学弟学妹们引以为鉴. 好了,虽然啰嗦了点 ...

  6. __name__ = '__main__'

    有句话经典的概括了这段代码的意义: “Make a script both importable and executable” 意思就是说让你写的脚本模块既可以导入到别的模块中用,另外该模块自己也可 ...

  7. JZOJ[5971]【北大2019冬令营模拟12.1】 party(1s,256MB)

    题目 题目大意 给你一棵树,在树上的某一些节点上面有人,要用最小的步数和,使得这些人靠在一起.所谓靠在一起,即是任意两个人之间的路径上没有空的节点(也就是连在一起). N≤200N \leq 200N ...

  8. vue中使用vue-echarts

    一.先说在原生里怎么使用echarts <!-- 1.引入echarts文件 --> <script src="echarts.min.js"></s ...

  9. x86架构：x86架构

    ylbtech-x86架构:x86架构 X86架构(The X86 architecture)是微处理器执行的计算机语言指令集,指一个intel通用计算机系列的标准编号缩写,也标识一套通用的计算机指令 ...

  10. 在Bat批处理中调用Powershell脚本

    ##如何在BAT中调用powershell,把下面代码另存为bat格式pushd %~dp0powershell.exe -command ^  "& {set-executionp ...