Web学习记录 -- HTML标签（上）

2024-03-07 前端 0

1.网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

1.2 什么是HTML

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

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

标记语言是一套标记标签（markup tag）。

所谓超文本，有两层含义：

1、它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）。

2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

1.3 网页的形成

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

前端人员开发代码 ---> 浏览器显示代码（解析、渲染）---> 生成最后的Web页面

2.浏览器内核

IE：Trident（IE、猎豹安全、360极速浏览器、百度浏览器）

firefox：Gecko（火狐浏览器内核）

Safari：Webkit（苹果浏览器内核）

Chrome/Opera：Blink（chrome/opera浏览器内核。Blink其实是WebKit的分支）

目前国内一般浏览器采用Webkit/Blink内核，如UC、QQ、搜狗等。

3.Web标准

主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三个方面。

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

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

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

4.HTML语法规范

4.1 基本语法概述

1、HTML标签是由尖括号包围的关键词，例如<html>。

2、HTML标签通常是成对出现的，例如<html>和</html>，我们成为双标签。标签对中的对一个标签是开始标签，第二个标签是结束标签。

3、有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称之为单标签。

4.2 标签关系

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

<html>    <head> </head>    <body> </body></html>

5 HTML基本结构标签

5.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称骨架标签），页面内容也是在这些基本的标签上书写。

HTML页面也成为HTML文档。

<html>    <head>        <title> 我的第一个也页面 </title>    </head>    <body>        月薪过万，一飞冲天    </body></html>

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称之为跟标签
<head></head>	文档的头部	注意在head标签中我们必须设置的标签是title
<title></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档的后缀必须是.html或者.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

6. VSCode工具生成骨架标签新增代码

6.1 文档类型声明标签

<!DOCTYPE>文档类型声明，作用是高告诉浏览器使用哪种HTML版本来显示页面

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页

注意：

1、<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。

2、<!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签

6..2 lang语言种类

用来定义当前文档显示的语言

1、en定义语言为英语

2、zh-CN定义语言为中文

<html lang="en">

简单来说，en就是英文网页，zh-CN就是中文网页

但是对于文档显示来说，定义成en的文档也可以显示中文，定位成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎还是有作用的

6.3 字符集

字符集（Character set）是多个字符的集合。一边计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

<meta charset="UTF-8">

charset常用的值有:GB2312 BIG5 GBK和UTF-8, 其中UTF-8也被称为万国码,基本包含了全世界所需要用到的字符

注意: 上面语法是必须要写的代码,否则可能引起乱码的情况. 一般情况下, 统一使用"UTF-8"编码,尽量统一写成标准的"UTF-8", 不要写成"utf8" 或"UTF8"

6.4 总结

1、<!DOCTYPE html> 文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面。

2、<html lang = "en">告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。

3、<meta charset="UTF-8"> 必须写，采取UTF-8来保存文字，如果不写就会乱码。

7. HTML常用标签

7.1 标签语义

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

7.2 标题标签<h1> - <h6>

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

<h1>  一级标题 </h1>

标签语义：作为标题使用，并且依据重要性递减。

7.3 段落和换行标签

在网页中，要把文字有条理的显示出来，就要把这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

<p> 段落标签 </p>

标签语义：可以把HTML文档分割为若干个段落。

在HTML中，一个段落中的文字会从左到右依次排列，知道浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />。

<br />

标签语义：强制换行。

特点：

1. <br />是个单标签。

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

7.4 文本格式化标签

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

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

7.5 <div>和<span>标签

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

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

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

特点：

1、<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

2、<span>标签用来布局，一行上可以多个<span>。小盒子

7.6 图像标签和路径

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

<img src="图像URL" />

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

7.6.1 图像标签

图像标签的其他属性

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

注意点：

图像标签可以拥有多个属性，必须卸载标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即key="value"的格式，属性="属性值"。

7.6.2 路径

目录文件夹：就是普通文件夹，里面存放了做页面所需要的相关素材，比如html文件、图片等

根目录：带来目录文件夹的第一层就是根目录、

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置。

相对路径是从代码所在的这个文件出发，去寻找目标文件的

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。

7.7 超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

7.7.1 链接的语法格式

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

属性	作用
href	用于指定链接目标的url地址（必须属性），当为标签应用href属性时，它就具有了超链接功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中的打开方式

7.7.2 链接分类

1、外部链接：例如<a href="http://www.baidu.com">百度</a>。

2、内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href="index.html">首页</a>。

3、空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。

4、下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

5、网页元素链接：在页面中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

6、锚点链接：点击链接可以快速定位到页面中的某个位置。

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id = "two">第二集介绍</h3>

8. HTML中的注释和特殊字符

8.1 注释

如果需要在html文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中注释以""结束

<!--  注释语句  -->

8.2 特殊字符

在THML页面中，一些特殊符号很难或者不方便直接使用，此时可以使用下面的字符来替代。

特殊字符	描述	字符的代码
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
x	乘号	&times
÷	除号	&divide
²	平方2	&sup2
³	立方3	&sup3