前言

须弥般若有无空，阴阳道化真虚同；洗尽前恩本非相，还吾面目下九重。

咳咳，其实老夫对佛教文化有点点研究啦，说以我们这里来了一点很有哲理的东西，因为我这里准备干一件很戳的事情，我准备来看看我们的html标签没有样式时候的表现，为什么要做这件事呢？

当然不是无聊了，我今天突然意识到，不同的标签表现有所不一样，他们这样也是有意义的，当CSS不存在时候，他们的表现你知道吗？？？

所以我们一起来研究研究吧，看看能不能有什么收获。

常用元素

到底有多少元素，我这里也说不清，因为我记忆力有点差啦，我甚至现在都记不得substr怎么用！！！所以我们上资料吧。

PS：我这里列出来的就是我们后面会研究的，若是没有列出来就暂时不关注啦。

HTML

该元素告诉浏览器其自身是一个HTML文档，该标记一旦出现就等于告诉了浏览器出现网页啦。

body

元素定义的文档主体，也是我们的可见区域，但是他与我们的HTML有说不清道不明的关系

比如我们的document到底是谁呢？我们jquery操作时候有什么异同，我们后面需要探讨。

以上是我们外部必定会用到的，除此之外，我们来看看我们的块级元素吧

常用块级元素

P

paragraph，段落，用得非常多的元素

div

division/section(HTML5新增元素)，该标签用于将文档分割为不同部分

br

换行，br是空标签，他常常被无用做p，我们后面需要介绍他与p的区别，并且说说他与闭合浮动之间的关系。

h1——h6 一级标题到六级标题

heading，我们需要了解在各个浏览器中各个h的margin、padding、font-size

ul ol li

无序、有序列表

dl dt dd

定义列表相当于词典里面词的解释就可以用这种列表

hr

表示主体结束，而不完全是水平线

常用行内元素

a

anchor，链接（锚点），我们可以研究下a标签在各个阶段的样式啦

span

常用于包裹我们的行内元素

em strong

内容强调，em（emphasize）是做强调的，strong是用作重点强调的

b

bold 粗体，没强调的意思

i

italic 单纯的斜体

u

underline，单纯的加下划线

select option

创建可单选或多选的菜单

img

图片标签

input text

文本

input radio checkbox

单选框、多选框

input submit button

按钮

table

用于展示表格类数据

为什么要语义化标签

有时候我就在想我为什么要研究这个，为什么要语义化标签，一个比较俗气的现实就是：

你了解语义化标签才能找到好工作！

但是作为一个有一点理想的前端，我们是应该了解这些东西的

因为我们的html才是基本结构，css相当于一种装饰，装饰在的时候我们的页面光鲜，那么装饰去除的时候，我们也不能太丑！！！

这就是一个美女化妆与穿衣服的原理了，传了惊艳四座，不穿至少需要惊艳到个人吧。

而且对于SEO，对于移动设备，对于盲人阅读器都会更好，所以我们有必要研究下我们标签的本来面目。

中国人最怕认真，今天让我们来认真一次。

HTML与Body

html标签与body是一对好基友，以致于我有时候都分不清他们谁是谁，先上一段代码吧

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         html { background-color: Orange; }

         body { background-color: Gray; border: 1px solid black; margin: 100px; }

     </style>

 </head>

 <body>

     我是文字

 </body>

我不知道这张图能不能颠覆你一点点思维，我们这个代码与图至少证明：

① HTML是可以设置背景色的

② body是实际内容点，可以设置padding与margin

③ HTML也可以设置margin与padding

这里我们做一点点变化，将html的背景去掉：

这种情况下body就不只是内容区域的颜色了，而是浏览器的。

好了，我们稍微研究了下html与body的背景色问题，我们现在来看看我们的body在默认情况下的表现。

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         body { background-color: Gray; border: 1px solid black;}

     </style>

 </head>

 <body>

     我是文字

 </body>

 </html>

firefox

IE9

IE8，各位注意，这个和我们前面的已经有变化了，你们发现边框多了一点东西了吗？？？

IE7，好家伙滚动条也出来了，这玩笑开大了。

混杂模式下，边框全局化啦。

