（一）HTML简介

1. 网页

1.1 什么是网页

网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。

网页是构成网站的基本元素。

网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。

1.2 什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言（markup language）。 标记语言是一套标记标签（markup tag）。

超文本的含义：

  1. 它可以加入图片、声音、动画、多媒体等内容（超越文本限制）。
  2. 它可以从一个文件跳转到另一个文件，于世界各地主机的文件连接（超级链接文本）。

1.3 网页的形成

网页由网页元素组成，这些元素通过html标签描述出来，然后通过浏览器解析并显示出来。

2. 常用浏览器及其内核

2.1 常用浏览器

浏览器是网页显示、运行的平台。

五大浏览器有 IE、Firefox、Chrome、Safari 和 Opera。

四大内核：Trident, Gecko, Webkit, Blink

2.2 浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360、百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink chrome/opera 浏览器内核

3. Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

3.1 为什么需要Web标准

浏览器不同，它们显示的页面或者排版有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

  1. 让Web标准发展前景更为广阔
  2. 内容能被更广泛的设备访问。
  3. 更容易被搜索引擎了搜索。
  4. 降低网站流量费用。
  5. 易于维护。
  6. 提高页面浏览速度。

3.2 Web标准的构成

标准 说明
结构 结构对网页元素进行整理和分类，现阶段主要是HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要是指CSS
行为 行为是指网页模型的定义以及交互的编写，现阶段主要是JS

Web标准提出的最佳体验方案：结构、表现、行为相分离。

（二）HTML 标签（上）

1. HTML 语法规范

1.1 基本语法规范

  1. HTML 标签是由尖括号包围的关键词，例如<html>。
  2. HTML 标签通常是成对出现的，例如<html>和<html/>，称为双标签。第一个是开始标签，第二个是结束标签。
  3. 有些特殊标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签。

1.2 标签关系

标签关系可以分为两类：包含关系和并列关系

2. HTML 基本结构标签

每个网页都会有一个基本的结构标签，页面内容都是在这些基本标签上书写。 HTML 页面也叫 HTML 文档。

3. 开发工具

3.1 文档类型声明标签

!<DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。

1
<!DOCTYPE html>

这句话的意思是：当前页面采用的是 HTML5 版本来显示网页。 注意：

  1. <!DOCTYPE> 声明位于文档最前面的位置，处于<html>标签之前。
  2. <!DOCTYPE> 不是一个 HTML 标签，他就是文档类型声明标签。

3.2 lang 语言种类

用来显示当前文档显示的语言。

1
2
3
<html lang="zh-CN">
  <html lang="en"></html>
</html>
  1. en 定义语言为英文。
  2. zh-CN 定义语言为中文。

这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。

3.3 charset 字符集

1
<meta charset="UTF-8" />

字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。

charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

4. HTML 常用标签

4.1 标签语义

标签语义就是标签的含义。

根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。

4.2 标题标签 h1-h6（重要）

为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。

1
2
3
4
5
6
7
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

单词为 head 简写，从 h1-h6 依据重要性递减。

4.3 段落和换行标签（重要）

p 指paragraph，意为段落。把文字有条理的显示出来就需要将文字分段显示。在 html 中，<p> 标签用于定义段落，将整个网页分成若干个段落。

我是一个段落标签

标签语义: 把 HTML 文档分割为若干段落。

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。

<br/> 是 break 缩写，意为打断、换行。

标签语义： 强制换行

特点：

  1. <br/> 是个单标签。
  2. <br/> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

课堂案例

体育新闻显示页面——基本标签的使用

4.4 文本格式化标签

在网页中，有时候需要为文字设置粗体、斜体或下划线等效果，需要使用 HTML 中的文本格式化标签，使文字以特殊方式显示。

标签语义： 突出重要性，比普通文字重要。

语义 标签 说明
加粗 <strong></strong>或<b></b> 更推荐<strong>，语义更强烈
斜体 <em></em>或<i></i> 更推荐使用<em>，语义更强烈
删除线 <del></del>或<s><s/> 更推荐使用<del>，语义更强烈
下划线 <ins></ins>或<u></u> 更推荐使用<ins>，语义更强烈

