Html5 块元素 行内元素以及功能原型

1. 块元素

作用：搭建网页结构

特点：
（1）独占一行空间；
（2）默认宽度为100%；
（3） 高度由子元素或者内容决定；
（4）可以通过css为其指定宽度；

标签举例： div、html、body、h1~h6、p、…

2. 行内元素

作用：填充

特点：
（1）与其他行内元素共享一行空间；
（2）不能通过css为其指定宽高；
（3）宽高由资深决定，相当于内容的容器；

标签举例： span、a、img、vedio、audio

3. 功能原型

（1）table

属性：border、width、cellspacing

示例：

  <table border="1" cellspacing="0" width="50%">
        <caption>花名册</caption>
        <thead>
          <tr>
            <td>序号</td>
            <td>姓名</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>张三</td>
          </tr>
            <tr>
            <td>2</td>
            <td>李四</td>
          </tr>
        </tbody>
        <tfoot></tfoot>
      </table>

（2）form

属性：action、method、enctype

表单项：input、select、textarea

示例：

 <form action=" " method="GET" enctype="multipart/form-data">
    用户名<input type="text" name="username">   <br>
    密码 <input type="password" name="password"> <br>
    性别  
    <label>
      <input type="radio" value="male" checked name="gender"> 男
    </label>
    <label for="radio_gender_female">
      <input id="radio_gender_female" type="radio" value="female" name="gender"> 女 
    </label>
    <br>
    爱好
        <input type="checkbox" name="hobbies" value="basketball"> 篮球
      <input type="checkbox" name="hobbies" value="football"> 足球
      <input type="checkbox" name="hobbies" value="run" checked> 跑步
      <input type="checkbox" name="hobbies" value="swimming"> 游泳
    <br>
    头像
    <input type="file" name="file">
    <br>
    <select name="class">
      <option value="1">1班</option>
      <option value="2">2班</option>
      <option value="3" selected>3班</option>
    </select>
    <br>
    <textarea name="introduce" cols="30" rows="10"></textarea>
    <br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
  </form>