块级元素是指本身属性为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>定义图像地图内的区域