html中标签元素的三种类型

html-css010

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常用标签总结，具体可分为常用基础标签、常用表单基础标签、常用表格基础标签、常用列表标签、常用框架标签、常用链接标签和常用图像标签七大类。

01

常用基本标签

<html></html>定义html文档

<head></head>定义文章标题和其他在网页内不显示的信息

<title></title>　定义文档标题

<body></body>定义文档的主体内容

<h1><h1>定义最大标题，由1依次往后排开，1最大

<!--…-->注释

02

常用表单基础标签

<form></form>定义表单

<input>定义输入控件

<textarea></textarea>定义多行文本输入

<button>定义按钮

<select>定义选择的下拉列表

<optgroup>定义选择列表中的选项组合

<option>定义选择列表的选项

<label>定义input的标注

<fieldset>定义围绕表单的边框

<legend>定义fieldset的标题

03

常用表格基础标签

<table>定义表格

<caption>定义表格标题

<th>定义表格中的表单元格

<tr>定义表格中的行

<td>定义表格中的单元

<thead>定义表格中的表头内容

<tbody>定义表格中的主体内容

<tfoot>定义表格中的脚注

<col>d定义表格中一个或者多列的属性值

<colgroup>定义表格中供格式化的列组

04

常用列表标签

<ul></ul>定义无序列表

<ol></ol>定义有序列表

<li></li>定义列表的项目

<dl>定义列表

<dt>定义列表中的项目

<dd>定义列表中项目的描述

<menu>定义命令列表

<menuitem>定义用户可以从弹出菜单调用的命令

05

常用框架标签

<frame>定义框架集的窗口或者框架

<frameset>定义框架集

<noframes>定义针对不支持框架的用户代替内容。

<iframe>定义内联框架

06

常用链接标签

<a>定义锚

<linke>定义文档与外部资源的关系

07

常用图像标签

<img></img>定义图像

<map></map>定义图像映射

<area></area>定义图像地图内的区域