从零开始的前端—HTML 02

寈嵐

已于 2022-06-15 16:51:28 修改

阅读量87

点赞数

文章标签： html 前端

于 2022-06-14 16:44:11 首次发布

本文链接：https://blog.csdn.net/anranyumeng/article/details/125280688

版权

（二）网页的结构

1. 文档声明（doctype）

文档声明用来告诉浏览器当前网页的版本

<!-- html5的文档声明 -->
<!doctype html>
<!-- 或者 -->
<!Doctype HTML>

1.1 字符编码

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。

所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

编码

将字符转换为二进制码的过程称为编码

解码

将二进制码转换为字符的过程称为解码

字符集（charset）

编码和解码所采用的规则称为字符集（相当于密码本）

乱码

如果编码和解码所采用的字符集不同就会出现乱码问题。

可以通过meta标签来设置网页的字符集，避免乱码问题

<meta charset="utf-8">

1.2 常见的字符集

ASCII

ASCII(American Standard Code for Information Interchange)：美国信息交换标准代码

在所有字符集中，最知名的可能要数被称为ASCII的8位字符了。美国信息交换标准代码是由美国国家标准学会(American National Standard Institute , ANSI )制定的，是一种标准的单字节字符编码方案，用于基于文本的数据。它最初是美国国家标准，供不同计算机在相互通信时用作共同遵守的西文字符编码标准，后来它被国际标准化组织（International Organization for Standardization, ISO）定为国际标准，称为ISO 646标准。适用于所有拉丁文字字母

ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。标准ASCII 码也叫基础ASCII码，使用7 位二进制数（剩下的1位二进制为0）来表示所有的大写和小写字母，数字0 到9、标点符号，以及在美式英语中使用的特殊控制字符

ASCII码表：Ascii Table - ASCII character codes and html, octal, hex and decimal chart conversion

ISO-8859-1

ISO-8859-1编码是单字节编码，向下兼容ASCII，其编码范围是0x00-0xFF，0x00-0x7F之间完全和ASCII一致，0x80-0x9F之间是控制字符，0xA0-0xFF之间是文字符号。

ISO码表：HTML ISO-8859-1 参考手册

GB2312

GB2312（信息交换用汉字编码字符集）是由中国国家标准总局1980年发布。基本集共收入汉字6763个和非汉字图形字符682个。GB 2312的出现，基本满足了汉字的计算机处理需要，它所收录的汉字已经覆盖中国大陆99.75%的使用频率。

GBK

GBK（即“国标”、“扩展”汉语拼音的第一个字母），汉字编码字符集。2000年已被GB18030-2000国家强制标准替代。 2005年GB18030-2005发布，替代了GB18030-2000。

GBK使用了双字节编码方案，其编码范围从8140至FEFE（剔除xx7F），共23940个码位，共收录了21003个汉字，完全兼容GB2312-80标准，支持国际标准ISO/IEC10646-1和国家标准GB13000-1中的全部中日韩汉字，并包含了BIG5编码中的所有汉字。

Big5

Big5，又称为大五码或五大码，是使用繁体中文（正体中文）社区中最常用的电脑汉字字符集标准，共收录13,060个汉字。

Big5虽普及于台湾、香港与澳门等繁体中文通行区，但长期以来并非当地的国家/地区标准或官方标准，而只是业界标准。倚天中文系统、Windows繁体中文版等主要系统的字符集都是以Big5为基准，但厂商又各自增加不同的造字与造字区，派生成多种不同版本。

UTF-8

UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码，也叫万国码、统一码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无须或只进行少部分修改后，便可继续使用。

UTF-16

UTF-16是Unicode的其中一个使用方式。UTF-16比起UTF-8，好处在于大部分字符都以固定长度的字节（2字节）储存，但UTF-16却无法兼容于ASCII编码。

Unicode

Unicode只是一组字符设定或者说是从数字和字符之间的逻辑映射的概念编码，但是它并没有指定代码点如何在计算机上存储。UCS4、UTF-8、UTF-16（UTF后的数字代表编码的最小单位，如UTF-8表示最小单位1字节，所以它可以使用1、2、3字节等进行编码，UTF-16表示最小单位2字节，所以它可以使用2、4字节进行编码）都是Unicode的编码方案。UTF-8因可以兼容ASCII而被广泛使用。

如果把各种文字编码形容为各地的方言，那么Unicode就是世界各国合作开发的一种语言。

2. HTML 语法规范

2.1 基本语法规范

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

2.2 标签关系

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

