HTML标签：表格、列表和表单

r囧r小猫 2022-11-18 04:55 226阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*  HTML标签：表格、列表和表单
 *   *  1.表格标签
     *   *  1.1 表格的基本语法
         *  1.2 表格结构标签
         *  1.3 合并单元格
     *  2.列表标签
     *   *  2.1 无序列表(最常用)
         *  2.2 有序列表（理解）
         *  2.3 自定义列表（重点）
     *  3.表单标签
     *   *  3.1 表单域（了解）
         *  3.2 表单控件（表单元素）
     *  4. 查阅文档

--------------------

# HTML标签：表格、列表和表单 #

## 1.表格标签 ##

*表格不是用来布局页面的，而是用来展示数据的*

### 1.1 表格的基本语法 ###

<table>      
        <tr> 		
            <th>表头文本内容</th>   
            <td>单元格内的文字</td>   
            ...
        </tr>
        ...
    </table>

### 1.2 表格结构标签 ###

在表格标签中，分别用<thead>标签和<tbody>标签来更好的分清楚表格结构。

*  <thead></thead>：用于定义表格的头部，其内部必须拥有<tr>标签，一般位于第一行
    
     *  注意 <thead>和 <th>的区别： <th>是表头单元格，<thead>是代表表头区域，范围更广）
 *  <tbody></tbody>：用于定义表格的主体，主要用于放数据本体

<table align="center" width="500" height="249" border="1"  cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>关键词</th>
                    <th>趋势</th>
                    <th>进入搜索</th>
                    <th>最近七日</th>
                    <th>相关链接</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
                </tr>
            </tbody>
        </table>

### 1.3 合并单元格 ###

1.合并单元格的方式

*  跨行合并：rowspan=“合并单元格的个数”
 *  跨列合并：colspan=“合并单元格的个数”

2.目标单元格：（写合并代码）

*  跨行：最上侧单元格为目标单元格，写合并代码
 *  跨列：最左侧单元格为目标单元格，写合并代码

3.合并单元格三部曲：

*  先确定跨行还是跨列合并
 *  找到目标单元格，写上合并方式=合并的单元格数量，例如 <td colspan=“2”></td>
 *  删除多余的单元格（最后这步不要忘记！）

## 2.列表标签 ##

*列表用来布局，最大的特点就是整齐、整洁、有序*

### 2.1 无序列表(最常用) ###

<ul> 标签表示HTML页面中的无序列表，一般会以项目符号呈现列表项，列表项使用

*  标签定义。
 *      <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            ...
        </ul>
    
     *  无序列表的各个列表项之间没有顺序级别之分，是并列的
     *  <ul></ul>只能嵌套<li></li>，在其中输入其他标签或者文字的做法是不被允许的
     *  <li></li>之间相当于一个容器，可以容纳所有元素
     *  无序列表会带有自己的样式属性，但在实际使用中，会使用CSS来设置
    
    ### 2.2 有序列表（理解） ###
    
    <ol>标签用来定义有序列表，列表排序以数字显示，并且使用<li>标签来定义列表项
    
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            ...
        </ol>
    
     *  <ol></ol>只能嵌套<li></li>，在其中输入其他标签或者文字的做法是不被允许的
     *  <li></li>之间相当于一个容器，可以容纳所有元素
     *  无序列表会带有自己的样式属性，但在实际使用中，会使用CSS来设置
    
    ### 2.3 自定义列表（重点） ###
    
    <dl>标签用来定义描述列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
    
        <dl>
            <dt>名词1</dt>
            <dd>名词1解释1</dd>
            <dd>名词1解释2</dd>
        </dl>
    
     *  <dl></dl>只能嵌套<dt><dd>，在其中输入其他标签或者文字的做法是不被允许的
     *  <dt><dd>的个数没有限制，经常是一个<dt>对应多个<dd>（不是包含关系，是并列关系）
    
    ## 3.表单标签 ##
    
    *使用表单的目的是为了收集用户信息*
    
    一个完整的表单的组成：表单域、表单控件（表单元素）和提示信息三个部分组成。
    
    ### 3.1 表单域（了解） ###
    
    表单域是一个包含表单元素的区域
    
    在HTML标签中，标签用于定义表单域，以实现用户信息的收集与传递，会把他范围内的表单元素信息提交给服务器。
    
        <form action="url地址" method="提交方式" name="表单域名称">
            各种表单元素控件
        </form>
    
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rcbq8Hy-1618220117823)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210410203857206.png)\]][img-8rcbq8Hy-1618220117823_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210410203857206.png]
    
    ### 3.2 表单控件（表单元素） ###
    
    表单元素就是允许用户在表单中输入或选择的内容控件
    
     *  <input>输入表单元素
        
            <input type="属性值", name="username", value="username"/>
        
         *  标签为单标签
         *  type属性设置不同的属性值用来指定不同的控件类型
            
             *  text：文本框，用户可以在里面输入任何文字
             *  password：密码框，用户看不见输入的密码
             *  radio：单选按钮，可以实现多选一 例如：性别：男 女
             *  checkbox：复选框，可以实现多选
             *  submit：提交按钮，点击提交按钮后会把**表单数据发送到服务器**（value可以更改按钮上的文字信息）
             *  reset：重置按钮，可以还原表单元素初始的默认状态
             *  button：普通按钮，点击后不会将数据提交（例如短信验证码）
             *  file：文件域，用来上传文件
         *  name 和 value属性（每个表单元素都要有的属性，主要给后台人员使用）
            
             *  name是表单元素名称，例如性别的单选框（复选框）必须设置成相同的name才可以实现多选一
                
                    性别：男 <input type="radio", name="sex"> 女  <input type="radio", name="sex">
             *  value 规定input元素的值（如下，按钮上面会显示value值）
                
                    <input type="submit" value="免费注册">
         *  checked 和 maxlength属性
            
             *  checked：单选按钮和复选框可以设置成checked属性，当页面打开时就可以默认选中这个按钮
             *  maxlength：规定输入字段中的字符的最大长度
    
        <form action="xxx.php" method="get">
                 
                用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
                
                密码: <input type="password" name="pwd" >  <br> 
                
                
                
                性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> <br> 
                
                爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
                <br> 
                
                <input type="submit" value="免费注册">
                
                <input type="reset" value="重新填写">
                
                <input type="button" value="获取短信验证码"> <br>
                
                上传头像:  <input type="file" >
            </form>
    
     *  <label>标签（input元素定义标注）
        
        *用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将光标转到对应的表单元素上，用来增加用户体验*
        
            <label for="sex">男</label>
            <input type="radio" name="sex" id="sex"/>  <!--label标签的for属性应当和相关元素的id属性相同>
     *  <select>下拉表单元素
        
            <select>
                <option selected="selected">河北</option>
                <option>北京</option>
                ...
            </select>
        
         *  select中至少包含一对<option>
         *  在<option>中定义selected=“selected”时，当前项即为默认选中项
     *  <textarea>文本域元素
        
        *用于定义多行文本输入的控件*
        
            <textarea row="3" cols="20">
                默认写入的内容
            </textarea>
    
    ## 4. 查阅文档 ##
    
     *  百度：http://www.baidu.com
     *  W3C：http://www.w3school.com.cn
     *  MDN：https://developer.mozilla.org/zh-CN/

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[img-8rcbq8Hy-1618220117823_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210410203857206.png]: /images/20221022/d98d0f749a804990aaa116e6f25fe999.png