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

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

一、标签

1.文件标签

    
        
        
        
        
    
    

2.排版标签
 

：段落标签  常用属性：align
 
：    换行
 

---

：    水平线/分割线

3.字体标签
   
  常用属性:face:字体；size:尺寸；color:颜色    
  （n取值 :1~6）标题标签 独自占一行，加粗
  常用属性:align:对齐方式
   ：加粗         
  ：斜体
        
4.图片标签★
 
（1）大小的写法:像素:123px;百分比:20%                
（2）路径的写法:
 相对路径:
   ./ 或者 什么都不写  当前目录
   ../  上一级目录
 绝对路径:
   带协议的绝对路径:http://www.itheima.com
                
5.超链接标签★
  xxx
  target 默认值:_self    _blank(在空白页面打开)

6.列表标签
 

有序
 

无序
  常用的子标签：

列表项
                    
7.表格标签★★

    //行
        //列
        //表头单元格，默认居中加粗
    

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标签
 格式：

    -请选择-
    展示内容

 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