Html标签整理

浏览数：31 / 时间：2015年06月09日

行内元素：inline element

    1. 也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其

     他内联元素，常见内联元素 “a”；

       常见的行内元素：

       　a - 锚点
       　b - 粗体(不推荐)
       　br - 换行
       　em - 强调
       　i - 斜体
       　img - 图片
       　input - 输入框
       　label - 表格标签
       　select - 项目选择
       　span - 常用内联容器，定义文本内区块
       　strong - 粗体强调
       　sub - 下标
       　sup - 上标
       　textarea - 多行文本输入框
       　u - 下划线

    块级元素：block element

   1. 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素
   （float浮动后除外）;

   2. 两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素 ;
   常见块级元素：

   　<1> div - 常用块级容易，也是css layout的主要标签
   　<2> dl - 定义列表
   　<3> h1 - h6 标题标签
   　<4> hr - 水平分隔线
   　<5> menu - 菜单列表
   　<6> ol - 排序表单
   　<7> p - 段落
   　<8> table - 表格
   　<9> ul - 非排序列表

<!doctype html>
<html>
<head>
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body{
       margin:0px;
       padding:0px;
   }

   .div1{
       height:40px;
       line-height:40px;
       border:1px solid red;
   }

   .btn{
       height:40px;
       width:200px;
       line-height:40px;
       text-align:center;
       text-decoration:none;
       background:Silver;
       border:1px solid red;
       display:block;
   }
   .btn:hover{
        background:green;
   }

   ol{
        border:1px solid red;
   }

   ul{
       list-style:none;

   }
   .div2{
       width:800px;
       height:255px;
       overflow:hidden;
       position:relative;
   }

   ul{
       padding:0px;
       margin:0px;
       list-style:none;
   }
    ul li img{
       width:800px;
        /* 解决父容器高度增加 4px*/
       /* 方法一*/
       /* display:inline-block;
       vertical-align:middle;*/
       /* 方法二*/
       /*vertical-align:bottom;*/
       /* 方法三*/
       display:block;
   }

   .num{
       position:absolute;
       bottom:10px;
       right:10px;
   }
   .num li{
       float:left;
       color:red;
       width:20px;
       height:20px;
       line-height:20px;
       text-align:center;
       margin-left:10px;
       border-radius:10px;
       background:green;
   }

   table{width:500px;border-collapse:collapse;}
   table th{border:1px solid silver;background:#CCC;}
   table tr td{ border:1px solid silver;}
   table tbody tr:hover{background:yellow;}

</style>
</head>
<body>

   <div>
        行内元素

       <div class="div1">
           上海<em>亿业</em>科技有限<strong><u>公司</u></strong><sup>R</sup>
       </div>
       <a href="#" class="btn">提交11</a>qq
       <input type="radio" name="gender" id="w"><label for="w">女</label>
       <input type="radio" name="gender" id="m"><label for="m">男</label>

   </div>

   <dl>
       <dt>新闻</dt>
       <dd>国内</dd>
       <dd>国际</dd>
       <dd>本地</dd>
       <dt>汽车</dt>
       <dd>大众</dd>
       <dd>宝马</dd>
       <dd>奔驰</dd>
   </dl>

   <ol>
       <li>AAA</li>
       <li>BBB</li>
       <li>CCC</li>
   </ol>

   <ul>
       <li>AAA</li>
       <li>BBB</li>
       <li>CCC</li>
   </ul>

   <table>
       <thead>
           <tr>
               <th>编号</th>
               <th>用户名</th>
               <th>学历</th>
               <th>毕业学校</th>
           </tr>
       </thead>
       <tbody>
            <tr>
               <td>1</td>
               <td>AAA</td>
               <td>本科</td>
               <td>A大学</td>
           </tr>
           <tr>
               <td>2</td>
               <td>BBB</td>
               <td>研究生</td>
               <td>B大学</td>
           </tr>
           <tr>
               <td>3</td>
               <td>CCC</td>
               <td>博士</td>
               <td>C大学</td>
           </tr>
       <tbody>
   </table>

   <div class="div2">

       <ul>
           <li><img src="1.jpg" alt="AAAAAAAAAAA"></img> </li>
           <li><img src="2.jpg" alt="BBBBBBBBBBB"></img> </li>
           <li><img src="3.jpg" alt="CCCCCCCCCCC"></img> </li>
       <ul>

       <ul class="num">
           <li>1</li>
           <li>2</li>
           <li>3</li>
       <ul>
   </div>
</body>
</html>