html常用标签

html常用标签

1、html中常用标签

(1) 段落标记<p>

<p>…</p>定义了一个段的块级标记

<p id=f1>my first paragraph.</p>

<p id=f2>my second paragraph.</p>

(2) 图像标记<img>

<img>行内标记定义了一个行内图像，使用格式如下所示。

src图片地址    alt在图像无法显示时的替代文本

<img src="lotus.jpg" alt="莲花之美">

（3）<div>块级元素 文档的一个逻辑部分，

（4）<span> 行内块级元素

 如：<div class="nav"><span></span></div>

(5) 链接<a>链接的地址href  

如：<a href="http://www.baidu.com"></a>

(6) 标题标记<h1>--<h6>

用于表示文档内容的标题内容，以及标题内容的级别

如：<h1></h1>

(7) 无序列表标记<ul>

表示列表所包含的项是没有先后顺序的

列表项使用<li>表示

如：<ul class="box">

     <li></li>

     <li></li>

 </ul>

(8) 有序列表标记<ol>

表示列表所包含的项是有先后顺序的

列表项使用<li>表示

(9) 列表项标记<li>

只能和<ul>或<ol>结合使用

(10) 定义列表 <dl>

定义列表至少包含一条术语（dt）或一条说明（dd）

(11) 定义列表项 <dt>

标明一个术语要说明的对象

列表项说明 <dd>

(12) 表现性元素

<em>强调一个词或短语 倾斜

<hr/>横线

<br/>换行标记，用于段落内部的换行（注意：该标记是自我闭合标记）

<i><b> i斜体 b粗体

<big><small> 大、小

上标标记

下标标记

(13) 特殊文字符号

在HTML中表示“<”和“>”使用字符“<”和“>”

空格的表示,使用字符“ ”

(注意：尽量不要使用多个“ ”来表示多个空格，因为多数浏览器对空格  的距离的实现是不一样的。)

版权符号的表示,使用字符“©”

“&”符号的表示,使用字符“&”

2、 行内元素、块级元素的分类及区别

行内元素、块级元素的分类

行内元素

块级元素

img  图片

sub  下标

sup   上标

span 逻辑分区 行内

a  链接

hr 横线

br 换行

em 强调

(注：以下是表现外观的元素 现在 html5不推荐使用)

strong  粗

I 斜体

b  粗

big 大

small 小

div  块级逻辑分区

p 段落

ul 无序列表

ol 有序列表

li 列表项

h1-h6 标题

dl 定义列表

dt 定义标题

dd 定义解释说明

 

行内元素、块级元素的区别

行内元素

块级元素

行内元素默认是水平排列

行内元素不会独自占一行

块级元素默认是垂直排列

块级别元素会独自占一行

行内元素里面能够放行内元素

<a href=""><img src=""/></a>  √

块级元素里面能放行内元素

<p>段落<a href="">链接</a></p>√

行内元素里面不能放块级别元素

<a href=""><p>我是个p</p></a>×

块级元素里面能够放块级元素 <li><p>我是一p</p></li>√

行内元素的宽度等于它文字的宽度 ，不设置宽高

块级元素默认的宽等于父亲元素的宽，可以设置宽高

行内元素

只有左右margin

 

块级元素  

可以有上下左右margin

注意：

（1）p里面一般不放 h元素

（2）h里面不放 p元素

（3）ul和ol 里面只放 li元素

（4）p里面一般不能放div

（5）a元素的 content model为 transparent，是否合法要看其父元素的content model 和其内容的categories。如div>a>div是合法的；