经过我们的简单研究，其它莫名其妙的东西我们先不管，我们就说IE8下多出来那个边框家伙（灰色的）是什么？？？

PS：这个是我们设置margin： 0都消除不了的哦

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         html { background-color: Orange;  }

         body { background-color: Gray; }

     </style>

 </head>

 <body>

     我是文字

 </body>

 </html>

我们看在这种情况下的截图：

好吧，我就只好认为这是浏览器本身的问题了吧，先暂时不管他，因为我们要研究下其他问题。

body默认情况下的margin、padding、font-size

不知道这个各位研究过没，我反正没有研究过，所以来试试吧

经过研究我得到以下结论（有不对请一定指出）：

① body的padding为0

② body字体为16px（firefox）

③ 关于margin的值较麻烦一点

IE8/9 firefox google margin默认值为8px

在IE7下margin-left为10px，margintop为15px

所以我们需要设置margin: 0，作为css reset

PS：若是您想知道我是怎么测试的话可以看这段代码

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         html { background-color: Orange; }

         body { background-color: Gray; }

         div { background: none repeat scroll 0 0 white; left: 8px; margin: 0; position: absolute; top: 8px; }

     </style>

 </head>

 <script src="../../jquery-1.7.1.js" type="text/javascript"></script>

 <script type="text/javascript">

     $(document).ready(function () {

         var dom = $('body');

         var s = '';

     });

 </script>

 <body>

     我是文字

     <div>

         我是文字</div>

 </body>

 </html>

测试研究

我设置了一个绝对定位的div，然后慢慢定位其top与left，或者设置font-size一一对比

p与br

p是用于标记段落的，我们有一段话就应该使用p，而br单纯用于换行使用，不可与p同日而语
br默认margin、padding、width等全部为0
 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         body { margin: 0; }

         p { border: 1px solid black; }

         div { background: white; left: 100px; margin: 0; position: absolute; top: 100px; }

     </style>

 </head>

 <body>

     刀狂剑痴叶小钗

     <p>

         刀狂剑痴叶小钗

     </p>

     <div>

         刀狂剑痴叶小钗</div>

 </body>

 </html>

先来简单的看看我们p标签的表现吧：

我这里基本可以得出一个结论，就是这个家伙只有margin值啦，于是经过测试我们知道了：

① p标签padding为0

② margin-left与margin-right为0，上下外边距为16px

PS：我这里可耻的发现了我找到了一个更好的东西佐证我的想法：就是本身提供的盒子模型啦。。。。

p的最小高度

p应该是默认设置了min-height为2px啦

关于IE7下的z-index

我们的z-index在IE7以下容易出错，但是为什么呢？也许这里可以给你答案：

IE8+的浏览器z-index是auto，不会参与计算的，但是ie7以下就变成0啦。。。。

h1——h6

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         div { background: white; left: 100px; margin: 0; position: absolute; top: 100px; }

     </style>

 </head>

 <body>

 <h1>刀狂剑痴叶小钗</h1>

 <h2>刀狂剑痴叶小钗</h2>

 <h3>刀狂剑痴叶小钗</h3>

 <h4>刀狂剑痴叶小钗</h4>

 <h5>刀狂剑痴叶小钗</h5>

 <h6>刀狂剑痴叶小钗</h6>

     <div>

         刀狂剑痴叶小钗</div>

 </body>

 </html>

整个h标签标签在各个浏览器表现很不一致，这里我们一定要给其设置默认值，否则肯定会悲剧

h1

firefox：

google：

IE9：

IE8：

IE7（IE7更加悲剧，上面的margin就没显示出来）：

我们看到了就单单一个h1，的表现，从ie7到ie9，再到firefox到chrome都不一样，所以这个东西我们就不研究了，直接CSS RESET吧。。。

继续昨天的话题

一性圆通一切性，一法遍含一切法，一月普现一切水，一切水月一切摄。

我们接着昨天的写，昨天我们写到了h1——h6，然后单单一个h1各个浏览器就有所不同，然后把6个一起加起来的话......

6 * 5（IE6/IE7/IE89/firefox/chrome）就可能会出现30钟变化，所以研究他不吃好，我们碰到h后就直接CSS重置吧。

所以我们继续我们的学习吧

ul ol li

