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

最新推荐文章于 2022-05-06 21:25:40 发布

Sweet_pin

最新推荐文章于 2022-05-06 21:25:40 发布

阅读量208

点赞数 1

分类专栏：前端学习笔记文章标签： html html5

本文链接：https://blog.csdn.net/qq_42874319/article/details/115631797

版权

前端学习笔记专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

文章目录

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

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 里面去 -->
 <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>
删除多余的单元格（最后这步不要忘记！）

<table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
								<!-- 合并了第二列第三列，写在第二列，同时删除第三列 -->
        </tr>
        <tr>
            <td rowspan="2"></td> 
            <td></td>
            <td></td>
        </tr>
        <tr>
						<!-- 合并了第二行第三行，写在第二行，同时删除第三行 -->
            <td></td>
            <td></td>
        </tr>

    </table>

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)]$

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/

Sweet_pin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签：表格、列表和表单

HTML标签：表格、列表和表单1.表格标签表格不是用来布局页面的，而是用来展示数据的1.1 表格的基本语法<table>  <tr>  <th>表头文本内容</th>  <td>单元格内的文字<
复制链接

扫一扫