4.5 div 和 span 标签

和 是没有语义的，它们是一个盒子，用来装内容的。 
1
2
<div>这是头部</div>
<span>今日价格</span>

div 是 division 的缩写，表示分割、分区。span 意思是跨度、跨距。

特点：

  1. div 标签用来布局，但是现在一行只能放一个 div，大盒子。
  2. span 标签用来布局，一行可以多个 span，小盒子。

4.6 图像标签和路径（重点）

4.6.1 图像标签

在 HTML 标签中，<img /> 标签用于定义 HTML 标签页面中的图像。

1
<img src="图像url" />

单词 image 的缩写，意为图像。

src 是标签的 必须属性，用于指定图像文件的路径和文件名。

属性： 属于这个图像标签的特性。

图像标签的其他属性

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，当图片不显示时显示文字
title 文本 提示文本。鼠标放到图像上显示文字
width 像素 图像宽度
height 像素 图像高度
border 像素 图像边框粗细

4.6.2 路径

  • 相对路径
  • 绝对路径
1. 相对路径

相对路径： 以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。

分类 符号 说明
同级路径 同一级
下一级路径 / 位于 HTML 文件上一级
上一级路径 ../ 位于 HTML 文件下一级
2. 绝对路径

绝对路径： 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或者完整的网络地址。

4.7 超链接标签

在 HTML 标签中，<a/> 标签用于从一个页面链接到另一个页面。

4.7.1 链接的语法格式

a 是单词 anchor 的简写，是锚的意思。

1
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性

属性 作用
href 指定链接地址 url，为必须属性。
target 指定页面打开方式，_self为默认值，_blank为在新窗口中打开

4.7.2 超链接分类

  1. 外部链接

  2. 内部链接：网站内部页面之间的相互链接。

  3. 空链接: #

  4. 下载链接：地址链接的是文件.exe、压缩包.zip 等。

  5. 网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。

  6. 锚点链接：

    点击链接，可以快速定位到页面中的某个位置。

    • 在链接文本的href属性中，设置属性为 #名字的形式
    • 找到目标位置标签，里面添加一个 id 属性 = 名字

Tip

阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;。

5. HTML 中的注释和特殊字符号

  1. 注释: <!--注释--> VSCode 中快捷键：Ctrk + /
  2. 字符实体
字符 显示
空格
< ＜
> ＞
© ©

（二）HTML 标签（下）

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。 表格不是来布局的，而是来展示数据的。

1.2 表格基本语法

  1. <table></table> 用于定义表格的标签。
  2. <tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
  3. <td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
  4. 字母 td 指表格数据（table data），即单元格的内容。

1.3 表头单元格标签 th

一般单元格位于表格的第一行或第一列，表格单元格里面的文本内容 加粗显示。 <th> 标签表示 HTML 表格的表头部分（table head 的缩写） 表头单元格(<th>)也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1.4 表格属性

只作了解，后期通过 CSS 来设置。 这些属性都要写到 <table></table> 标签中

属性名 属性值 描述
align left、center、right 表格元素对齐方式
border 1 或"" 规定是否有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间空白，默认 1px
cellspacing 像素值 规定单元格之间的空白，默认为 2px
width 像素值或百分比 规定表格宽度
hight 像素 表格高度

1.5 表格结构标签

场景：表格可能很长，将表格分割为表格头部和表格主题两大部分。

加强语义化：<thead> 表示头部区域，<tbody> 表示主体区域，更好区分表格结构。

注意：

  1. <thead></thead>：定义表格头部，且内部必须有<tr>标签。
  2. <tbody></tbody>：定义表格主体，存放数据。
  3. 以上标签都放在 <table></table> 里面。

1.6 合并单元格

合并单元格方式：

  • 跨行合并：rowspan=“合并单元格个数”
  • 跨列合并：colspan=“合并单元格个数”