在firefox下，我们看看我们ul的表现：

 1 <html xmlns="http://www.w3.org/1999/xhtml">

 2 <head>

 3     <title></title>

 4     <style type="text/css">

 5         ul { border: 1px solid black; }

 6         body { margin: 0; }

 7         div { background: white; left: 100px; margin: 0; position: absolute; top: 100px; }

 8     </style>

 9 </head>

10 <body>

11     <ul>

12         <li>刀狂剑痴叶小钗</li>

13         <li>刀狂剑痴叶小钗

14             <ul>

15                 <li>刀狂剑痴叶小钗</li>

16                 <li>刀狂剑痴叶小钗</li>

17             </ul>

18         </li>

19         <li>刀狂剑痴叶小钗</li>

20         <li>刀狂剑痴叶小钗</li>

21     </ul>

22 </body>

23 </html>

① 最外层外边距（margin）上下外边距16px
② padding-left为40px
③ 内层ul上下外边距就没有了，但是padding-left仍然是40px
④ li有list-type，其显示前面有一点点原点或者方块
⑤ li高为17px（这里font-size为16px，所以上下外边距的显示是0.5，在其他浏览器不太一致）

PS：
我认为li的line-height为17px

我们现在来看看chrome的表现：

① 最外层margin上下边距为16px

② padding-left 为40px

兼容点：
① li line-height为18px
② 这里的ul完全是内部撑开的

现在我们来看看IE9：

大家看到了，我们的不同点就是li所撑开的高度了，IE9的line-height应该是18.84

IE8：

IE8的表现与IE9一致，但是li的line-height有所不同，说实话我都不知道他的20px哪里来的。。。

IE7

这个有两个地方不同：

① margin的外边距为0

② li的line-height为19px

总结

ol与ul表现一致，便不单独说了：

① 最外层外边距（margin）上下外边距16px

② padding-left为40px

③ 内层ul上下外边距就没有了，但是padding-left仍然是40px

④ li有list-type，其显示前面有一点点原点或者方块

差异：
① IE7下margin上下边距为0
② IE7下li 的line-height为19px
IE8下为20px
IE9为18.84
firefox为17
chrome为18

a标签/span

本来前面还想说hr标签的，想下先算了，因为平时很少用到，于是我们来看看我们的a吧(span与之表现完全一致)

他的尺寸意义不大，我们来看看其简单特性

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

a伪类的顺序一般为：a:link、a:visited、a:hover、a:active：

