前言
本笔记是b站黑马程序员前端入门教程的听课笔记，主观性较强，初衷是与大家共同交流，一起进步。
目录
HTML简介
网页
1.什么是网页
网站是网页的集合，网页通常是HTML格式的文件，通过浏览器阅读。
网页是构成网站的基本元素，由图片、链接、视频、声音、文字等元素组成。
后缀：.htm或.html
2.什么是HTML
HTML指的是超文本标记语言，用来描述网页。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
超文本的含义：
1.超越了文本的限制。
2.超级链接文本，可以从一个文件跳转到另一个文件。
3.网页的形成
前端开发人员开发代码 -> 浏览器显示代码（解析、渲染）-> 生成最后的web页面
常用浏览器及其内核
1.常用的浏览器
2.浏览器内核（渲染引擎）
作用：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
web标准
定义：由W3C组织和其他标准化组织制定的一系列标准的集合。
1.为什么需要web标准
不同的浏览器，展示统一的内容。
2.web标准的组成
主要包括结构、表现和行为三个方面。
结构：结构用于对网页元素进行整理和分类（HTML）
表现：表现用于设置网页元素的版式、颜色、大小等外观样式（CSS）
行为：行为是指网页模型的定义及交互的编写（JavaScript）
web标准提出的最佳体验方案：结构、样式、行为相分离。（不同的方面写到不同的对应文件中去）
HTML标签
HTML语法规范
1.标签写在<>里面，并且标签都是成对出现的。 e.g. < html >(开始标签)< /html >(结束标签)
2.（极少情况）存在单标签，不需要成对 e.g. < br / >
标签关系
1.包含关系
<head>
<title></title>
</head>
2.并列关系
<head></head>
<body></body>
HTML基本结构标签
1.第一个HTML网页
每个网页都会有一个基本的结构标签（骨架标签），页面内容在这些基本标签上书写。
HTML页面也称为HTML文档。
< html >< /html >：HTML标签，页面中最大的标签（根标签）
< head >< /head >：文档头部（必须设置title标签）
< title >< /title >：文档标题，每一个页面有一个对应的网页标题
< body >< /body >：文档主体，包含文档所有内容
<html>
<head>
<title>第一个页面</title>
</head>
<body>
对应输出的内容
</body>
</html>
DOCTYPE和lang以及字符集的作用
1.文档类型声明标签
< !DOCTYPE>：文档类型声明，确定使用哪种HTML版本来显示网页。
<!DOCTYPE html>
当前页面采用HTML5版本来显示网页。
注意：
1.必须在最前面（在< html >标签之前）
2.不属于html标签，而是专门定义的文档类型声明标签
2.lang语言种类
功能：定义当前文档显示的语言。（en英语，zh-CN中文）
实际上，不同定义下，中文英文均可显示。
对浏览器和搜索引擎有一定作用，给浏览器和搜索引擎进行提示。
3.字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
在< head >标签内，利用< meta >标签的charset属性来规定HTML文档的字符编码。
<meta charset="UTF-8" />
charset常用值：GB2312 BIG5 GBK UTF-8（万国码）
此句必须写，否则可能产生乱码。建议统一使用“UTF-8”编码。
HTML常用标签
1.标签语义
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
2.标题标签
HTML提供了6个等级的网页标签，即< h1>-< h6>
<h1> 我是一级标题 </h1>
标签语义：作为标题使用，并且依据重要性递减。
特点：
1.标题文字会加粗并根据等级依次变大
2.一个标题独占一行
3.段落和换行标签
< p >标签用于定义段落。
<p> 我是一个段落标签 <p>
标签语义：将网页分成不同的段落
特点：
1.文本在段落中会根据浏览器大小自动换行。
2.段落和段落之间有一定的空隙。
< br />强制换行标签（单标签）
<br/>
标签语义：强制换行
注意：< br />只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
4.文本格式化标签
标签语义：突出重要性，比普通文字更加重要。
加粗：**< strong >< /strong >或者< b >< /b>
倾斜：< em >< /em >或者< i >< /i >
删除线：< del >< /del >或者< s >< /s >
下划线：< ins >< /ins >**或者< u >< /u >
<strong>我是加粗的文字</strong>
<em>我是倾斜的文字</em>
<del>我是有删除线的文字</del>
<ins>我是有下划线的文字</ins>
5.< div >和< span >标签
< div >和< span >是没有语义的，用来装内容
<div>这是头部</div>
<span>今日价格</span>
div表示分割、分区，span表示跨度、跨距
特点：
1.div 用来布局，但一行只能放一个。
2.span用来布局，一行可以放多个。
6.图像标签和路径
图像标签
< img >用于定义HTML页面中的图像。（单标签）
<img src="图像URL" />
src是必须属性，用于指定图像文件的路径与文件名。
图像标签的属性：
src：图片路径
alt：文本，替换文本，图像不能显示的文字（图片不能显示的时候显示的文字）
title：文本，提示文本，鼠标放到图像上，显示的文字
width：像素，设置图像的宽度
height：像素，设置图形的高度
（width和height只用修改一个，网页会自动等比例缩放）
border：像素，设置图像的边框粗细
图像标签注意点
1.图像标签可以有多个属性，但必须在img的后面
2.属性间不分先后顺序，用空格隔开
3.属性采取键值对的格式，属性=“属性值”
路径
目录文件夹：存放了做页面所需的相关材料的文件夹
根目录：目标文件夹内的第一层
1.相对路径
定义：以引用文件所在位置为参考基础，建立出的目录路径。（文件相对于HTML页面的位置）
同一级路径：直接写文件名即可调用
<img src="img.jpg" />
下一级路径：使用“/”
<img src="images/img.jpg" />
上一级路径：使用“…/”
<img src="../img.jpg" />
2.绝对路径
定义：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，也可以使用网页的地址。
7.超链接标签
< a >用于定义超链接，作用是从一个页面链接到另一个页面。
1.链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性：
href：用于指定链接目标的url地址（必须属性），当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定连接界面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
2.链接分类
外部链接（必须以http://开头）
<a herf="http://www.baidu.com">百度</a>
内部链接
网站内部页面之间的相互连接，直接连接内部页面名称即可
<a href="index.html">首页</a>
空链接
没有确定链接目标
<a href='#'>首页</a>
下载链接
如果href里的地址是一个文件或者压缩包，则会下载这个文件
<a href="img.zip">下载文件</a>
网页元素链接
在网页中的所有元素，都可以用来链接
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
锚点链接
点击链接，可以快速定位到页面中的某个位置
href属性中，设置属性值为#名字的形式
找到目标位置标签，里面添加一个id属性=刚才的名字
<a href="#live">个人生活</a>
<h3 id="live">个人生活简介</h3>
HTML中的注释和特殊字符
1.注释标签
以“< !–”开头，以"-- >"结尾
快捷键：ctrl+/
2.特殊字符
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
