Html标签及网页布局
1、分享主要内容
认识html中的常用标签，了解行内元素、块级元素的分类和区别；然后通过一个基本的网页了解前端页面的大致布局以及不同标签（行内元素、块级元素）的使用情况；
2、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> 大、小
<sup></sup>上标标记
<sub></sub>下标标记
(13) 特殊文字符号
在HTML中表示“<”和“>”使用字符“<”和“>”
空格的表示,使用字符“ ”
(注意：尽量不要使用多个“ ”来表示多个空格，因为多数浏览器对空格 的距离的实现是不一样的。)
版权符号的表示,使用字符“©”
“&”符号的表示,使用字符“&”
3、 行内元素、块级元素的分类及区别
|
行内元素、块级元素的分类 |
|
|
行内元素 |
块级元素 |
|
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 |
|
