HTML基础：列表、超链接、表格与表单解析

"这是关于Web前端开发HTML基础知识的课件，主要涵盖了列表、超链接、表格和表单等核心概念。" 在HTML中，列表是一种组织信息的重要方式，分为无序列表（unordered list）和有序列表（ordered list）两种类型。 1. 无序列表（ul）：使用`<ul>`标签创建，它包含一系列的列表项（list item），每个列表项由`<li>`标签定义。例如： ```html <ul> <li>列表项1</li> <li>列表项2</li> </ul> ``` 列表项可以嵌套，形成多级列表。 2. 有序列表（ol）：与无序列表相似，但每个列表项前会带有数字或字母标记，表示顺序。同样使用`<ol>`和`<li>`标签，但可以通过`type`属性改变标记类型，如`type="1"`（默认）、`type="a"`（小写字母）、`type="A"`（大写字母）、`type="i"`（小写罗马数字）、`type="I"`（大写罗马数字）。此外，`reversed`属性可使列表倒序显示，`start`属性用于设置列表开始的编号。 3. 定义列表（dl）：不同于普通列表，定义列表`<dl>`用于表示术语和其定义。`<dt>`表示术语（defined term），`<dd>`表示定义（defined description）。 ```html <dl> <dt>术语1</dt> <dd>定义1</dd> <dt>术语2</dt> <dd>定义2</dd> </dl> ``` 列表样式（list-style）包括`list-style-type`、`list-style-position`和`list-style-image`三个属性，控制列表项前面的标记类型、位置以及是否使用自定义图像。例如，`list-style-type`可设为`none`（无标记）、`disc`（实心圆点）、`circle`（空心圆圈）、`square`（实心方块）等。`list-style-position`可以是`inside`（标记内侧）或`outside`（标记外侧）。 超链接（hyperlink）在HTML中通过`<a>`标签实现，它定义了页面间的链接关系。例如： ```html <a href="http://example.com">链接文本</a> ``` 链接可以指向其他网页、文件、邮箱地址，甚至书签内部定位。 表格（table）是HTML中展示数据的有效方式，由`<table>`、`<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）组成。例如： ```html <table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table> ``` 表格还支持`<caption>`（标题）、`<colgroup>`（列组）、`<thead>`（表头部分）、`<tbody>`（主体部分）和`<tfoot>`（脚部部分）等元素，以实现更复杂的布局。 表单（form）用于用户输入数据，通常结合`<input>`、`<select>`、`<textarea>`、`<button>`等元素使用。`<form>`标签包含表单控件，并通过`action`属性指定提交数据的URL，`method`属性决定提交方式（GET或POST）。例如： ```html <form action="submit.php" method="POST"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> </form> ``` 表单还支持验证，如`required`属性确保字段非空，`pattern`属性定义输入格式等。 这些HTML基础知识是前端开发的基石，理解和掌握它们对于构建动态、交互式的网页至关重要。