临时抱佛脚，随便记记，给自己看的，仅供参考。
一.HTML简介
1 HTML不是编程语言，而是一种标记语言，是一套标记标签。
2 超文本含义：
（1） 可以加入图片、声音、动画等多媒体内容（超越了文本）。
（2）它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。（超级链接文本）
3 网页的形成
网页是由网页元素组成的，这些元素是由html标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码–》浏览器显示代码（解析、渲染）—》生成最后的Web页面。
网页其实就是一个html文件（后缀名为html）
4 浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示形式并显示页面
Chrome/Opera内核：Blink，Blink是WebKit的分支。
IE内核：Trident
5 Web标准
Web标准是W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
（1）为什么需要Web标准
浏览器不同，它们需要页面或者排版就有些许差异。
（2）Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式， 主要指的是CSS |
| 行为 | 行为是指网页模型的定义以及交互的编写，现阶段主要学的是Javascript |
Web标准提出的最佳体验方案：结构、样式、行为相分离。简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JS中。相比较而言，三者中结构最重要。
二 HTML标签（上）
1 HTML语法规范
1.1标签
所有的标签都必须包括在一对尖括号里，是由尖括号包围的关键词，大部分情况下都是成对出现。
双标签：（成对出现）
开始标签：<head>
结束标签：（多一个斜杠）</head>
单标签：(只有一个，很少）
<br />
1.2标签关系
分为包含关系和并列关系。
包含关系：
<head>
<title> </title>
</head>
并列关系：
<head></head>
<body> </body>
2 HTML语基本结构标签
每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档，后缀为html或者htm
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | html标签 | 页面中最大的标签，称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主题 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
3 网页开发工具
VSCode工具生成骨架标签新增代码：
1 <!DOCTYPE>标签
2 lang语言
3 charset字符集
1<!DOCTYPE>标签：
文档类型声明，作用告诉浏览器用什么HTLML版本来显示文件。
注意：
<!DOCTYPE html>告诉浏览器这个页面采取html5版本来显示页面。
2 lang语言种类
en:英文
zh-CN：中文
其实对于文档显示来说，定义成en也可以写中文，只是对浏览器有提示作用。
3 字符集
字符集（Characterset)是字符的集合，在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset=“UTF-8” />
UTF-8：万国码，基本包含了全世界所有国家需要用到的字符。
4 HTML 常用标签
4.1标签语义
重点理解标签的含义，即这个标签是用来干嘛的。
4.2 标题标签<h1>-<h6>
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题，即<h1>-<h6>。
<h1>我是一级标题</h1>
特点：(1)加了标题的文字会更粗更大，一级标题h1到六级标题h6粗细和大小依次递减。
(2)标题独占一行，和div一样，不用换行标签后面的东西都会另起一行。
4.3段落和换行标签
1 段落标签
<p>段落标签</p>
2 换行标签
单标签：<b />
换行标签只是另起一行，段落标签会在段落中插入垂直间距（即空的大一点）。
4.4文本格式化标签
文本格式化：给文本加一些特殊的效果，如加粗，斜体，下划线等。
加粗: <strong></strong>或者<b></b>
倾斜: <em></em>或者<i></i>
删除线: <del></del>或者<s></s>
下划线: <ins></ins>或者<u></u>
4.5<div>和<span>标签
这两个标签是没有语义的，它们就是一个盒子，用来装内容的，用来布局的
div是division的缩写，表示分割分区，span意为跨度、跨距。
注意：<div>用来布局，自己独占一行，超大的盒子
<span>用来布局，一行可以放多个span，是小盒子。
4.6图像标签和路径
1 图像标签
<img src=“图像路径" />标签用于定义HTML页面中的图像
图像标签的属性：
src：是img标签的必须属性，它用于指定图像文件的名字和路径。
alt：图像如果显示不出来，用alt指定的文字替换
title: 提示文本，鼠标放到图像上会提示title指定的文字
width：设置图像的宽度
height：设置图像的高度
border:设置图像的边框粗细。
注意：图像标签可以有多个属性，必须写在标签名img的后面
属性之间不分前后顺序的。标签名和属性，属性和属性之间均以空格分开。
属性采用键值对的格式，即key=“value”,属性=“属性值”。
2 路径
(1)目录文件夹和根目录
目录文件夹：就是普通的文件夹，只不过放了我们做网页的相关素材。
根目录：打开目录文件夹的第一层就是根目录。
（2）VSCode打开目录文件夹
文件–打开目录文件夹，或者直接把目录文件夹拖到VSCode中。
（3）相对路径和绝对路径
<1>相对路径
以引用文件所在位置为参考基础，而建立出的目录路径
这里简单来说，就是图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | <img src=“img.jpg” /> | |
| 下一级路径 | / | <img src=“images/img.jpg” /> |
| 上一级路径 | …/ | <img src="…/img.jpg" /> (点点杠，是两个点） |
注：返回一级就是一个点点杠，上两级就是…/…/
<2>绝对路径
通常是从盘符开始的路径。
绝对路径是\ 相对路径是/
绝对路径不常用，还有一种是网络中的绝对路径，即网络上图片的图像地址。
4.7超链接标签
1 链接的语法格式
<a href=“跳转目标” target=“目标窗口的弹出方式”> 文本或图像</a>
a是anchor的缩写，意为锚。
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性） 当标签应用href属性时，它就具有了超链接的功能。 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
target如果是_self就是新页面替换了当前的页面，_blank就是打开一个新的窗口显示新页面，之前的html页面还在。
2 链接的分类
(1) 外部链接
即通向外部网站的链接
如<a href=“http://www.qq.com”> 腾讯</a>
(2) 内部链接
即网站内部网页之间的相互链接
如<a href=“gongsijianjie.html”> 公司简介</a> (同一级）
(3)空链接
如<a href=#"> 公司地址</a>
公司地址页面还没做好，所以设置空链接，因为href必须写，不写显示不出来超链接功能。
(4)下载链接
如果href里面地址是一个文件或者压缩包，它会下载这个文件。
如<a href=“img.zip”> 下载图像文件</a> （同一级)
(5)网页元素链接
在网页中的各种网页元素，如图片，表格，视频，音频都可以加上超链接
如<a href=“gongsijianjie.html”><img src=“img.jpg”/></a> (同一级）
把图片当文字写在标签中间就可以。
(6)锚点链接
我们点击链接，可以快速定位到页面中的某个位置，如百度百科里面链接快速定位到人物生平那种。
<1>在href属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第二集 </a>
<2>找到目标位置标签，里面添加一个id属性=刚在的名字，如<h3 id=“two”>第二集介绍< /h3>
这样超链接的名字和目标位置的id对应起来，点击超链接就可以跳转了
注意href中名字前要加#，目标位置的id不用#
5 HTML中的注释和特殊字符
5.1注释
HTML中的注释:<!- - 注释- ->
快捷键:ctrl+/
5.2特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2) | ² |
| ³ | 平方3(上标3) | ³ |
| ° | 摄氏度 | ° |
| © | 版权 | © |
| ® | 注册商标 | ® |
重点：空格、大于号、小于号。
8942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
