声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：
- H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
- JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）
HTML简介与常用标签
1.网页相关概念
网页是由图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）
网页生成制作：由前端人员书写HTML文件，然后浏览器打开，就能看到网页了。
HTML指的是超文本标记语言，是用来描述网页的一种语言。
超文本的2层含义：
-
它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
-
他还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
Web标准是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合 。
Web标准的构成：主要包括结构、表现和行为三个方面。
结构写到HTML文件中，表现写到CSS文件中，行为写到 JavaScript文件中。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义机交互的编写，现阶段主要学的是Javascript |
2.HTML语法规范
- 基本语法概述：
- HTML标签是由尖括号包围的关键词，例如<html>;
- HTML标签通常是成对出现的，例如<html>（开始标签）和</html>（结束标签），称为双标签。
- 有些特殊的标签必须是单个标签（极少情况）例如<br/>称为单标签。
- 标签关系
双标签关系可以分为两类：包含关系（head和title）、并列关系（head和body）。
3.HTML基本结构标签
每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，成为根标签 |
| <head></head> | 文档头部 | 注意head标签中我们要设置的标签是title |
| <title></title> | 文档标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档主体 | 元素包含文档的所有内容，页面内容基本都是放在body里面的 |
4.VSCode开发工具的使用
-
VSCode生成骨架结构的快捷键：！
-
注意保存文件格式为.html文件
-
VSCode工具生成骨架标签新增代码：
1.<!DOCTYPE html>：文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
注意：<!DOCTYPE>标签声明位于文档中最前面的位置；它不是一个HTML标签，只是文档类型声明标签。
2.html lang=“en”：用来定义当前文档显示的语言，en为英文，zh-CN为中文，告诉浏览器或搜索引擎采用英文或中文来显示；
3.meta charset=“UTF-8”：识别和存储各种文字，统一使用UTF-8（万国码），这句必须写，否则可能引起乱码。
5.HTML常用标签
5.1 语义标签：根据标签的语义，在合适的地方给一个最合理的标签，可以让页面结构更加清晰。
5.2 标题标签<h1>-<h6>(重要)：作为标题使用，并且根据重要性递减（一级~六级标题）
5.3 段落和换行标签(重要):
<p> </p> 段落标签，文本在一个段落中会根据浏览器窗口大小自动换行，段落与段落之间保有空隙；（paragraph缩写）
<br/> 单标签，标签语义为强制换行（break缩写）
5.4 文本格式化标签：
<strong></strong> //加粗
<em></em> //倾斜
<dei></dei> //删除线
<ins></ins> //下划线
5.5 <div>和<span>标签：没有语义，只是一个盒子，用来装内容
- div用来布局，表示分割，分区，但是一行只能放一个（大盒子）
- span用来布局，表示跨度、跨距，一行上可以放多个（小盒子）
5.6 图像标签（重点）：
- <img>标签用来定义HTML页面中的图像（单标签）
- src是标签的必须属性，他用于指定图像文件的路径和文件名
<img src = "图像URL" alt="图像显示不出来时的替换文本", title="鼠标放在图片上时的提示文本"/>
<img src = "图像URL" width="图片的宽度", height="图片的高度", boder="给图片设定边框"/> //高度宽度一般修改其中一个就会实现等比缩放
- 使用图像标签的注意点
- 图像标签可以拥有多个属性，但必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
- 属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
5.7 路径（重点）
- 目录文件夹：普通文件夹，用于存放做页面所需要的素材，比如html文件、图片等
- 根目录：打开目录文件夹的第一层目录就是根目录
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）
同一级路径<img src = “baidu.gif"/>；下一级路径<img src = “images/baidu.gif"/>;上一级路径<img src = “…/baidu.gif"/>。
2.绝对路径：是指目录下的绝对位置，通常从盘符开始的路径（注意反斜杠方向相反）
例如“C:\Users\lp\Desktop\前端基础练习\images”，或完整的网络地址“https://img2.baidu.com/it/u=1052468425,3707178953&fm=26&fmt=auto&gp=0.jpg”
5.8 超链接标签（重点）
- a：用于定义超链接，作用是从一个页面链接到另一个页面
<a href="跳转目标" target=“目标窗口的弹出方式”> 文本或图像 </a>
| 属性 | 作用 |
|---|---|
| href | 用于链接目标地址的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中__self为默认值， _blank为在新窗口中打开方式 |
2.链接分类：外部链接、内部链接、空链接、下载链接、网页元素链接（以下为依次举例）
<a href="https://baike.baidu.com/item/%E6%9E%97%E5%BD%A6%E4%BF%8A/22414884?fr=aladdin" target="_blank"> 林彦俊 </a>
<a href="gongsijianjie.html"> 公司简介 </a> <!--网站内部页面之间的相互链接，直接链接内部页面名称即可-->
<a href="#"> 首页 </a> //如果当时没有确定链接目标时
<a href="xiazaiwenjian.zip"> 下载文件 </a> <!--如果href里面地址是一个文件或者压缩包（.exe或者.zip格式），会下载这个文件-->
<a href="http://www.baidu.com"> <img src="img.jpg"/> </a> <!--在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接-->
-
锚点链接：点我们的点击链接，可以快速定位到页面中的某个位置
-
在链接文本的href属性中，设置属性值为#名字的形式，如
<a href="#mingzi"> 第二季 </a> -
找到目标位置标签，里面添加一个id属性=刚才的名字，如
<h3 id="mingzi"> 第二季介绍 </h3>
-
6.HTML中的注释和特殊字符
1.以“<!–”开头，以“–>”结束，快捷键：ctrl+/
2.特殊字符（常用）：
![[外链图片转存中...(img-zOLXE4BX-1618219560775)]](https://img-blog.csdnimg.cn/20210412172653673.png)
2407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
