开发环境搭建

安装VSCode

VSCode是一个文本编辑器，使用它来编辑HTML代码。

安装插件

open in browser

右键点击 HTML 文件，通过插件直接在浏览器中打开HTML文件。

快捷键：Alt+B

安装谷歌浏览器

通过浏览器预览和调试HTML文件。

HTML

HTML——HyperText Markup Language（超文本标记语言）

超文本——链接
标记——标签

标签语法

标签成对出现，中间包裹内容
<>存放标签名
结束标签的标签名前需要加/

HTML的基本结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

html：整个网页
head：网页头部
body：网页主体
title：网页标题

VSCode中生成HTML基本结构的快捷方式

英文状态下的!加上Enter或Tab键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签之间的关系

嵌套
并列

列表标签

无序列表

使用<ul>标签定义无序列表，使用<li>标签定义每个列表项。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

有序列表

使用<ol>标签定义有序列表，使用<li>标签定义每个列表项。

<ol>
  <li>语文</li>
  <li>数学</li>
  <li>英语</li>
</ol>

修改序号样式

可以通过type属性修改有序列表的样式。

type="1"：数字（默认）
type="A"：大写字母
type="a"：小写字母
type="I"：大写罗马数字
type="i"：小写罗马数字

定义列表

使用 <dl>标签定义列表，使用<dt>标签定义标题，使用<dd>标签定义描述。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于开发动态交互的网页。</dd>
</dl>

注意

<dl>里面只能包含<dl>和<dd>。
<dl>和<dd>里面可以包含任意内容。

表格标签

基本表格结构

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>工程师</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>设计师</td>
  </tr>
</table>

<table>定义表格，<tr>定义行，th定义表头单元格，<td>定义数据单元格。

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

表格结构标签

<thead>：定义表格头部。
<tbody>：定义表格主体。
<tfoot>：定义表格尾部。

合并单元格

合并行（纵向合并）

使用 rowspan 属性，合并的单元格数由 rowspan 的值决定。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>李华</td>
        <td>19</td>
        <td rowspan="2">97</td>
    </tr>
    <tr>
        <td>李明</td>
        <td>18</td>
        <!-- <td>97</td> -->
    </tr>
</table>

合并列（横向合并）

使用colspan属性，合并的单元格数由 colspan 的值决定。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>李华</td>
        <td>19</td>
        <td rowspan="2">97</td>
    </tr>
    <tr>
        <td>李明</td>
        <td>18</td>
        <!-- <td>97</td> -->
    </tr>
    <tr>
        <td>总结</td>
        <td colspan="2">优秀</td>
    </tr>
</table>

表单

输入框

1	<input type="">

type属性

通过type属性定义输入框的类型

text

文本输入框 (type="text")
password

密码输入框 (type="password")

输入的内容会被掩盖（通常显示为星号或圆点）。
radio

单选按钮 (type="radio")

同一组单选按钮的 name 必须相同，用户只能选择一个。
checkbox

复选框 (type="checkbox")
file

文件上传框 (type="file")

placeholder属性

通过placeholder属性作为输入框的占位提示信息，用户未输入时显示。

1	<input type="text" placeholder="请输入">

name属性

主要用于标识表单字段的名称，在表单提交时，name 属性的值会作为键，输入的值作为对应的值提交。

checked属性

checked 属性是 HTML 表单元素中专门用于 单选按钮（<input type="radio">） 和 复选框（<input type="checkbox">） 的布尔属性。它用来预先设置某个选项为“选中”状态。

1 2	<input type="radio" name="group_name" checked> <input type="checkbox" name="field_name" checked>

multiple属性

multiple 属性允许用户在某些输入元素中选择多个值。它通常用于文件上传、选择框和电子邮件地址输入。

1	<input type="file" name="files" multiple>

下拉菜单

使用<select>定义下拉菜单，使用<option>定义下拉菜单中的每个选项，在 <option> 中添加 selected 属性可以设置默认选中值，如果未设置则默认第一个选项是默认选中值。

<select name="field_name" id="field_id">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

文本域标签

文本域标签用于创建多行的文本输入框，用户可以在其中输入较长的文本内容，如留言、评论等。

使用<textarea>定义文本域，标签之间的内容是默认显示的初始文本。

1	<textarea name="field_name" id="field_id" rows="行数" cols="列数"></textarea>

label标签

<label> 标签用于为 HTML 表单元素定义标签。它可以通过 for 属性绑定到一个表单控件，或者直接将表单控件嵌套在 <label> 标签内。

基本语法

使用for属性绑定控件

for 属性的值需要与目标表单控件的 id 一致。

1 2	<label for="username">用户名：</label> <input type="text" id="username" name="username">

嵌套控件

直接将表单控件嵌套在 <label> 标签内。

<label>
  密码：
  <input type="password" name="password">
</label>

按钮

按钮主要用于用户交互，可以触发表单提交、运行 JavaScript 脚本，或者执行其他操作。

1	<button>普通按钮</button>

常用属性

button

普通按钮，默认没有功能，配合JavaScript使用。
submit

点击后提交数据到后台。
reset

重置按钮，点击后将表单控件恢复默认值。

form标签

<form> 标签是用于创建 HTML 表单的容器。表单用于收集用户输入，并通过提交将数据发送到服务器进行处理。