前端基础概念铺垫：

网页的基本组成部分：文本、图片、超链接、视频、音频。

五大浏览器和渲染引擎：

ie浏览器内核（trident）火狐浏览器（gecko）谷歌浏览器（blink）safari浏览器（webkit）欧朋浏览器（blink）查看浏览器市场份额：tongji.baidu.com/data/browse…

web组成

结构html
样式css
行为javascript（动态效果）

浏览器工作原理

转载自博客园Adazheng的文章感谢博主能写出这么好的拟人的文章！ Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了</html>的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
浏览器召集了在座的各位<span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。编译器

网页开发工具推荐使用（vscode）

VScode 官网地址： code.visualstudio.com/
VScode 官方文档地址： code.visualstudio.com/docs
VScode 插件：
中文简体语言包：Chinese (Simplified) (简体中文) Language
自动补全标签：Auto Close Tag
自动同步修改前后标签名插件：Auto Rename Tag
快速生成Html标签模板插件：HTML Snippets
shift+!敲tab或者回车可以自动生成html5标签模板
右击选择浏览器打开htm：lopen in browser （快捷键：alt+b）
追踪css样式：css peek

HTML语法规则：

HTML 标签是由尖括号包围的关键词，例如 <html>
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。
标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如 <br>，<hr>我们称为单标签。

HTML基本结构：

    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的内容部分
    </body>
</html>

<!DOCTYPE html> <!DOCTYPE>文档类型声明标签，告诉浏览器使用的HTML5版本
<html lang="en"> lang="当前文档的显示的语言" 中文"zh-CN"，英语"en"
<head>
    <meta charset="UTF-8"> charset规定文档的字符编码 （utf-8万国码）
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 移动端开发的代码
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML常用标签

标题标签<h1>-<h6>一级标题到6级标题 =md中的#
段落标签和换行标签<p></p>段落标签
换行标签单标签 <br />强制换行(也可以这么写<br>)
分割线标签单标签<hr>

- 注意：html里多个空格只会显示一个空格(回车算一个空格)段落和换行的区别，段落两行之间会有空隙，换行不会有空隙。

文本格式化标签

为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示标签语义:突出重要性,比普通文字更重要。
加粗<strong>我是加粗</strong> <b>我也是加粗</b> 推荐使用strong
斜体 <em>我是倾斜标签</em> <i>我也是倾斜标签</i> 推荐使用em
删除线 <del>我是删除线标签</del> <s>我也是倾斜标签</s> 推荐使用del
下划线<ins>我是下划线</ins> <u>我也是下划线</u> 推荐使用ins 特殊标签（无语义）
<div>我是div</div>
<span>我是span</span>
特点：div属于块级元素，独占一行可以设置宽高属性。
span属于行内元素，可以多个span在同一行显示，不会自动换行，宽高属性设置无效。

图像标签和路径

图片标签：img (作用在网页中显示一张图片)

图像标签<img src="图像URL" />　单标签　同一目录下可以直接用图片名做url
图像标签的参数 (参数之间用空格分开)
src：图片的路径
alt：替换文本，只有当图片加载失败时，才会显示文字
title：图片的标题，鼠标悬停在图片上时，才会显示文字
width宽度/height高度如果只设置了其中的一个，另一个会等比例缩放
注意点：一般只会设置width或者height中的一个，如果同时设置了两个，图片可能会拉伸变形

绝对路径和相对路径

绝对路径

在个人电脑中，带有盘符的路径
外部链接，以https://开头的路径

- 相对路径

同级目录：直接写目标文件的名字
下级目录：写目标文件所在文件夹的名字
进入目录文件夹/ 直接写目标文件的名字即可
上级目录：去上一级目录../直接写目标文件的名字即可
注意：相对路径使用的是/ 绝对路径使用的是\

超链接标签：a 语法格式：`<a herf="" target=""></a>`

href：告诉浏览器点击之后去哪一个网页取值：就是一个路径
外部链接：直接写网址即可（网址需要写完整，https://）
本地网页：直接写路径
target：设置跳转方式
_self：在当前窗口中进行跳转，原网页不保留（默认值）
_blank：在新窗口中进行跳转，原网页保留
空连接href：可用"#"代替
下载链接如果herf里是一个zip或文件则默认下载
锚点链接跳到本页中的某处的链接 herf属性里为’#名字’的形式<a herf="#new"> 然后在目标标签里<p id="new">
各种元素都可以做为超链接

视频标签和音频标签

音频标签：audio

src：音频的路径
controls：播放的控件
autoplay：自动播放
loop：循环播放 - <audio src="./video1.mp4" controls autoplay loop></audio>

视频标签：video

src：音频的路径
controls：播放的控件
autoplay：自动播放
loop：循环播放 - <video src="./video1.mp4" controls autoplay muted loop></video>
注意谷歌开启自动播放必须加静音属性：muted。

注释标签和特殊字符

注释标签 <!–这是注释–>
快捷键ctrl+/ css和js注释快捷键都一样（按一次可注释，再按一次可取消注释）
常用特殊字符
大于号：>
小于号：<
空格符：
版权：©

非科班自学者看网课自学所写笔记，如有错误欢迎各位大佬前来指正，谢谢！

HTML5及CSS学习1