我的前端学习笔记01-Introduce
1.测试编辑器
01.安装VScode
02.安装中文语言包
03.安装ayu主题
04.将一个目录作为项目目录
05.创建一个新网页
06.安装live server
07.尝试通过live server来运行网页
08.设置代码自动存储
2.实体
在网页中编写的多个空格默认情况下会被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊符号
比如：多个连续的空格 字母两侧的大于与小于号
如果我们需要在网页中书写这些特殊的符号，需要使用HTML中的实体（转义字符）
&+ 实体的名字
空格
> 大于号
< 小于号
© 版权符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<p>
今天 天气真不错！
</p>
<p>
a<b>c
</p>
</body>
</html>
3.meta标签
meta 主要用于设置网页中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键 字使用 ‘ ， ’隔开
description 用于指定网站的描述，网站的描述会显示在搜索引擎 的搜索的结果中
title 标签的内容会作为搜索结果的超链接上的文字显示
将页面重新定位到另一个网站
meta标签示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML5 ,前端， css3">
<meta name="description" content="这是一个非常不错的网站">
<meta http-eqiv="refresh" content="3; url=https://www.baidu.com">
<title>Documents</title>
</head>
<body>
<h1>3秒后转</h1>
</body>
</html>
4.语义化的标签
在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
- 标题标签：
h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1-h3，h4~h6很少用
标题标签都是块元素[ 在页面中独占一行的元素称为块元素（block element）]
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.hgroup标签：
用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其二</h2>
</hgroup>
3.P标签
表示页面中的一个段落，也是一个块元素
<p>在p标签中的内容就表示一个段落</p>
4.em标签
用于语音语调的一个加重，在页面中不会独占一行的元素（inline element）
<p>今天天气<em>真</em>不错！</p><br>
5.strong表示强调，重视内容！
<p>你今天必须要<strong>完成作业</strong>！</p>
6.blockquoe标签
表示一个长引用
<blockquote>
这句话我是从来没有说过的！
</blockquote>
7.q表示一个短引用
子曰<q>学而时习之，乐呵乐呵！</q>
8.br 标签
表示页面中的换行
9.块元素（block element）与行内元素（inline element）
1.网页中一般通过块元素来对页面进行布局
2.行内元素一般用来包裹文字
3.一般情况下会在块元素内放行内元素，而不会在行内元素内放块元素
4.块元素中基本上什么都能放
5.P元素中不能放任何块元素
6.浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在根元素外
P元素中嵌套了块元素
根元素中出现了除head和body以外子元素
…
10.布局标签（结构语义化标签）
表示网页的主体部分（一个网页中只有一个main）
表示网页的底部
表示网页的中导航
表示主体相关的其他内容（侧边栏）
表示一个独立的文章
表示一个独立的区块，上面的标签都不能使用时，使用 section
没有语义，用来表示一个区块，目前是主要的布局元素
行内元素，没有语义，一般用于在网页中选中文字
11.列表.
HTML中一共有三种列表：
1.有序列表（用0L标签创建有序列表，li表示列表项）
2.无序列表（用UL标签创建无序列表，li表示列表项）
3.定义列表（用dl标签创建定义列表，用dt表示定义的内容，dd对内容进行解释说明）
列表之间可以互相嵌套
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
12.超链接
可以让我们从一个页面跳转到另一个页面或者其他位置
使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径
值可以是外部的网站地址
也可以是内部页面的地址
超链接也是一个行内元素，在a 标签中可以嵌套除他自身外的任何元素
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="https://www.baidu123.com">超链接</a> -->
<a href="07.列表.html">超链接2</a>
target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面打开超链接
_black 在一个新的页面中打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
<br><br>
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去第三个自然段</a>
在开发中可以将 **#** 作为超链接的路径的占位符使用，可以直接将超链接的href属性设置为#，这样点击超链接以后， 页面不会发生跳转，而是转到当前页面的顶部的位置
<a href="#">这是一个新的超链接</a>
也可使用 JavaScript：；作为href的属性，此时点击，什么也不会发生
<a href="javascript:;">这是一个新的超链接</a>
ID属性 （唯一不重复的）
每一个标签都可以添加一个id属性
ID属性是元素的唯一标识，同一个页面不能出现重复的id属性
<a id="bottom" href="#">回到顶部</a>
13.图片标签
图片标签用于向当前页面引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签， img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
1. src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
2. alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示。搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素)
height 图片的高度
（ 宽度和高度中如果只修改了一个，则另一个会等比例缩放）
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的 效果不一样，用效果好的
<img src="./img/1.gif" alt="松鼠">
<img width="200" src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">
14.内联框架
用于向当前页面引入一个其他页面
src 指定引入的网页路径
frameborder 指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<h1>Hello</h1>
15.音视频
audio 标签用来向页面中引入一个外部的音频文件的（音视频文件引入时，默认情况下不允许用户自己控制播放停止）
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
<audio src="./source/audio.mp3" controls></audio>
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
video 标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
16.其他
1.属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写，
有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来
<h1>这是我的<font color="red" size='3'>第三个</font>网页！</h1>
2.注释
HTML的注释，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的开发中一定要养成良好的编写注释的习惯，注释要求简单明了
注释还可以将一些不希望显示的内容隐藏
注释不能嵌套
标签一般成对出现，但是也存在一些自结束标签
3.文档声明（doctype）
- 文档声明用来告诉浏览器当前网页的版本
- html5的文档声明
4.进制
十进制（日常使用）
- 特点：满10进1
- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 … 19 20
- 单位数字：10个 （0-9）
二进制（计算机底层的进制）
- 特点：满2进1
- 计数：0 1 10 11 100 101 110 111
- 单位数字：2个 （0-1）
- 扩展：
- 所有数据在计算机底层都会以二进制的形式保存
- 可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0
这一个小格子在内存中被称为1位（bit）
8bit = 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb(特字节)
1024tp = 1pb
八进制(很少用)
- 特点：满8进1
- 计数： 0 1 2 3 4 5 6 7 10 11 12 … 17 20
- 单位数字：8个 （0-7）
十六进制(一般显示一个二进制数字时，都会转换为十六进制)
- 特点：满16进1
- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 … 1a 1b 1c 1d 1e 1f 20 …
- 单位数字：16个（0-f）
5.字符编码
李立超 -> 110000110110 （编码）
110000110110 -> 李立超 （解码）
- 所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。
所以一段文字在存储到内存中时，都需要转换为二进制编码
当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
- 编码
- 将字符转换为二进制码的过程称为编码
- 解码
- 将二进制码转换为字符的过程称为解码
- 字符集（charset）
- 编码和解码所采用的规则称为字符集
- 乱码问题：
- 如果编码和解码所采用的字符集不同就会出现乱码问题
- 常见的字符集：
ASCII
ISO88591
GB2312
GBK
UTF-8，在开发时我们使用的字符集都是UTF-8
6.格式模板
网页的标题
网页的大标题