前端开发学习——HTML学习

一、列表

HTML 支持有序、无序和定义列表:

1、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul>标签包裹<li> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示结果如下：

• Coffee
• Milk

2、有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器运行结果如下：

1. Coffee
2. Milk

3、自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee
- black hot drink
Milk
- white cold drink

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定义列表的描述

二、表格

1、表格的使用

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

• tr：tr 是 table row 的缩写，表示表格的一行。
• td：td 是 table data 的缩写，表示表格的数据单元格。
• th：th 是 table header的缩写，表示表格的表头单元格。具有加粗效果。

<table>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
</table>

以上的表格实例代码中，<table> 元素表示整个表格，<tr>表示表格的一行，<td>表示每一个单元格， <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

2、表格的边框

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性（border属性）来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

3、表格标题和表头单元格

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

浏览器显示结果如下：

4、表格结构标签（了解）

为了让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰，引入表格的结构标签。

• <thead>表示表格的头部
• <tbody>表示表格的主体
• <tfoot>表示表格的底部

表格结构标签内部用于包裹tr标签

表格的结构标签可以忽略

5、合并单元格

合并单元格步骤：

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁(上下合并——保留最上的，删除其他    左右合并——保留最左的，删除其他)
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。

学生成绩单示例：

<table border="1" width="500" height="300">
        <caption><h3>优秀学生信息表格</h3></caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>111</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tr>
    </table>

 浏览器运行结果：

三、表单

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

表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。

我们可以使用 <form> 标签来创建表单:

<form>
.
input 元素
.
</form>

1、input系列标签

使用场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input，input标签可以通过type属性值的不同，展示不同效果。

type属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文本选择，用于上传文件
submit	提交按钮，用于提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能，之后配合js添加功能

代码示例：

<!-- 预表单 -->
    <form action="">
        文本框：<input type="text">
        <br>
        <br>
        密码框：<input type="password">
        <br>
        <br>
        单选框：<input type="radio" name="gender">
        <br>
        <br>
        多选框：<input type="checkbox">
        <br>
        <br>
        上传文件：<input type="file">
        <br>
        <br>
        <!-- 与以上内容相关的按钮 -->
        <input type="submit">
        <input type="reset">
        <input type="button">
    </form>

浏览器显示结果：

2、input占位符（提示信息）

在文本框或密码框中用于提示输入信息的文本。属性名：placeholder

文本框：<input type="text" placeholder="请输入用户名">
        <br>
        <br>
        密码框：<input type="password" placeholder="请输入密码">

浏览器显示结果：

 

3、单选功能和默认选中

场景：在网页中显示多选一的表单控件

type属性值：radio

常用属性：

属性名	说明
name	分组。有相同name属性值的单选框为一组，一组中同时选中只能有一个被选中
checked	默认选中

注意：

• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中 

性别：<input type="radio" name="gender">男
     <input type="radio" name="gender" checked>女
     <br>
     <br>
多选框：<input type="checkbox" checked>同意条款

浏览器显示结果：

 

为了追求更好的用户体验，我们通常在设计单选框时添加<label>标签，使得用户点击选项旁的文字时也能选中该选项。

<label>标签常用于绑定内容与表单标签的关系，其添加有两种方式：

代码实现：

性别：<input type="radio" name="gender" id="nan"><label for="nan">男</label>
       <label><input type="radio" name="gender" checked>女</label>
        

4、上传多个文件 

上传文件的type属性值为file，上传多个文件只需添加属性：multiple

上传文件：<input type="file" multiple>

5、按钮—input

• 如需实现按钮功能，需要配合form标签使用
• form标签使用方法：用form标签把表单标签一起包裹起来即可

代码示例：

<input type="submit">
<input type="reset">
<input type="button">

浏览器显示结果： 

• submit即提交按钮，用于提交
• reset即重置按钮，用于重置
• button为普通按钮，功能需配合js实现

如需在按钮中添加代表其功能的名称，需使用value属性

<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">

 浏览器显示效果：

6、按钮—button

场景：在网页中显示用户点击的按钮

标签名：button

type属性值（同input的按钮系列）： 

标签名	type属性值	说明
button	submit	提交按钮。点击之后移交数据给后端服务台
button	reset	重置按钮。点击之后恢复表单默认值
button	button	普通按钮。默认无功能，配合js添加功能

注意：

• 谷歌浏览器中button默认是提交按钮
• button标签时双标签，更便于包裹其他内容：文字、图片等

<button>提交</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">没有任何功能的按钮</button>

浏览器显示效果： 

7、下拉菜单

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

常见属性：

• selected：下拉菜单的默认选中

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

浏览器显示效果：

 

8、文本域

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

• cols：规定文本域宽度
• rows：规定文本域行数（高度）

注意：

• 右上角可以拖拽改变大小
• 实际开发中针对样式效果推荐使用css

<!-- 文本域标签,其高度和宽度通常在css中设置 -->
     <textarea></textarea>

浏览器显示效果：

四、语义化标签

1、没有语义的标签

注：在实际应用场景中，会大量使用。

<!-- 没有语义的标签 -->
<!-- div标签独占一行 -->
<div>这是div标签</div>
<!-- span标签不独占一行 -->
<span>这是span标签</span>

 2、有语义的标签—手机端（了解）

<!-- 有语义的标签--手机端 -->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

五、字符实体 

字符实体能在网页中显示特殊符号

1、HTML中的空格合并现象

我现在在学          习字符实体。
<br>
<!-- 网页不认识多个空格 -->
我现在在学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体。

浏览器显示效果：

 

2、常见的字符实体(了解)

 以上是HTML基础标签内容，欢迎补充和指正。