前端入门 HTML笔记（二）

╰+哭是因爲堅強的太久メ 2023-07-11 12:40 8阅读 0赞

目标：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70]  
目录：  
![在这里插入图片描述][20200305174633886.png]

## 一、表格标签 ##

表格是实际开发中最常用的标签，**重点掌握**

#### 1、表格的主要作用： ####

表格主要用于显示、展示数据，可让数据整齐，可读性好。  
表格不是用来布局页面的，而是用来**展示数据**的。

#### 2、表格的基本语法 ####

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

1、< table>< /table>是用于定义表格的标签。  
2、< tr>< /tr>标签用来定义表格中的行，必须嵌套在< table>< /table>中  
3、< td>< /td>用来定义表格中的单元格，必须嵌套在< tr>< /tr>中。  
4、字母td指表格数据（table data），即数据单元格的内容。

#### 3、表头单元格标签 ####

用< th></ th>标签，位于第一行或第一列，表头单元格里的文本内容**加粗居中**显示。//与tr的区别。

#### 4、表格属性 ####

表格标签的属性在实际开发中不常用，后面用CSS来设置。  
目的：  
1、记住英语单词，后面CSS要用。  
2、感受表格外观形态。

这些属性要写在表格标签table里面去。`即：<table align="center">`  
![在这里插入图片描述][20200306094157804.png]

#### 5、表格结构标签 ####

因为表格很长，为更好的表现表格的语义，把表格分割成头部和主体两部分。  
< thead>:表格的头部区域  
< tbody>:表格的主题区域  
**注意区分< th>和< thead>，< th>为表头单元格！**  
**< thead>内一定要有< tr>标签，一般在第一行**  
**以上两标签一定在两table中。**

#### 6、合并单元格 ####

1、合并单元格方式：

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

![在这里插入图片描述][20200306142734800.png]  
2、目标单元格：（写合并代码）

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

3、合并单元格三步曲：

1.  确定跨行？跨列？
2.  找到目标单元格，写合并代码。如：< td colspan=“2” > < /td>
3.  删除多余的单元格

#### 7、表格总结 ####

表格学习的三部分

1.  表格的相关标签
2.  表格的相关属性
3.  合并单元格

## 二、列表标签 （重要） ##

表格用来展示数据，列表用来布局。

列表的特点：整齐有序，用其布局自由方便。

根据使用场景不同，列表分为：

1.  无序列表
2.  有序列表
3.  自定义列表

#### 1、无序列表 （重点！） ####

< ul>标签定义无序列表，列表项用< li>标签定义。  
无序列表的基本语法格式：

1、无序列表的各个列表项无顺序。  
2、无序列表只能放< li>标签，不许放其他标签或文字。  
3、< li>相当于一个容器，可以容纳所以元素。  
4、无序列表会带有自己的样式属性，CSS后会强制去掉小点。

#### 2、有序列表 （理解） ####

< ol>标签定义有序列表，< li>标签定义列表项。

1、有序列表有顺序  
2,3,4与上类似。

#### 3、自定义列表 （重点） ####

自定义列表的使用场景：  
用于对术语或名词进行解释和说明，定义的列表项前没有任何符号。

###### (1)语法格式 ######

< dl>用于定义列表，与< dt>（定义项目/名字）和< dd>（描述每一个项目/名字）一起使用。

1、dl里只能包含dt、dd。  
2、dt、dd个数没有限制。  
3、dt、dd为兄弟关系，不是包含关系。

#### 4、列表总结 ####

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

## 三、表单标签 ##

如用户注册账号信息页面为一个表单。

#### 1、为什么需要表单？ ####

收集用户信息。

#### 2、表单的组成 ####

由表单域，表单控件（或元素）和提示信息三个部分组成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 1]

##### （1）表单域 #####

包含表单元素的区域，  
用< form>标签定义表单域，< form>会把它范围内的表单元素信息提交给服务器。

语法规范

<form action="url地址" method="提交方式" name="表单域名称">
            各种表单元素控件
        </form>

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

##### （2）表单控件（表单元素） #####

1、input输入表单元素  
2、select下拉表单元素  
3、textarea文本域元素

**< Input>输入表单元素**  
< input>标签用于收集用户信息。

语法规范：

1、为单标签  
2、 type属性设不同的值用来指定不同的控件类型  
type属性及属性值：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 2]  
单选按钮：小圆。  
复选框：小方框。

例子：
    ①单选
     <input type="radio" name="sex" id="man"checked="checked"/><label for="man">男</label>
    <input type="radio" name="sex" id="women"/><label for="women">女</label>

3、input的其他属性：  
![在这里插入图片描述][20200312143547848.png]

*  name和value是每个表单元素都要有的属性值，只要给后台人员使用。
 *  name表单元素的名字，要求单选按钮和复选框同一组要有相同的name值。
 *  value：默认显示值
 *  checked：页面一打开，某个按钮或复选框被选中状态。`checked="checked"`。针对单选按钮和复选框。

**< label>标签**  
< label>标签为Input元素定义标注标签  
< label>标签绑定一个表单元素，当点击< label>标签内的文本时，自动将光标选择在对应的表单元素上，增加用户体验。

语法规范：

**核心：< label>标签的for属性应与相关元素的id属性相同。**

**select下拉表单元素**  
节约页面空间。  
用< select>标签定义下拉列表。

语法规范：

*  < select>内至少包含一对< option>
 *  在< option>中定义selected=“selected”，则当前项为默认选中项。

**textarea文本域元素**  
使用场景：输入内容较多。  
使用< textarea>定义多行文本输入控件。

语法规范：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305174528935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[20200305174633886.png]: https://img-blog.csdnimg.cn/20200305174633886.png
[20200306094157804.png]: https://img-blog.csdnimg.cn/20200306094157804.png
[20200306142734800.png]: https://img-blog.csdnimg.cn/20200306142734800.png
[20200306150732155.png]: https://img-blog.csdnimg.cn/20200306150732155.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312140946705.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[20200312141658233.png]: https://img-blog.csdnimg.cn/20200312141658233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200312142635972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[20200312143547848.png]: https://img-blog.csdnimg.cn/20200312143547848.png