关于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. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  2. drools规则管理Guvnor的安装

    今天找了一圈没看到tomcat下如何安装Guvnor,自己试了安装一把把流程记录下来. 1.JBOSS官方下载Guvnor(或者网上找找很多war包) 2.下载tomcat,安装(保证8080 ind ...

  3. 洛谷P3745 [六省联考2017]期末考试

    传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...

  4. Android SDK上手指南:下一步学习方向

    Android SDK上手指南:下一步学习方向 2014-02-28 11:01 核子可乐 译 51CTO 字号:T | T 到目前为止,我们已经介绍过的知识足以帮助大家从非常理想的起点开始进行And ...

  5. 软件-SecureCRT:SecureCRT

    ylbtech-软件-SecureCRT:SecureCRT SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件 ...

  6. Windows 10专业版激活(附激活码)

    安全密钥:BT6TH-FN8VP-6WGCK-6BM9R-MWRDB(使用有效,在物理机,虚拟机都激活了一次) 六一八期间自己买了配件第一次组了台式机,系统是在123pe下的原版win10,装好机器之 ...

  7. Spring BatchSqlUpdate.updateByNamedParam例子

    关键在于定义参数和sql语句,代码如下: int dstColCount=dstColNamesList.size(); String insSql="insert into "+ ...

  8. Python基础---三大推导式

    推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据结构构建另一个新的数据结构的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...

  9. bzoj2547: [Ctsc2002]玩具兵

    划了一天水,其实我还是有点愧疚的. 传送门 其实是水题,然而我真是太蠢了... 首先不考虑天兵,其他兵要到一个点去一定是通过它-另一种兵-它……这样多次交换的,并且交换对象是无所谓的,和它换的兵最终会 ...

  10. SSM-6nginx Linux下的安装

    1.下载nginx: 官方网站: http://nginx.org/download/ 2. 要求的安装环境 yum install gcc-c++ yum -y install pcre-devel ...