HTML中的相关标签

html-css014

HTML中的相关标签,第1张

一谈起html中的标签大家第一反应都是div,其实还有许许多多的语义标签。下面一一介绍:

1.<h1></h1>,<h2></h2>,<h3></h3>....<h6></h6>他们通称为标题标签,h1代表一级标题,h2代表二级标题,h3代表三级标题...他们是块级标签,无默认属性,双标签。但是他们有默认样式,他们都有margin-top,margin-bottom,它们的值不一样.有不同的font-size和font-weight。

2.<hr/>他是分割线标签,块级标签,单标签。他有默认的样式值,他有margin-top和margin-bottom值都为8px,而且还有一个border。

3.<p></p>段落标签,块级标签,双标签(注意p标签里不能嵌套块级标签)它的默认样式值是有margin-top和margin-bottom值都为16px.

4.<ol><li></li></ol>有序列表标签,ol与li是成对存在的。他是双标签,组合标签,块级标签。ol 有序列表区域 ,li 列表项。ol有默认样式值是上下的16px的margin和左padding为40px。 

5.<ul><li></li></ul>无序列表标签,ul与li是成对存在的。他是双标签,组合标签,块级标签。ul 无序列表区域 ,li 列表项。ul有默认样式值是上下的16px的margin和左padding为40px。

6.<dl><dt></dt><dd></dd></dl>字典标签,dl标签为双标签,块级标签。dl有默认样式值是上下的16px的margin。

dd也有默认样式它有margin-left为40px。

7.<a href="###" (跳转地址必须的而且不能为空) target="跳转方式 _blank 新窗口打开"></a>他是行级标签,双标签。

它有四种伪类属性分别为a:link(link状态 链接未浏览状态),a:visited(active状态 鼠标点击未松开时的状态),a:hover(hover状态 鼠标悬浮在链接上时的状态),a:visited(visited状态 链接已被访问过)。不同的时候有不同的默认样式。

8.<img src="(图片地址)" alt="(当图片加载失败时提供的信息)">他是图片标签,单标签 比如特殊,虽然为行级,但是可以设置尺寸。但他也不属于行块标签。支持宽高属性 不需要加单位 一般宽高只设置一个。

9.<strong></strong>粗体标签,双标签,行级标签。一般用于强调。它的默认样式就是font-weight。

10.<em></em>斜体标签,双标签,行级标签。一般用于强调。它的默认样式就是font-style。

11<big></big><small></small>双标签,行级标签.一般用于强调。它的默认样式就是font-size。注意它字体大小相对于父级字体大小变化而变化

12.<sub></sub>,<sup></sup>,<del></del>分别表示文字下标,文字上标,和删除文字。

1、块状元素:

块级元素是指本身属性为display:block的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建。  

布局上:独占一行,可以容纳内联元素和其他块元素

 样式上:设置width、height有效,可以设置盒子模型的相关css属性,

 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

 在不设置高度的情况下,块级元素的高度是它本身内容的高度

2、 行内元素:

内联元素是指本身属性为display:inline的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的应用。     

布局上:和其他元素从左到右在一行排列,只能容纳文本或者其他内联元素(不要在内联元素中嵌套块级元素)

样式上:不能直接控制width、height,只能使用盒模型部分属性,如padding、line_height、margin-left、margin-right。

内联元素的宽高是由本身内容的大小决定(文字、图标等)

 3、  行内块状元素:尽可能少的占用横向空间,和其他元素都在一行上;可以设置width、height、margin、padding等盒模型相关属性。

         *常用:img、input、td。

               display:block;(将元素变为块级元素)

               display:inline;  (将元素变为行级元素)

               display:inline-block;(将元素变为行级块元素)

       a. 块元素特立独行;内联元素随波逐流。

       b.块元素通常用作网页的主要构建模块,而内联元素常用来标记小段内容(修饰文本)

       c.设计一个页面时,一般从较大的块开始 ,然后完善页面的时候再加入内联元素。      

       d. 对标签能够清晰的分类,掌握标签的特性,在选择标签时避免犹豫不决,提高布局效率。

HTML5新结构标签

HTML5-新的属性语法

HTML5图形

HTML5音视频标签

对本地离线存储的更好的支持

新的表单控件,比如 calendar、date、time、email、url、search

移除的元素:

纯表现的元素:basefont,big,center,font, s,strike,tt,u

 对可用性产生负面影响的元素:frame,frameset,noframes;

支持HTML5新标签 : IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>