HTML_行内元素、块级元素、空元素
2015-01-25 本文已影响1017人
Miss____Du
- 内联元素
- 叫法有内联元素、内嵌元素、行内元素、直进式元素
- 一般都是基于语义级(semantic)的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用。
- 内联元素有这些
- a - 锚点
abbr - 缩写
the <abbr title="world wield web constium">W3C</abbr>is important;
abbr.jpg
b - 粗体（不推荐）、strong - 粗体强调、em - 斜体重要{均是双标签}
在没有其他合适标签更合适时，才应该把<b>标签作为最后的选项。HTML5 规范声明：应该使用<h1> - <h6>来表示标题，使用<em>标签来表示强调的文本，应该使用<strong>标签来表示重要文本。
这些也都可通过font-weight属性来设置。
bdo 定义文本方向
<br /> rtl: <bdo dir="rtl">here is some text</bdo> <br /> ltr: <bdo dir="ltr">here is some text</bdo>
dbo.jpg
big - 较原来字体大一号。<big><big>12</big></big>
br - 换行<br><br />clear属性
cite - 引用，斜体显示
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
samp - 定义范例计算机代码
var - 定义变量
q - 短引用
small - 小字体文本
span - 常用内联容器，定义文本内区块
label - 表格标签
del-删除部分
ins-新插入部分
select - 项目选择
sub - 下标
sup - 上标
textarea - 多行文本输入框
iframe-创建包含另一个文档的内联框架
<iframe src="block_elements.html" width="" height=""></iframe>
iframe.jpg
(map,area)-带有可点击区域的图像映射
< img src="../../LG/image/ff8080814aecc157014aecdf36aa002a.jpg" width="300px" border="0" usemap="#test" alt="test" />
<map name="test" id="test">
<area shape="circle" coords="20,20,50" href="block_elements.html" alt="" />
</map>
- a - 锚点
- 块级元素
- address - 定义文档或文章的作者的联系信息，不要局限于地址，以斜体的形式展现。
<address>Written by miss_du</address>.jpg
blockquote - 标签定义块引用，左右两边会自动进行缩进
俗话说得好
<blockquote>
笨鸟先飞
</blockquote>
blockquote.jpg
dir - 目录列表
<dir>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</dir>
dir.jpg
dl>dt+dd-定义列表，这个经常用，就不距离啦
ul>li-定义无须列表
ol>li-定义有序列表
div常用的块级元素，用于css布局。
（fieldest，legend）-组合表单中的相关元素
<fieldset id="">
<legend>性别</legend>
女:<input type="radio" name="" id="" value="" />
男:<input type="radio" name="" id="" value="" />
</fieldset>
fieldset.jpg
form - 交互表单
h1 ~h6
hr - 水平分隔线
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
pre - 格式化文本,，主要用于显示源码。
<pre>
<a>
显示源码了么？
</a>
</pre>
pre.jpg
table - 表格
<table border="" cellspacing="" cellpadding="">
<caption>hello</caption>
<thead style="background: black;color: #fff;">
<tr>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>- 需要注意：caption元素在表格中重复会折行，但是脱离表格，重复不会折行。