a:link {text-decoration: none;color: #FFFFFF}

a:visited { text-decoration: none;color: #FFFFFF}

a:hover { text-decoration:none;color: #000000}

a:active {text-decoration:none;color: #000000}

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

记住我们的顺序是lvha，直译为lv（名牌包包），ha（好hao）

select option

我们看到select默认高有所不同：

firefox：19px

chrome： 18px

IE9:17.33

IE8:20px

IE7：所占高度就变22px了

PS：其它浏览器边框表现一致，IE7边框颜色有所变化并且其边框为2px

select内部的字体也不同：

firefox默认为16px

但是chrome看不出是多少，接近14px

IE下是14px

select所占的整个尺寸差距不大，所占高度加上边框所占尺寸都相差不大，但是这个还是必须CSS RESET处理

img标签

经测试，各个浏览器其表现差不多，我们先不管他了。

input相关

我们简单看看这些东西

关于文本框，他的border为2px，各个border的颜色不太一样。

padding 左右为1px 上下为0

对于checkbox，尺寸为13px，margin-left为4px，其它为3px

radio又有所不同，margin-left为5px，尺寸也是13px

按钮上又会有兼容性问题：

firefox外边距为0，边框为2px，内边距为6px，而chrome有所不同，其外边距全部是2px

而且firefox内边距上下为0，chrome为1

对于IE，莫名其妙的东西就更多了：
① 除去边框不说，checkbox与radio的外边距都为0
② padding的尺寸也各不相同，所以需要CSS RESET啦。。。

table

后面补上。。。。。。

结语

想不到这个博客的篇幅这么长，还比较耗费时间，今天拉肚子，坚持不住了，后面点补齐吧。。。。

若是文中有任何不足，请您指出。。

【初探HTML本相】道之真谛不过自然，html标签脱俗还真的更多相关文章

  1. 前端深入之css篇丨初探【transform】，手把手带你实现1024程序员节动画

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  2. JVM初探- 内存分配、GC原理与垃圾收集器

    JVM初探- 内存分配.GC原理与垃圾收集器 标签 : JVM JVM内存的分配与回收大致可分为如下4个步骤: 何时分配 -> 怎样分配 -> 何时回收 -> 怎样回收. 除了在概念 ...

  3. 非传统题【A002】

    [A002]非传统题[难度A]————————————————————————————————————————————————————————————————————————————————————— ...

  4. poj 1286 Necklace of Beads

    这是做的第一道群论题,自然要很水又很裸.注意用long long. 就是用到了两个定理 burnside :不等价方案数=每个置换的不动置换方案数的和 / 置换个数 polya: 一个置换的不动置换方 ...

  5. COJ 0801 非传统题（一）

    非传统题(一) 难度级别:A: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 大家好!我是COJ第一道非传统题,是不是感觉非常的excite ...

  6. 最近公共祖先-三（RMQ-ST）

    描述 上上回说到,小Hi和小Ho使用了Tarjan算法来优化了他们的"最近公共祖先"网站,但是很快这样一个离线算法就出现了问题:如果只有一个人提出了询问,那么小Hi和小Ho很难决定 ...

  7. Leetcode——二叉树常考算法整理

    二叉树常考算法整理 希望通过写下来自己学习历程的方式帮助自己加深对知识的理解,也帮助其他人更好地学习,少走弯路.也欢迎大家来给我的Github的Leetcode算法项目点star呀~~ 二叉树常考算法 ...

  8. 【JAVA今法修真】 第四章 redis特性 击穿雪崩！

    感谢这段时间大家的支持,关注我的微信号:南橘ryc ,回复云小霄,就可以获取到最新的福利靓照一张,还等什么,赶快来加入我们吧~ "明日便是决赛了,咋只会用法器没练过法术呢.". 选 ...

  9. 【干货分享】前端面试知识点锦集01（HTML篇）——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

随机推荐

  1. codeforces B. Pasha and String（贪心）

    题意:给定一个长度为len的字符序列,然后是n个整数,对于每一个整数ai, 将字符序列区间为[ai,len-ai+1]进行反转.求出经过n次反转之后的序列! /* 思路1:将区间为偶数次的直接去掉!对 ...

  2. java中对象的初始化过程

    class Parent{ int num = 8;// ->3 Parent(){ //super(); // ->2 //显示初始化 // ->3 //构造代码段 // -> ...

  3. linux安装nginx

    nginx启动.重启.关闭 安装: http://www.cnblogs.com/skynet/p/4146083.html 一.启动 cd usr/local/nginx/sbin ./nginx ...

  4. php代码习惯（一）

    1: 利用sprintf来绑定变量,分离绑定的参数与语句 $query = sprintf("SELECT * FROM users WHERE user='%s' AND password ...

  5. Express调用mssql驱动公共类dbHelper

    直接上代码: /** * Created by chaozhou on 2015/9/18. */var mssql = require('mssql');var user = "sa&qu ...

  6. ASP.NET将Session保存到数据库中

    因为ASP.NET中Session的存取机制与ASP相同,都是保存在进行中, 一旦进程崩溃,所有Session信息将会丢失,所以我采取了将Session信息保存到SQL Server中,尽管还有其它的 ...

  7. 邻接表有向图(三)之 Java详解

    前面分别介绍了邻接表有向图的C和C++实现,本文通过Java实现邻接表有向图. 目录 1. 邻接表有向图的介绍 2. 邻接表有向图的代码说明 3. 邻接表有向图的完整源码 转载请注明出处:http:/ ...

  8. tomcat server容器解读

    1. server的实例类为:org.apache.catalina.core.StandardServer为顶层容器. 2.二级容器GlobalNamingResources,设置认证用户信息. & ...

  9. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  10. [New Portal]Windows Azure Virtual Machine (22) 使用Azure PowerShell，设置Virtual Machine Endpoint

    <Windows Azure Platform 系列文章目录> 我们可以通过Windows Azure Management Portal,打开Virtual Machine的Endpoi ...