合并三部曲：

  1. 确定跨行 or 跨列。
  2. 找到目标单元格：跨行取最上面为目标单元格，跨列取最左边为目标单元格。<td colspan="2"></td>
  3. 删除多余单元格。

2. 列表标签

表格展示数据，列表则用来布局。 列表特点是整齐、整洁、有序，作为布局更方便自由。 根据使用场景不同，列表分为三大类：

  • 无序列表
  • 有序列表
  • 自定义列表。

2.1 无序列表（重要）

<ul> 标签标识 HTML 页面项目中的无序列表，一般以项目符号呈现列表项。

语法格式:

1
2
3
4
5
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

注意:

  1. 各个列表项之间无需，并列关系。
  2. <ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。
  3. 无序列表带有自己的属性，可用 CSS 修改样式属性。

2.2 有序列表（理解）

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

1
2
3
4
5
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

与无需列表类似，有自己的样式属性，通过 CSS 设置。

2.3 自定义列表（重点）

<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。

基本语法：

1
2
3
4
5
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

注意

  1. dl 里面只能包含 dt 和 dd。

3. 表头标签

3.1 为什么需要表头

收集用户信息。 和用户进行交互，收集用户资料。

3.2 表头组成

  • 表单域
  • 表单控件（元素）
  • 提示信息

3.3 表单域

表单域是一个包含表单元素的区域。 使用 <form> 标签用于定义表单域，手机和传递用户信息。 form 标签会将它范围内的表单元素信息提交给服务器。

目前而言，暂时不需要用表单域提交数据，只需要写上 form 标签即可。

语法格式

1
2
3
<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

常用属性：

属性 属性值 作用
action url 地址 指定接受并处理表单数据的服务器的 url 地址
method get/post 设置表单数据的提交方式
name 名称 用于指定表单名称，区分同一个页面中的多个表单域

注意：

  1. 写表单元素之前需要有表单域将其包含。
  2. 表单域是 form 标签。

3.4 表单控件（表单元素）

在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。

3.4.1 `` 表单元素

<input> 标签用于收集用户信息。

input 标签包含 type 属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

1
<input type="属性值" />
  • input 标签为单标签
  • type 属性设置不同属性值来指定不同控件类型

type 常用属性值

属性值 描述
button 定义可点击按钮
checkox 复选框
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段。字符被掩码。
radio 定义单选按钮
reset 定义重置按钮，清除表单所有数据。
submit 定义提交按钮。重置按钮会清除表单所有数据。
text 定义输入字段。用户可输入文本，默认宽度为 20 个字符。

input 的其他属性

属性 属性值 描述
name 自定义 定义 input 元素名称
value 自定义 规定 input 元素的值
checked checked 规定此 input 元素首次加载时应当被选中
maxlength 正整数 规定输入字段字符的最大长度

注意

  1. 对于 radio 单选框，必须使 input 的 name 具有相同的属性值，才能实现多选一。 同理，复选框也要有相同的name值。
  2. 单选框和复选框可以设置 checked 属性，页面打开默认选择按钮。
  3. 设置 type 的值为 submit，点击按钮后可以把表单域 form 里面的表单元素里面的值提交给后台。
  4. 设置 type="button"，普通按钮，后期结合 js 使用

3.4.2 label 标签

<label> 标签为 input 元素定义标注。 <label> 标签用于绑定一个表单源深路，当点击 label 标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上，提升用户体验。 语法：

1
2
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心： <lable>标签的 for 属性与相关元素的 id 属性相同。

3.4.3 select 下拉表单元素

select 标签设置多个选项让用户选择，节约页面空间。 语法

1
2
3
4
5
<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

注意

  1. select 中至少包含一对 option。
  2. 在 option 中定义属性selected=selected，当前项即为默认选项。

3.4.4 textarea 文本域表单元素

场景：输入内容较多时。

语法：

1
2
3
<textarea rows="3" cols="20">
    文本内容
</textarea>

Tip

> cols="每行字符数"，rows="显示的行数"