您的位置：首页 > Web前端 > HTML

【初探HTML本相】道之真谛不过自然，html标签脱俗还真（上）

2013-07-05 21:44 218 查看

前言

须弥般若有无空，阴阳道化真虚同；洗尽前恩本非相，还吾面目下九重。
咳咳，其实老夫对佛教文化有点点研究啦，说以我们这里来了一点很有哲理的东西，因为我这里准备干一件很戳的事情，我准备来看看我们的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是一对好基友，以致于我有时候都分不清他们谁是谁，先上一段代码吧

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         html { background-color: Orange; }
 6         body { background-color: Gray; border: 1px solid black; margin: 100px; }
 7     </style>
 8 </head>
 9 <body>
10     我是文字
11 </body>

我不知道这张图能不能颠覆你一点点思维，我们这个代码与图至少证明：
① HTML是可以设置背景色的
② body是实际内容点，可以设置padding与margin
③ HTML也可以设置margin与padding
这里我们做一点点变化，将html的背景去掉：

这种情况下body就不只是内容区域的颜色了，而是浏览器的。
好了，我们稍微研究了下html与body的背景色问题，我们现在来看看我们的body在默认情况下的表现。

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         body { background-color: Gray; border: 1px solid black;}
 6     </style>
 7 </head>
 8 <body>
 9     我是文字
10 </body>
11 </html>

firefox

IE9

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

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

混杂模式下，边框全局化啦。
经过我们的简单研究，其它莫名其妙的东西我们先不管，我们就说IE8下多出来那个边框家伙（灰色的）是什么？？？
PS：这个是我们设置margin： 0都消除不了的哦

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         html { background-color: Orange;  }
 6         body { background-color: Gray; }
 7     </style>
 8 </head>
 9 <body>
10     我是文字
11 </body>
12 </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：若是您想知道我是怎么测试的话可以看这段代码

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         html { background-color: Orange; }
 6         body { background-color: Gray; }
 7         div { background: none repeat scroll 0 0 white; left: 8px; margin: 0; position: absolute; top: 8px; }
 8     </style>
 9 </head>
10 <script src="../../jquery-1.7.1.js" type="text/javascript"></script>
11 <script type="text/javascript">
12     $(document).ready(function () {
13         var dom = $('body');
14         
15         var s = '';
16 
17     });
18 
19 </script>
20 <body>
21     我是文字
22     <div>
23         我是文字</div>
24 </body>
25 </html>

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

p与br

p是用于标记段落的，我们有一段话就应该使用p，而br单纯用于换行使用，不可与p同日而语
br默认margin、padding、width等全部为0

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         body { margin: 0; }
 6         p { border: 1px solid black; }
 7         div { background: white; left: 100px; margin: 0; position: absolute; top: 100px; }
 8     </style>
 9 </head>
10 <body>
11     刀狂剑痴叶小钗
12     <p>
13         刀狂剑痴叶小钗
14     </p>
15     <div>
16         刀狂剑痴叶小钗</div>
17 </body>
18 </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

1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         div { background: white; left: 100px; margin: 0; position: absolute; top: 100px; }
 6     </style>
 7 </head>
 8 <body>
 9 
10 <h1>刀狂剑痴叶小钗</h1>
11 <h2>刀狂剑痴叶小钗</h2>
12 <h3>刀狂剑痴叶小钗</h3>
13 <h4>刀狂剑痴叶小钗</h4>
14 <h5>刀狂剑痴叶小钗</h5>
15 <h6>刀狂剑痴叶小钗</h6>
16     <div>
17         刀狂剑痴叶小钗</div>
18 </body>
19 </html>