03 html标签（下）表格表格作用显示，展示数据的表格基本使用表头 th 会居中，加粗来显示表格属性可以在

表格

表格作用

显示，展示数据的

表格基本使用

<table> （表示整个表格）
        <tr> （行）
            <td>格格1</td> （格）
        </tr>
</table>

表头 th

会居中，加粗来显示

表格属性

可以在后期 css 来设计即可

常用 ： 
    border ： 边框，给表格设置边框，默认没有
    align ： 设置表格的位置，center 居中
    cellpadding ： 设置文字和单元格之间的宽度 
    cellspacing ： 单元格和单元格之间的距离

表格划分区域

<thead></thead> 表头区域

<tbody></tbody> 表身体区域

合并单元格

把多个单元格合一块

从哪里开始合并，就以哪里为目标单元格

跨行合并 rowspan='合并单元格的个数'

原始

跨行多余的文字会顶出去

跨列合并 colspan='合并单元格的个数'

多余的单元格可以删掉即可

列表标签

有序列表 ol

有顺序之分
里面只可放li标签
li 里面可以放任何元素

<ol>
        <li>你</li>
        <li>好</li>
        <li>全世界</li>
</ol>

无序列表 ul

无顺序之分
里面只可放li标签
li 里面可以放任何元素

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ul>

自定义列表

定义：是对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号

dl里面只能有 dt dd
一个dt 可以有多个dd
dt 和 dd是兄弟关系
dt 和 dd 里面可以放任何标签

<dl>
        <dt>二喜</dt>
        <dd>少爷和我</dd>
        <dd>某某某</dd>
        <dd>酷酷的天放</dd>
</dl>

input表单

为什么需要表单？

为了收集信息

表单的组成（3部分）

表单域 form （整个表单区域）

是包含表单元素的区域，用于用户信息的收集和传递

< form > 会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="get/post" name='表单域名称'>
    各种表单元素控件
</form>

action ： 提交给谁 

method ：表单提交方式 ，get/post

name ： 表单名称

表单控件（表单元素）

input输入表单元素

表单元素的属性有

name : 定义input元素的名称
value ：默认显示的值
checked ：在首次加载中被选中
maxlength ：规定输入字段的最大长度

注意：

name 和 value 主要给后台人员使用
单选框和复选框时 name的名称要相同

input type 里面可以写 text（文本） password（密码）

 <form action="url地址" method="get/post" name='名称'>
         <!-- text 文本框   value是默认显示在框框里面的值-->
        用户名 ：<input type="text" name="username" value="请输入用户名" /> 

        <!-- password 密码 -->
        <input type="password" name="" id="" />
 </form>

input type 里面可以写 radio（单选） checkbox（多选框）

<form action="url地址" method="get/post">
        <!-- 单选按钮 radio 可以实现多选1  若实现多选1时，name必须相同-->
        性别 ：男 <input type="radio" name="gender" id="" checked>
                女 <input type="radio" name="gender" id="">

        <br>
        <!-- checkbox 多选框  -->
        爱好 ： 唱歌 <input type="checkbox" name="hobby" id="" checked>
                做饭 <input type="checkbox" name="hobby" id="">
        
</form>

input type 里面可以写 submit（提交按钮） reset（重置按钮）

<form action="url地址" method="get/post">        
        <!-- submit 提交按钮 点击了提交按钮，会根据action后面的地址，进行提交过去 -->         
        <input type="submit" value="提交">
        
        <!-- reset 重置按钮，可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
</form>

input type 里面可以写 button（按钮） file（上传文件）

<form action="url地址" method="get/post">       
        <!-- button 就只是一个按钮，后期会和js结合使用 -->
        <input type="button" name="" id="" value="获取短信验证码">
        
        <!-- file 文件域 ，可以上传文件使用 -->
        <input type="file" name="" id="">        
    </form>

label标签

用于绑定一个表单元素，当点击< label >标签内的文本时，浏览器就会自动的将光标定到对应表单元素上。

<form action="url地址" method="get/post">
        
        性别 ：
        <!-- label里面的for属性 要和 表单元素的id属性要一致，这样才能实现 -->
        <label for="gender">男</label>
        <input type="radio" name="gender" id="gender" checked>
        
        女 <input type="radio" name="gender" id="">

        
       
    </form>

select 下拉表单元素

select 里面必须有一对option
selected 默认选中

<!-- select 里面有 option 是选项  selected 就是默认选择哪一项-->
        <select name="" id="">
            <option value="">选项</option>
            <option value="" >选项1</option>
            <option value="">选项2</option>
            <option value=""selected>选项3</option>
        </select>

textarea 文本域元素

<form>
     <!-- textarea 文本域  cols 每行的字符数  rows 可以有多少行 -->
        <textarea name="" id="" cols="30" rows="10">
            这是文本域，默认显示的文字
        </textarea>
</from>

iframe

内联框架元素，可以将另一个HTML页面嵌入到当前页面中

查阅w3c文档

查阅文档

w3school
MDN
百度

03 html标签（下）

表格