html学习基础（二）

一，表格

1，创建表格

    <table> 
        <!-- 用于定义一个表格 -->
        <tr> 
             <!-- 用于定义表格中的一行，必须嵌套在table标签内，在table中有几对tr就有几行表格 -->
            <td>内容</td> 
             <!-- td用于定义表格里的单元格，必须嵌套在<tr></tr>> 标签中，一对<tr></tr>中包含几对<td></td>就表示该行内有多少列（或者多少单元格） -->
             <!-- 注意 <tr></tr>中只能嵌套<td></td> -->
              <!-- 注意 <td>  </td>标签就像一个容器 ，它可以容纳所有的元素 -->
            <td>内容</td>
        </tr>
    </table>

2，表格的属性

3，表头标签

表头标签一般位于表格的第一行或者第一列，其文本加粗居中，它的设置非常简单，只需要用表头标签 替换单元格标签

注意 表格的结构，表格为在布局时好区分，便定义了表格的头部和主体部分 分辨是 和 这2个不会显示在网页中

4，表格的标题

  <table> 
        <caption>我是表格标题 </caption>
    </table>

5，合并单元格

跨行合并：rowspan
跨列合并：colspan

注意在合并单元格的时候，会出现多余的内容，得把多余的删除。比如：把3个td合并成一个，就多了2个td ，就需要删除多的，
删除的个数=合并的个数-1

 <table> 
        <tr>
            <td>名字A</td>
            <td>男</td>
            <td rowspan="2">18</td>
        </tr>
        <tr>
            <td>名字B</td>
            <td>男</td>
            <!-- <td>18</td>   多余的-->
        </tr>
    </table>

二，表单

1，表单的意义

表单的主要目的就是为了收集信息，同事在网页中我们和用户进行交互，收集资料也是需要表单的。在HTML里一个完整的表单通常由于
表单控件（表单元素），提示信息和表单域3个部分构成

2，表单个控件

1，input控件

 用户名<input type="text"  maxlength="6" >     <!-- 文本框 -->
    密码 <input type="password">    <!-- 密码 -->
    性别 <input type="radio" name="sex" checked="checked" >   <!-- checked="checked"是默认选择 --> 女   <input type="radio" name="sex"/>  男 <!-- 单选框 -->
    <br>
    爱好 
    <br>
    <input type="checkbox" name="hobby" > 打游戏  
    <br> 
    <input type="checkbox" name="hobby" > 画画 
    <br>
    <input type="checkbox" name="hobby" > 看书
    <br>
    按钮组
    <br>
    <input type="button" value="普通按钮"> 
    <input type="submit" value="提交按钮"> 
    <input type="reset" value="重置按钮"> 
    <input type="image" src="logo.jpg" alt="logo图片">
    <input type="file" name="" id="">

2，Label标签

label标签是 input的 元素定义标签，是用来绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
绑定代码如下
1，用label直接进行包裹

 <label > 输入账号   <input type="text"  >  </label>

2，如果有多个想要定位到某个元素，可以用通过for id的格式来进行

 <label for="two">输入账号 <br><br>
    <input type="text" > 
    <input type="text" id="two" >
 </label>

3，textarea（文本域）

如果需要输入大量信息，就要用到文本域控件

   <textarea name="txt" id="" cols="30" rows="10"></textarea>
    <!-- cols=每行中的字符数 rows=显示的行数 -->

4，下拉菜单

用select控件定义下拉菜单的基本语法格式如下

 <select name="sel1" id="2">
        <option value="1" selected="selected">选项1</option> 
         <!-- value=定义送往服务器的选项值
        selected 规定选项（在首次显示在列表中时）表现为选中状态。-->
        <option value="2">选项2</option>
        <option value="3">选项3</option>
 </select>

4，表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的手机和传递，form中素有的内容都会被提交给服务器，创建表单域语法如下

 <form action="URL地址" method="提交方式 Get post "  name="表单名称">
 各种表单控件
 </form>

常用属性：
1，Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址
2，method
设置表单的提交方式，值为get或者post
3，name
用于指定表单的名称，以区分同一个页面中多个表单
注意：每个表单都应该有自己的表单域

三，HTML5文档类型和字符集

1，文档类型设定

document
html： html:4s
xhtml html:xt
html5: html:5

2，常用新标签

1，header：定义文档的页眉
2，nav：定义导航链接的部分
3.，footer：定义文档或杰的页脚
4，article：标签规定独立的自包含内容
5，section: 定义文档中的杰（section，区段）
6，aside：定义其所处内容之外的内容
7，datalist：标签定义选项列表，请与input元素配合使用
8，fieldset：元素可将表单内相关元素分离，打包

其中 datalist标签用法

 <input type="text" value="" list="star">
    <datalist id="star"> datalist里面用id来绑定input里的list链接
        <option >刘德华</option>
        <option >刘若英</option>
        <option >刘晓庆</option>
        <option >张学友</option>
    </datalist>   

fieldset用法

<fieldset>
       <legend>用户登录</legend>
       用户名：<input type="text"> <br><br>
       密码：<input type="password" name="" id="">
    </fieldset>

其效果

3，新增的input type属性值：

常用新属性

四，多媒体标签

1，embed：标签定义嵌入的内容
2，audio：播放音频
3，video：播放视频

多媒体embed

embed可以用来插入各种多媒体，格式可以是Midi, Wav, AIFF,AU MP3等，url为音频或者是视频文件的路径，可以是行对路径或者是绝对路径

<embed src="url地址" type="">

多媒体audio

  <audio src="指定文件的路径"  ></audio>

多媒体video

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>