2.3 基本结构标签

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

3. 开发工具

3.1 文档类型声明标签

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

<!DOCTYPE html>

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

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

3.2 lang 语言种类

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

<html lang="zh-CN">
  <html lang="en"></html>
</html>

en 定义语言为英文。
zh-CN 定义语言为中文。

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

3.3 charset 字符集

<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>。

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

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

HTML5 提供的新语义元素有：

标签	作用	描述
`<header>`	页眉	介绍性的内容
`<footer>`	页脚	通常包含有关作者的信息、版权或文件链接
`<nav>`	导航链接	可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引
`<main>`	文档主内容	中心主题直接相关或扩展的内容
`<article>`	文章	自成一体，独立分发，可重复使用
`<section>`	文档中的节	没有一个更具体的语义元素来代表
`<aside>`	页面内容以外的内容	其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现
`<mark>`	重要或强调的文本	为参考或记事目的而被标记或突出的文本，表明其相关性和重要性
`<summary>`	`<details>` 标题	为`<details>` 指定一个摘要、标题或图例。点击`<summary>` 可以切换`<details>` 打开和关闭
`<details>`	用户能够查看或隐藏的额外细节	其中的信息只有被切换到 "打开 "状态时才可见。必须使用`<summary>` 提供一个摘要或标签
`<figure>`	自包含内容	独立的内容，用`<figcaption>` 元素指定一个可选的标题。比如图示、图表、照片、代码清单等
`<figcaption>`	`<figure>` 的标题	描述其父元素
`<time>`	定义日期/时间	可能包括`datetime` 属性，将日期翻译成机器可读的格式，以便获得更好的搜索引擎结果或自定义功能。如提醒

这些新语义标签在视觉效果上基本上没有什么区别

4.3 段落标签和换行标签 (重要)

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

<p>我是一个段落标签</p>

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

特点：

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

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

标签语义：强制换行

特点：

<br/> 是个单标签。
<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 标签

<div> 和 <span> 是没有语义的，它们是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

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

特点：

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

4.6 图像标签和路径 (重要)

图像标签

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

<img src="图像url" />

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

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

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

图像标签的其他属性

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

路径：相对路径

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

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

路径：绝对路径

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

4.7 超链接标签

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

链接的语法格式

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

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

属性

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

外部链接
内部链接：网站内部页面之间的相互链接。
空链接: #
下载链接：地址链接的是文件.exe、压缩包.zip 等。
网页元素链接：在网页中的各种网页元素。如文本、图像、表格、音频、视频等。
锚点链接：点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的href属性中，设置属性为 #名字的形式
- 找到目标位置标签，里面添加一个 id 属性 = 名字

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

注释:  VSCode 中快捷键：Ctrk + /
有些时候，在HTML中不能直接书写一些特殊符号，如：

多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）

比如字母两侧的大于小于号（可能会被认为是标签并解析）

如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）实体的语法：&实体的名字;，如：

实体名称	显示结果	描述
` `		空格
`>`	>	大于号
`<`	<	小于号
`&`	&	与
`©`	©	版权
`®`	®	注册商标
`™`	™	商标
`×`	×	乘号
`÷`	÷	除号
`¿`	¿	倒问号

更多的字符实体，可参考：HTML 字符实体、HTML ISO-8859-1 参考手册

6. 表格标签

6.1 表格的主要作用

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

6.2 表格的基本语法

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

6.3 表头单元格标签 th

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

6.4 表格属性

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

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

6.5 表格结构标签

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

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

注意：

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

6.6 合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格个数"
跨列合并：colspan="合并单元格个数"

合并三部曲：

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

7. 列表标签

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

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

7.1 无序列表

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

语法格式:

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

注意:

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

7.2 有序列表

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

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

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

7.3 自定义列表

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

基本语法：

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

注意：

dl 里面只能包含 dt 和 dd。

8. 表头标签

8.1 为什么需要表头

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

8.2 表头组成

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

8.3 表单域

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

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

语法格式

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

常用属性：

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

注意：

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

8.4 表单控件(表单元素)

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

<input> 表单元素

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

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

<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	正整数	规定输入字段字符的最大长度

注意

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

label 标签

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

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

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

select 下拉表单元素

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

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

注意

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

textarea 文本域表单元素

场景：输入内容较多时。

语法：

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

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

寈嵐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始的前端—HTML 02

网页基础知识
复制链接

扫一扫

从零开始的前端—HTML 02

“相关推荐”对你有帮助么？