html中标签元素的三种类型

html-css015

html中标签元素的三种类型,第1张

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>

在HTML中,存在这许许多多的元素(同:”HTML标签”),这些元素最终可分为三类,分别是块级元素,内联元素(同:”行内元素”),块级内联元素(同:”行内块元素”)。

你对这些元素是否真的了解呢?

我们来看看这三类元素的特点:

1.每个块级元素都从新的一行开始显示(块级元素独占一行)

2.元素的宽度,高度,内边距(padding),边框(border),外边框(margin)都能随意设置

3.块级元素在网页中所占面积=内容区(content)+内边距(padding)+边框(border)+外边距(margin)

4.块级元素本身未设置宽度的情况下,宽度=父元素宽度-该元素的左右外边距-该元素的左右边框-该元素的左右内边距

5.块级元素未设置padding和border的情况下,padding和border的数值为0

6.块级元素未设置宽度和外边距的情况下,margin的值为0,宽度为100%(即与父元素宽度一致)

7.块级元素设置宽度但未设置外边距的情况下,左外边距的值为0

8.块级元素设置宽度,未设置padding和border,同时设置margin: 0 auto的情况下,左右外边距平分 父元素宽度-该元素宽度所剩余的空间

9.块级内联元素不受父元素的line-height以及自身的vertical-align影响

1.display:block

2.float:left或right

3.position:absolute或fixed

4.父元素使用display:flex,子元素会变为块级元素

,

,

在html中，什么叫做元素解释：

1、元素：

HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 

2. 标签：

标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>。当然还有少部分不是成对出现的，如<br>、<hr>等。 

标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。

3. 属性： 

为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。 

4、示例： 

<html><head><title>示例标题</title></head><body bgcolor="red"><p>这是示例页面</p></body></html>在这个示例中，<p>这是示例页面</p>就是HTML元素，其中“这是示例页面”就是元素的具体内容了。

5、<head><title><body>等就是HTML标签，这是标签构成了HTML元素。

<body bgcolor="red">中的bgcolor="red"就是标签的属性，它定义了标签应该如何具体配置。 总之，元素和标签的区别也不必太在意，实际工作中都直接以标签统称