零基础前端笔记（2）html，表格，列表，标签，文本域，表单域

约定不等于承诺〃 2022-11-06 05:53 122阅读 0赞

### XHTML可扩展超文本标记语言（2） ###

*  （1）创建表格
 *  （2）表格属性
 *   *  表头单元格标签th
     *  表格标题caption
     *   *  小说排行榜
     *  （3）合并单元格
     *  （4）划分表格结构
     *  （5）列表标签
     *   *  无序列表
         *  有序列表
         *  自定义列表
     *  （6）表单标签
     *   *  name属性
     *  （7）lable标签
     *   *  概念
         *  作用
         *  绑定元素
     *  （8）textarea控件（文本域）
     *   *  作用
     *  （9）select下拉列表
     *  （10）from表单域
     *   *  常用属性

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]

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

# （1）创建表格 #

<table>
         <tr>
             <td>单元格内的文字</td>
             <td>单元格内的文字</td>
             <td>单元格内的文字</td>
         </tr>
    </table>

**tr**标签：定义表格中的行，嵌套在table标签中  
**td**标签：定义表格中的单元格，嵌套在`<tr></tr>`内

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

# （2）表格属性 #

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>含义</th> 
   <th>常用属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>border="0"</code></td> 
   <td>设置表格的边框（默认0无边框）</td> 
   <td>像素值</td> 
  </tr> 
  <tr> 
   <td><strong><code>cellspacing="0"</code></strong></td> 
   <td>设置<strong>单元格与单元格</strong>之间的空白间距</td> 
   <td>像素值（默认2px）</td> 
  </tr> 
  <tr> 
   <td><strong><code>cellpadding="0"</code></strong></td> 
   <td>设置<strong>单元格内容与单元格边框</strong>之间的空白间距</td> 
   <td>像素值（默认1px）</td> 
  </tr> 
  <tr> 
   <td><strong><code>width="500"</code></strong></td> 
   <td>设置表格的<strong>宽度</strong></td> 
   <td>像素值</td> 
  </tr> 
  <tr> 
   <td><strong><code>height="200"</code></strong></td> 
   <td>设置表格的<strong>高度</strong></td> 
   <td>像素值</td> 
  </tr> 
  <tr> 
   <td><code>align="center"</code></td> 
   <td>设置表格在网页中的水平对齐方式</td> 
   <td><code>left</code>,<code>center</code>,<code>right</code></td> 
  </tr> 
 </tbody> 
</table>

我们经常有个说法，是三参为0，平时开发的我们这三个参数 `border` `cellpadding` `cellspacing` 为0  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]

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

## 表头单元格标签th ##

文字居中且加粗显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]

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

## 表格标题caption ##

<caption>个人信息表</caption>

定义表格标题，**居中显示与表格之上**  
紧随table标签之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]

### 小说排行榜 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 4]

<body>
        <table border="1" cellspacing="0" cellpadding="0" width="500" height="200" align="center">
            <caption><h3>小说排行榜</h3></caption>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="image/down.jpg" alt=""></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="image/down.jpg" alt=""></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="image/up.jpg" alt=""></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="image/up.jpg" alt=""></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="image/down.jpg" alt=""></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="image/up.jpg" alt=""></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="image/up.jpg" alt=""></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </table>
    </body>

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

## （3）合并单元格 ##

跨行合并

rowspan="合并单元格的个数"

跨列合并

colspan="合并单元格的个数"

合并单元格顺序：**先上 后下 先左 后右**

1.  先确定是 跨行 还是 跨列 合并
2.  根据 先上 后下 先左 后右 的原则找到目标单元格 写上合并方式 还有要合并的单元格数量
3.  删除多余的单元格  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 5]

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

## （4）划分表格结构 ##

定义表格的头部，内部必须拥有`<tr>`标签

用于定义表格的主体

定义表格的脚注

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

## （5）列表标签 ##

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

### 无序列表 ###

`<ul></ul>`中只能嵌套`<li></li>`标签  
`<li>`与`<li>`之间相当于一个容器，可容纳所有元素

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

### 有序列表 ###

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

### 自定义列表 ###

![在这里插入图片描述][20210308190032444.png]

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

## （6）表单标签 ##

一个完整的表单由**表单控件**、**提示信息**和**表单域**构成

