文章目录
网页
什么是网页
网站
指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页
网站中的一页，通常是HTML格式的文件，通过浏览器来阅读。
网页是构成网站的基本元素，由图片、链接、文字、声音、视频等元素组成，以 .htm 或 .html后缀结尾的文件（HTML文件）。
什么是HTML
HTML指的是超文本标记语言，用来描述创建网页。
标记语言是一套标记标签。
超文本：
1.可以加图片、声音、动画、多媒体等内容（超越文本限制）。
2.可以从一个文件跳转到另一个文件，与世界各地主机文件连接（超级链接文本）。
网页的形成
利用html标签将网页元素描述出来，通过浏览器解析显示给用户。
前端人员开发代码 -> 浏览器显示代码(解析、渲染) -> 生成web
常用浏览器
常用的浏览器
浏览器是网页显示、运行的平台。
五大浏览器：IE、火狐(firefox)、谷歌(chrome)、Safari、Opera
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容、整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome/Opera | Bink | chrome/opera浏览器内核。Blink其实是WebKit的分支 |
Web标准
Web标准是由W3C组织和其它标准化组织制定的一系列标准的集合，W3C(万维网联盟)是国际最著名的标准化组织。
为什么需要Web标准
浏览器不同，显示页面或排版有差异。
优点：
1.让不同人写出的页面更标准统一。
2.让Web的发展前景更广阔。
3.内容能被更广泛的设备访问。
4.更容易被搜索引擎搜索。
5.降低网站流量费用。
6.使网站更易于维护。
7.提高页面浏览速度。
Web标准的构成
最佳体验方案：结构、表现、行为相分离。
结构： 用于对网页元素进行整理分类（HTML）。
表现： 用于设置网页元素的版式、颜色、大小等外观样式（CSS）。
行为： 指网页模型的定义及交互的编写（JavaScript）。
HTML语法规范
基本语法概述
1.HTML标签是由尖括号包围的关键词。
2.HTML标签通常是成对出现的（双标签：第一个标签是开始标签，第二个是结束标签）。
3.有些特殊的标签是单个标签（单标签）。
标签关系
包含关系：
<head>
<title></title>
</head>
并列关系：
<head></head>
<body></body>
HTML基本结构标签
HTML基本结构标签也称骨架标签。
第一个HTML网页（HTML文档）：
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
学习HTML很开心！
</body>
</html>
在浏览器中打开页面：
| 标签名 | 定义 | 说明 |
|---|---|---|
| < html >< /html > | HTML标签 | 跟标签：页面中最大的标签 |
| < head >< /head > | 文档的头部 | 注意在head标签中我们须设置title标签 |
| < title >< /title > | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| < body >< /body > | 文档的主体 | 元素包含文档所有内容、页面内容都放body里 |
开发工具
Visual Studio Code
1.双击打开软件
2.新建Ctrl+N
3.保存Ctrl+S（保存为.html文件）
4.Ctrl+加号键，放大页面
Ctrl+减号键，缩小页面
5.生成页面骨架：输入"!",按下Tab键/Enter键/点击选择
6.用插件在浏览器中预览页面
7.安装(Install)插件:(左侧菜单栏中的图标)
<!DOCTYPE>标签
（文档类型声明标签）：告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
——意思是当前采取HTML5版本
注：
1.<!DOCTYPE>声明位于文档中的最前面的位置，在前。
2.<!DOCTYPE>不是一个HTML标签。
lang语言种类
定义当前文档显示的语言。
en定义语言为英文；zh-CN定义语言为中文。
（都能显示中英文：对浏览器和搜索引擎（百度、谷歌）还是有作用的）
<html lang="en">
<html lang="ch-CN">
字符集
（多个字符的集合）
以便计算机能够识别和存储各种文字。
在标签内，可通过标签的charset属性来规定HTML文档应使用哪种字符编码。
<meta charset="UTF-8/">
charset常用值：GB2312、BIG5、GBK和 UTF-8（万国码：基本包含了全世界各国文字）。
尽量统一写成"UTF-8"，不要写成"utf8"或"UTF8"
上面三种语法是必写代码，否则可能引起乱码，vscode自动生成
HTML常用标签
标签语义
根据标签语义（标签的含义），在合适的地方给一个最为合理的标签，可以让页面结构更加清晰
标题标签< h1 >-< h6 >
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
1.加标题的文字更粗、字更大。
2.一个标题独占一行。
3.1-6级，字号递减，重要性递减。
段落标签和换行标签
段落标签
用于定义段落，将文字分段显示。
<p>段落标签</p>
1.文本在一个段落中会根据浏览器窗口大小自动换行。
2.段落间保持空隙。
换行标签
使文本强制换行显示。
<br />
1.<br />是单标签。
2.换行无空隙。
文本格式化标签
为文字设置粗体、斜体或下划线等效果，使文字以特殊方式显示突出重要性。
| 功能 | 标签 |
|---|---|
| 加粗 | <strong></strong>或<b></b> |
| 倾斜 | <em></em>或<i></i> |
| 删除线 | <del></del>或<s></s> |
| 下划线 | <ins></ins>或<u></u> |
< div > 和 < span > 标签
用来装饰内容，作"盒子"，用来布局，没有语义。
<div>"大盒子"</div>
<span>"小盒子"</span>
1.<div>一行只能放一个</div>
2.<span>一行可放多个</span>
图像标签和路径
图像标签
<img>（单标签）
<img scr="图像url地址" />
scr是<img>标签的必须属性，用于指定图像文件的路径、名称。
| 属性 | 单位 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本（图像不能显示时的文字） |
| title | 文本 | 提示文本（鼠标放图像上显示的文字） |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像的边框粗细 |
1.图像标签可拥有多个属性，必须写在标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间用空格。
3.属性采取键值对的格式，即key="value"的格式，属性=“属性值”。
路径
目录文件和根目录用于管理文件。
目录文件夹：做页面所需的相关素材，如html文件、图片等。
根目录：打开目录文件夹的第一层。
用vscode打开目录文件夹使后期方便管理文件。
相对路径
以引用文件所在位置为参考，建立出的目录路径（图片相当于HTML页面的位置）。
| 同一级路径 | <img src=" "/> |
|
|---|---|---|
| 下一级路径 | / | <img src="下一级名称/ "/> |
| 上一级路径 | …/ | <img src="../ "/> |
绝对路径
（用的少）
1.电脑上的路径
2.网络地址
超链接标签
<a>
从一个页面链接到另一个页面
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 指定链接目标的url地址（必须属性）当为标签应用href属性时，它就具有了超链接功能 |
| target | 指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中的打开方式 |
链接分类
| 外部链接 | <a href="http://www.baidu.com">百度</a> |
|---|---|
| 内部链接 | 网站内部页面之间的相互链接，直接链接内部页面名称<a href=".html">页面</a> |
| 空连接 | 当没有确定链接目标时<a href="#">页面</a> |
| 下载链接 | 如果里面地址是一个文件或压缩包，会下载这个文件 |
| 网页元素链接 | 在网页中的各种网页元素（文本、图像、表格、音频、视频等） |
| 锚点链接 | 快速定位到页面中的某个位置 |
锚点链接：
1.在链接文本的href属性中，设置属性值为"#名字"的形式。
2.找到目标位置标签,里面添加一个"id属性=刚才的名字"。
<a href="#name">内容</a>
<h3 id="name">内容</h3>
文章内容为观看他人视频学习笔记，仅个人学习记录