为了账号安全,请及时绑定邮箱和手机立即绑定

html标签基础知识学习

标签:
Html/CSS

我今天突然意识到,不同的标签表现有所不一样,他们这样也是有意义的,当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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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>

整个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啦。。。
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消