HTML03-进阶

1.列表

1.1 无序列表</ul>

</li>是列表条目

示例代码：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

效果演示：

</ul>标签里面只能包裹</li>标签，</li>标签里面可以包裹任何内容

1.2 有序列表</ol>

示例代码：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

效果演示：

</ol>标签里面只能包裹</li>标签，</li>标签里面可以包裹任何内容

1.3 定义列表</dl>

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

</dl>里面只能包含</dt>和</dd>,</dt>和</dd>里面可以包含任何内容

2.表格</table>

2.1 基本使用

</table>嵌套</tr>，</tr> 嵌套 /<td> 或 </th>。

表格默认没有边框线，使用 border 属性可以为表格添加边框线。

示例代码：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td>60</td>
    <td>80</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>60</td>
    <td>80</td>
    <td>100</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>77</td>
    <td>99</td>
    <td>88</td>
  </tr>
</table>

效果演示：

有border属性：

无border属性：

2.2 合并单元格

1. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
   • 跨行合并，保留最上单元格，添加属性 rowspan
   • 跨列合并，保留最左单元格，添加属性 colspan
2. 删除其他单元格

跨行合并：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td rowspan="2">60</td>
    <td>80</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>60</td>
    <!-- <td>80</td> -->
    <td>100</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>77</td>
    <td>99</td>
    <td>88</td>
  </tr>
</table>

效果演示：

跨列合并：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>100</td>
    <td rowspan="2">60</td>
    <td>80</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>60</td>
    <td>80</td>
    <td>100</td>
  </tr>
  <tr>
    <td>王五</td>
    <td colspan="2">77</td>
    <!-- <td>99</td> -->
    <td>88</td>
  </tr>
</table>

效果演示：

3.表单

3.1 <input>标签

input 标签 type 属性值不同，则功能不同。

3.2 占位文本placeholder属性

文本框和密码框都可以使用。

示例代码：

<input type="text" placeholder="aaaaaa">
<input type="password" placeholder="aaaaaa">

效果演示：

3.3 单选框radio

常用属性

示例代码：

<input type="radio" name="gender" checked> 男<br>
<input type="radio" name="gender"> 女<br>
<input type="radio" name="gender"> 无

效果演示：

3.4 上传文件file

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

示例代码：

<input type="file" multiple>

效果演示：

3.5 多选框checkbox

默认选中：checked

示例代码：

<input type="checkbox" checked>唱歌<br>
<input type="checkbox" checked>跳舞<br>
<input type="checkbox">运动<br>
<input type="checkbox">游戏<br>

效果演示：

3.6 下拉菜单</select>

</select>是下拉菜单整体，</option>是下拉菜单的每一项。

默认显示第一项</option>

示例代码：

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

效果演示：

3.7 文本域</textarea>

作用：多行输入文本的表单控件。

示例代码：

<textarea>aaaaaaa</textarea>

效果演示：

拓展：
实际开发中，使用 CSS 设置 文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

3.8 </label>标签

作用：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一：

• </label>标签只包裹内容，不包裹表单控件
• 设置</label>标签的for属性值 和表单控件的id属性值相同

写法二：使用 label 标签包裹文字和表单控件，不需要属性

代码示例：

<input type="radio" id="man"><label for="man">男</label>
<label><input type="radio">女</label>

支持</label>标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

3.9 按钮</button>

按钮需配合 form 标签（表单区域）才能实现对应的功能,要不然不知道你要提交什么内容

示例代码：

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>

  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

效果演示：

4.布局标签

div：独占一行

span：不换行

代码示例：

<div>我是div标签</div><div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>

效果演示：

有语义的布局标签:

5.字符实体

字符实体（Character Entity）是HTML和XML中用于表示特殊字符的一种方式。

在Web开发中，有些字符在HTML或XML文档中有特殊的含义，比如尖括号 (< 和 >) 会被解析器误认为是标签的开始。
为了在HTML或XML文档中正确显示这些特殊字符，开发者可以使用字符实体。

字符实体由一个前缀 &，实体名或实体编号，以及一个后缀 ; 组成。

预定义的字符实体：
这些是HTML和XML中预先定义好的实体，用于表示特定的字符。例如：

• < 表示<（小于号）

• > 表示>（大于号）

• & 表示&（和号，用于实体的开始）

• " 表示"（双引号）

• ' 表示'（单引号）

数字实体：
这些实体允许你通过Unicode编码来指定一个字符,有两种格式：

• 十进制数字实体，例如©表示版权符号 ©
• 十六进制数字实体，例如©也是表示版权符号 ©

命名实体：
除了预定义的实体外，还可以使用任何有效的Unicode字符名.
例如Ω表示希腊字母Ω。