html（超文本标记语言）标签及案例总结

2.排版标签
<p></p>：段落标签常用属性：align
<br/>：换行
<hr/>：水平线/分割线

3.字体标签
<font></font>
常用属性:face:字体；size:尺寸；color:颜色
<hn></hn>（n取值 :1~6）标题标签独自占一行，加粗
常用属性:align:对齐方式
<b></b> <strong></strong>：加粗
<i></i>：斜体

4.图片标签★
<img src="图片路径" alt="替代文字" width="" height="" title="鼠标移上去显示的文字"/>
（1）大小的写法:像素:123px;百分比:20%
（2）路径的写法:
相对路径:
./ 或者什么都不写当前目录
../ 上一级目录
绝对路径:
带协议的绝对路径:http://www.itheima.com

5.超链接标签★
<a href="跳转路径" target="在哪里打开">xxx</a>
target 默认值:_self _blank(在空白页面打开)

6.列表标签
<ol></ol> 有序
<ul></ul> 无序
常用的子标签：<li></li> 列表项

7.表格标签★★
<table border="边框" width="" height="" align="表格对齐方式" bgcolor="背景颜色">
   <tr align="内容对齐方式">//行
       <td align=""></td>//列
       <th></th>//表头单元格，默认居中加粗
   </tr>
</table>
td中的重要属性:colspan:列合并;rowspan:行合并值:合并的列(行）数

8.表单标签★★★
表单作用:收集用户信息
form
（1）常用属性:
action:设置提交路径默认是当前页面
method:提交方式 get（默认）和post
（2）常见的子标签:
input；select:下拉选；textarea:文本域

input标签:
常用的属性:
A.type（10种）
text:文本框默认
password:密码框
radio:单选框
checkbox:多选框
file:文件框
submit:提交
reset:重置
button:普通按钮
hidden:隐藏域在页面上不显示提交的时候可以提交过去
image:图片提交替代submit
B.name
提交到服务器；将单选框或者复选框设置为一组
C.value
text password 设置默认值
radio checkbox 设置选中后提交的值
submit reset button 设置按钮的展示文字

select标签
格式：
<select name="">
<option>-请选择-</option>
<option value="提交到服务器的值">展示内容</option>
</select>

textarea:文本域
格式：
<textarea cols="" rows="" name="">默认值</textarea>

（3）默认值:
text password:设置value属性
radio checkbox:设置属性 checked="checked"
select:在option上设置属性 selected="selected"
文本域:标签体

9.框架(了解)
（1）frameset:定义框架集
常用属性:
cols:垂直切割例如: cols="40%,*,10%"
rows:水平切割
常见的子标签:
frame
（2）frame:具体展示
常用属性:
src:展示的页面
name:给当前的frame起个名称，方便a标签使用

二、常见案例

1.案例一：网站信息展示
（1）需求:在页面展示一些文字信息,需要排版
（2）技术分析：html,文件标签，标题标签，段落标签，字体标签，其他标签，水平线
（3）步骤分析:
a.新建一个html页面
   b.标题标签
   c.添加一个水平线
   d.4个段落
   e.添加字体颜色加粗斜体

2.案例二：图片网页展示
（1）需求:在一个页面中展示多张图片
（2）技术分析:图片标签

3.案例三：列表网页展示
（1）需求:将友情链接的页面通过列表展示出来
（2）技术分析:列表标签，超链接标记

4.案例四：首页信息展示
（1）需求:通过表格布局将首页信息展示
（2）技术分析:表格标签
（3）步骤分析:
   a.创建一个8行1列的表格
   b.在第1行放logo 嵌套一个1行3列的表格
   c.第2行放菜单
   d.第3行放图片
   e.第4行热门商品嵌套一个2行7列的表格
   f.第5行放广告图片
   g.第6行最新商品嵌套一个2行7列的表格
   h.第7行放一个图片
   i.第8行两个段落

5.案例五：表单页面
（1）需求:设计一个表单页面,用来收集用户的数据
（2）技术分析:表单标签
（3）步骤分析:
a.在页面中间添加一个表格
   b.10行3列表格
   c.在表格中添加表单子标签

6.案例六：后台管理页面
（1）需求:开发一个后台管理页面,通过frameset实现
（2）技术分析:frameset（框架集），frame