HTML —— 简单知识点3

HTML —— 简单知识点3

 

 

目录

HTML —— 简单知识点3

 

一、表格标签

1. 表格标签的作用、基本格式、属性

2. 合并单元格

二、列表标签

1. 无序列表

2. 有序列表

3. 自定义列表

三、表单标签

1. 概述

2. 表单域

3. 表单控件（元素）

input：

select：

textare：

四、文档查找

#END

---

一、表格标签

1. 表格标签的作用、基本格式、属性

1.1 作用：用于显示、展示数据；

1.2 基本格式：

<table>
    <tr>
        <td>文字</td>
        <td>文字</td>
        ...
    </tr>
    ...
</table>

1.3 具体解释：

① <table></table>：定义表格，表格的所有元素必须在<table></table>标签内；

② <tr></tr>：定义表格中的行，必须嵌套在<table></table>标签内；

③ <td></td>：定义表格中的单元格（即定义列），必须嵌套在<tr></tr>标签中； 

1.4 表头单元格标签：<th>标签会使HTML表格的表头部分的文本内容加粗居中显示；

<table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

1.5 表格结构标签：（放在<table></table>标签中）

① <thead></thead>：定义表格的头部， <thead></thead>标签内部一定要有<tr>标签，一般是位于第一行；

② <tbody></tbody>：定义表格的主体；

            <table>
                  <thead>
                        <tr>
                              <th> </th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <th> </th>
                        </tr>
                        <tr>
                              <th> </th>
                        </tr>
                  </tbody>
            </table>

1.6 表格属性：（必须放在<table>标签中）

1.7 具体解释：

① align：

<table align="center">

② border：

<table border="2">

③ cellpadding：规定单元格的内容与单元格之间的距离；

<table border="2" cellpadding="10">

④ cellspacing：规定单元格与单元格之间的距离；

<table border="2" cellspacing="0">

⑤ width：

<table border="2" width="300">

 

2. 合并单元格

2.1 方式：跨行合并、跨列合并；

① 跨行合并：rowspan="合并单元格的个数"；

② 跨列合并：colspan="合并单元格的个数"；

2.2 目标单元格：

① 跨行合并：最上侧单元格为目标单元格，写合并代码；

② 跨列合并：最左侧单元格为目标单元格，写合并代码；

2.3 合并单元格步骤：

① 确定合并方式；

② 找到目标单元格，写合并代码；

③ 删除多余的单元格；

<tr>
   <td colspan="2"> </td>
   <td> </td>
</tr>

                  <tr>
                        <td colspan="2"> </td>
                        <td> </td>
                  </tr>
                  <tr>
                        <td> </td>
                        <td rowspan="2"> </td>
                        <td> </td>
                  </tr>
                  <tr>
                        <td> </td>
                        <td> </td>
                  </tr>

 

 

二、列表标签

列表分类：无序列表、有序列表、自定义列表。

1. 无序列表

1.1 无序标签：<ul></ul>标签定义无序列表，以项目符号显示列表项，<li>标签定义列表项；

1.2 代码格式：

<ul>
   <li>列表项</li>
   <li>列表项</li>
   <li>列表项</li>
</ul>

1.3 注意：

 

2. 有序列表

2.1 有序标签：<ol></ol>标签定义无序列表，以数字显示列表项，<li>标签定义列表项；

2.2 代码格式：

<ol>
   <li>列表项</li>
   <li>列表项</li>
   <li>列表项</li>
</ol>

2.3 注意：

 

3. 自定义列表

3.1 自定义列表：<dl></dl>标签定义自定义列表，<dt></dt>标签定义项目的标题，<dd></dd>标签定义每一个项目；

3.2 使用场景：常用于对术语或名词进行解释和描述；（项目前无任何项目符号）

3.3 代码格式：

<dl>
    <dt>名词</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
</dl>

3.4 注意：

 

 

三、表单标签

1. 概述

1.1 表单的作用：收集用户信息；

1.2 表单组成：表单域、表单控件（表单元素）、提示信息；

 

2. 表单域

2.1 概述：包含表单元素的区域；

2.2 标签：<form>标签定义表单域，以实现用户信息的收集和传递，<form>标签会把它范围内的表单元素信息提交给服务器；

2.3 代码格式：

<form action="后台地址" method="数据提交方式" name="表单名">
</form>

2.4 属性：

 

3. 表单控件（元素）

input：

3.1 input：输入表单元素；

3.2 input代码格式：

<input type="属性值" />

3.3 type属性：（包含在from标签中）

3.4 一些具体解释：

① radio和checkbox：radio为单选按钮也可多选（圆形），checkbox为复选框可多选（方形）；

<form>
    性别：男 <input type="radio">  女 <input type="radio"> <br>
    爱好：运动 <input type="checkbox"> 追剧 <input type="checkbox"> 美食 <input type="checkbox">
</form>

如果想要实现多选一，即将radio和checkbox按钮具有相同的name属性

<form>
    性别：男 <input type="radio" name="sex">  女 <input type="radio" name="sex"> <br>
    爱好：运动 <input type="checkbox"> 追剧 <input type="checkbox"> 美食 <input type="checkbox">
</form>

② text和password：text文本框，可以在里面输入任何文字，password密码框，使用户看不见输入的密码；

<form>
    用户名：<input type="text"> <br>
    密码：<input type="password">
</form>

③ button、submit、reset：分别为可点击按钮（用于JavaScript）、提交按钮、重置按钮；

<form>
   <input type="button"> <br>
   <input type="submit"> <br>
   <input type="reset">
</form>

3.5 input的一些属性：

3.6 具体解释：

① name：定义input元素的名称；

<input type="text" name="word"/>

② value:

<form>
    用户名： <input type="text" value="请输入用户名" name="useword"> 
</form>

③ checked:（只用于radio和checkbox）

<form>
   <input type="checkbox" checked="checked" name="point"> 同意用户协议
</form>

3.7 一些注意点：

 

select：

3.1 select：下拉表单元素；

3.2 代码格式：

<form>
   <select>
     <option>选项1</option>
     <option>选项2</option>
     <option>选项3</option>
   </select>
</form>

3.3 注意：

籍贯
 <select>
     <option>四川</option>
     <option>陕西</option>
     <option selected="selected">湖南</option>
</select>

textare：

3.1 textare：文本域元素；

3.2 代码格式：

<form>
   <textarea rows="初始化行数" cols="每行文本数">
       文本内容
   </textarea>
</form>

3.3 注意：

<form>
    个人介绍
    <textarea rows="3" cols="20">请输入您的个人介绍
    </textarea>
</form>

 

四、文档查找

4.1 W3C：http://www.w3school.com.cn/

4.2 MDN：https://developer.mozilla.org/zh-CN/

此文章接上文HTML常用标签

https://blog.csdn.net/sokoooo/article/details/113436070?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242

 

#END （部分图源b站pink老师视频）