HTML课程分享(二)

HTML课程分享

♥ 列表标签

①、表格标签

1、表格的主要作用
2、表格的基本语法

表格的主要作用：

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。

总结：表格不是用来布局页面的，而是用来展示数据的。

表格的基本语法

表格属性

表格标签这部分属性我们实际开发不太常用，后面通过 CSS 来设置

目的有 2 个：

1、记住这些英语单词，后面CSS 会使用

2、直观感受表格的外观形态

合并单元格

合并单元格方式：

1、跨行合并：rowspan =”合并单元格个数”

2、跨列合并：colspan =” 合并单元格个数”

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

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

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

合并单元格三部曲：

1、先确定是跨行还是跨列合并。

2、找到目标单元格：写上合并方式 = 合并的单元格数量。例如：<td colspan= ” 2 ” >

3、删除多余的单元格。

表格总结

1、表格的相关标签

我们学习了: table标签 tr 行 标签 td 单元格标签 th 表头单元格 标签 thead
表格头部区域标签 tbody 表格主体区域标签

2、表格的相关属性

3、合并单元格

②列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表最大特点就是整齐、整洁、有序，他作为布局会更加自由方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

1.无序列表 （重点）

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

• 标签定义。

• 无序列表的基本语法格式如下：

1、无序列表的各个列表项之间没有顺序级别之分，是并列的。

2、<ul></ul> 中只能嵌套 <li></li> 直接在 <ul></ul> 标签中输入其他标签或者文字做法是不被允许的。

3、<li></li> 之间相等于一个容器，可以嵌套所有元素。

4、无序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS 来设置。

2、有序列表 （理解）

有序列表即为有顺序的列表，其各个列表项会按照一定的顺序排列定义。

在HTML标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。

有序列表的基本语法格式如下：

1、<ol></ol> 中只能嵌套 <li></li>直接在<ol></ol>标签中输入其他标签或者文字做法是不被允许的。

2、<li></li> 之间相等于一个容器，可以嵌套所有元素。

3、有序列表会带有自己的样式属性，但在实际使用中，我们会使用CSS 来设置。

3、自定义列表 （重点）

在HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与<dt> (定义项目/名字)和

<dd> (描述每一个项目/名字)一起使用。

其基本语法如下：

1、<dl></dl> 里面只能包含 <dt></dt> 和 <dd></dd>

2、<dt> 和 <dd>个数没有限制，经常是一个<dt> 应对多个 <dd>。

列表总结

♥ 表单标签

1、表单的组成：

表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息 3 个部分构成。

1.1表单域

表单域是一个包含表单元素的区域。

在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。

会把它范围内的信息提交给服务器。

1.2常用属性：

注：我们暂时不用表单域提交数据，只需要写上form 标签即可

1.3表单控件（表单元素）

在英语单词中，input 是输入的意思，而在表单元素中， <input> 标签用于收集用户信息。

在<input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多中形式（可以是文本字

段、复选框、掩码后的文本控件、单选按钮、按钮等）

1、 <input/> 标签为但标签

2、type 属性设置不同的属性值用来指定不同的控件类型。

1.4<input> 表单元素

除 type 属性外， 标签还有其他很多属性，其常用属性如下：

1、name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。

2、name 表单元素的名字，要求 单选按钮 和 复选框要有相同的 name 值。

3、checked 属性主要针对单选按钮和复选框，主要作用打开页面，就可以默认选中表单元素

1.5<label> 标签

<labrl> 标签为 input 元素定义标注（标签）

<label> 标签用于绑定一个表单元素，当点击<label> 标签内的文本时，浏览器就会自动将焦点（光标）转到

或者选择应对的表单元素上，用来增加用户体验。

语法：

<label for=”sex”> 男 </label>

<input type=”radio“ name=”sex” id=”sex”/> 

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

1.6表单控件（表单元素）
<select> 表单元素

在页面中，如果有多个选项让用户选择，并且想要节约空间时，我们可以使用 标签控件定义 下拉列表。

语法：

1、<select> 中至少包含一对 <option>

2、在<option> 中定义 selected = “selected” 时，当前项即为默认选中项。

<textarea> 表单元素

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见与留言板，评论。

语法：

1、通过 <textarea> 标签可以轻松的创建 多行文本输如框。

2、cols =”每行中字符数量” ， rows =“ 显示的行数” ，我们在实际开发中不会使用，都是用CSS来改变大小。

♥ 查阅文档

经常查阅文档是一个非常好的学习习惯
推荐的网址：
百度：https://www.baidu.com
W3C：https://www.runoob.com （俗称菜鸟教程）
MDN：https://developer.mozilla.org/zh-CN

小弟是个新手，有不对的欢迎指正，谢谢啦！