`<input/>`标签为单标签  
`type`属性用来指定控件类型

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>type</strong></td> 
   <td>text</td> 
   <td>单行文本输入框</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>password</td> 
   <td>密码输入框</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>radio</td> 
   <td>单选按钮</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>checkbox</td> 
   <td>复选框</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>button</td> 
   <td>普通按钮</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>submit</td> 
   <td>提交按钮</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>reset</td> 
   <td>重置按钮</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>image</td> 
   <td>图像形式的提交按钮</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>file</td> 
   <td>文件域</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>由用户自定义</td> 
   <td>控件的名称</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>由用户自定义</td> 
   <td>input控件中的默认文本值</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>正整数</td> 
   <td>input控件在页面中的显示宽度</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>checked</td> 
   <td>定义选择控件默认被选中的项</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>正整数</td> 
   <td>控件允许输入的最多字符数</td> 
  </tr> 
 </tbody> 
</table>

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

### name属性 ###

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

单选按钮可通过设置**相同**的name属性值  
![在这里插入图片描述][2021030819064690.png]

性别：
        男<input type="radio" name="sex">
        女<input type="radio" name="sex">

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

复选按钮可选择多个  
![在这里插入图片描述][20210308190805812.png]

爱好：
        看书<input type="checkbox" name="hobby">
        动漫<input type="checkbox" name="hobby">
        电影<input type="checkbox" name="hobby">
        打游戏<input type="checkbox" name="hobby">
        学习<input type="checkbox" name="hobby">

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

`checked`属性表示默认选中状态

动漫<input type="checkbox" name="hobby" checked="checked">

图片提交按钮：<input type="image" src="image/btn.png">

上传文件：<input type="file">

![在这里插入图片描述][20210308190944362.png]

## （7）lable标签 ##

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

### 概念 ###

`label`标签为`input`元素定义标注

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

### 作用 ###

用于绑定一个表单标签，当点击`label`标签时，被绑定的表单元素就会获得焦点  
当鼠标点击`label`标签里面的文字时，光标会定位到指定的表单里面

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

### 绑定元素 ###

• `label`直接包括`input`表单

• `for`属性规定`label`与哪个表单元素绑定（id）

<label for="test">测试label标签</label>
    <input type="text" id="test">

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

## （8）textarea控件（文本域） ##

用户留言：<textarea></textarea>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 6]

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

### 作用 ###

通过`textarea`控件可以轻松地创建多行文本输入框

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

## （9）select下拉列表 ##

省份:
    <select>
        <option selected="selected">--请选择省份--</option>
        <option>北京</option>
        <option>天津</option>
        <option>上海</option>
        <option>武汉</option>
        </select>
    城市:
    <select>
        <option selected="selected">--请选择所属城市--</option>
        <option>武昌区</option>
        <option>江岸区</option>
        <option>青山区</option>
    </select>

`<select>`中至少包含一对option  
在option中定义`selected="selected"`时，当前项即为默认选择项

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

## （10）from表单域 ##

### 常用属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>url地址</td> 
   <td>指定接收并处理表单数据的服务器程序的url地址</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td>Get/post</td> 
   <td>设置表单数据的提交方式</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>名称</td> 
   <td>指定表单的名称，区分同一个页面的多个表单</td> 
  </tr> 
 </tbody> 
</table>

• **get请求** 通常表示 获取数据  
• **post请求** 通常表示 提交数据  
• **get请求** 发送的 **数据都写在地址栏上，用户可见**  
• **post请求** 发送的 **数据用户不可见**  
• **get请求不能提交大量数据**，但 **post可以**，因此不要混用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221023/0a2af88509034a928eab31bdd600d40b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]: /images/20221023/046790b2baca4efbaa7d7c12b44924a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]: /images/20221023/53e099dd5d40485793d68348f9f83223.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]: /images/20221023/37e2c1f72a3a4356ad64165d6fa36184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 4]: /images/20221023/a25e03858e284f07911d7a8a9684e2ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 5]: /images/20221023/5352d5c81fb640b48ea23d9b8c181dd2.png
[20210308190032444.png]: /images/20221023/6f92848c578346609b5a692108209220.png
[2021030819064690.png]: /images/20221023/07b1a8aa87d54404ba7e5e3cdf45064a.png
[20210308190805812.png]: /images/20221023/3003c3e708ea42839236e9f7486ec1ed.png
[20210308190944362.png]: /images/20221023/b5919d80946a462183f987223a43b8c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 6]: /images/20221023/a9620f08aba14cf39b98c6bb72fcd411.png