这是我参与「第四届青训营 」笔记创作活动的第1天
01常见字符集
字符：各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等
字符集：多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同。常用字符集：ASCII字符集、GB2312字符集、GBK字符集、 USC-3字符集、Unicode字符集等
字符编码：也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），以便文本在计算机中存储和通过通信网络的传递。常用字符编码：ASCII编码、GB2312编码、GBK编码、UFT-8编码等
ASCII字符集和ASCII编码：
ASCII字符集：主要包括控制字符（回车、退格、换行等），可显示字符（大小写英文字母、阿拉伯数字、西文符号）
ASCII编码：将ASCII字符集转换为计算机可以接受的数字系统的数的规则。使用7位表示一个字符，共128个字符。为了表示更多的欧洲常用字符对ASCII进行了扩展，ASCII扩展字符集使用8位表示一个字符，共256个字符
GBXXX字符集和GBXXX编码：
为了显示中文设计的一套编码规则，用于将汉字转为计算机可以接受的数字系统的数的规则。
规定：一个小于127的字符的意义与原来相同，但两个大于127的字符连在一起时就表示一个汉字。前面一个字节（称为高字节）从0xA1用到0xF7，后面一个字节（称为低字节）从0xA1用到0xFE，这样可以组合出七千多个汉字。在编码中还编入了希腊字母、日文的假名等，ASCII中存在的数字、符号、字母也重新编了两个字节长的编码。这就是常说的全角字符，原来在127以下的字符称为半角字符。
由于古汉语和人名中的罕见字GB2312不能处理，导致了后来GBK和GB18030汉字字符集的出现
Unicode字符集和UTF编码：
Unicode字符集：是为了表达任意语言的任意字符而设计的。它使用4字节的数字表达每个字母、数字、或者表意文字
UTF-8：是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码Unicode字符
UTF-16：将Unicode字符集的抽象码位映射为16位长的整数（即码元）的序列，用于数据存储或传递。Unicode字符的码位需要一个或两个16位长的码元来表示，因此这是一个变长表示。
UTF-32：是一种将Unicode字符编码的协定，对每一个Unicode码位使用恰好32位元。因为UTF-32对每个字符都使用4字节，因此空间效率较低，使得UTF-32通常是其他编码的2-4倍
base64编码：
有的电子邮件系统不支持非英文字母传输，这是历史原因造成的。因为一个英文字母使用ASCII编码来存储，占存储器的一个字节（8位），实际上只用了7位来进行存储，第一位没有使用置为0。因此，邮件系统认为凡是第一位是1的字节都是错误的。而有的编码方案不但使用多个字节编码一个字符，并且第一位通常是1，比如GB2312，这样邮件系统将1换成0，收到邮件的人就会受到乱码。为了正常收发邮件，需要将其他编码存储的符号转为ASCII码来传输。比如发送方的GB2312编码根据base64规则转为ASCII码，接收端根据base64规则将ASCII码还原为GB2312码
02内存
8bit位 = 1byte字节
1024byte字节 = 1kb
1024kb = 1mb
03html文件结构
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>
<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset="utf-8">
<!-- title会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>
</head>
<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>
<!-- h1网页的一级标题 -->
<h1>网页的大标题</h1>
</body>
</html>
04实体
在网页中书写一些特殊符号（如大于、小于、空格等）需要写html实体
> 大于号
< 小于号
© 版权符号
05meta标签
meta主要用于设置网页中的一些元数据，元数据不是给用户看的
- charset 指定网页的字符集
- name 指定的数据的名称
- content 指定的数据的内容
name指定的内容：
-
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间用
，隔开<meta name="Keywords" content="网上购物,网上商城,京东"/> -
description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供愉悦的购物体验!"/>
其他：
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!-- 3秒后将页面重定向到另一个网站 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
06语义化标签
常见标签：
-
h1~h6标题标签：h1对seo最重要，最好包含网站的关键字，而且最好能设置一个
-
hgroup标签：对标题元素进行分组，可以将一组相关的标题放入一组hgroup
-
p段落标签；br换行；q短引用；blockquote长引用
-
em标签：着重元素，标记出用户要着重阅读的内容；元素可嵌套，嵌套层次越深，被认为越重要；字体显示斜体，朗读语音加重；
em标签和i标签的区别：两者视觉效果相同，但语义不同。em标签是一个语义化标签，表示其内容的着重强调，有利于seo，i标签是为了从正常文本中区分出一些文本。例如：Just do it already!这里的do是em，人或软件在阅读文本时会对斜体字的发音重读强调；The word the is an article，这里的the是斜体
- strong标签：表示重要文本，一般粗体显示
strong标签和b标签的区别：两者都是加粗字体的作用，二者不同的是b标签是一个实体标签，它所包围的字符将被设置为粗体blod；strong是一个逻辑标签，它的作用是加强字符的语气，一般来说加强字符的语气是通过将字符变为粗体实现的
布局标签：
- header元素用于展示介绍性内容，通常包括一些标题元素或者logo、搜索框、作者名称等。header元素不是分段内容，因此不会引入新的段落
- main元素呈现了文档的body或应用的主体部分。一个页面只能存在一个main，main中的内容也应该是独一无二的
- nav元素用于在当前文档或其他文档中提供导航链接。并不是所有的链接都要包含在nav中，它只用来将一些热门的链接放入导航栏；一个网页nav可以有多个，例如一个是网站内的导航列表，一个是本页面内的导航列表
- artical元素用于定义一个独立结构，其意在成为一个可独立分配的或可复用的结构，例如论坛帖子、文章、交互式组件或其他独立的内容项目。artical可包含一个或多个section，例如一个一个的显示每篇文章的文本；artical可以嵌套artical，里面的与外面的是部分与整体的关系
- section元素是一个通用的分节元素，表示文档中一个通用独立章节。在没有更具体的语义元素表示时才使用，一般来说会包含一个标题
- aside元素用于表示一个和其余页面内容几乎无关的部分，是独立于内容的一部分并且可以被单独拆出来而不会使整体受到影响。通常表现为侧边栏或者标注框
- footer元素用于表示一个章节内容或者根节点元素的页脚。通常包含该章节作者、版权数据或者与文档相关的链接等信息
07块元素和行内元素
块元素（block element）：在网页中一般通过块元素来对页面进行布局
行内元素（inline element）：行内元素主要用来包裹文字
- 一般情况下会在块元素内放行内元素，而不会在行内元素放块元素
- 块元素内什么都能放
- 特别的p是块元素，但他不能放块元素
08列表标签
html共三种列表，有序列表ol、无序列表ul、定义列表dl
定义列表：使用dl创建一个定义列表、使用dt来表示定义的内容、使用dd来对内容进行解释说明
列表之间可相互嵌套
09超链接
超链接可以跳转到其他页面或者当前页面的其他位置
使用a标签定义超链接，a标签的属性：
- href：跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址
- target：指定超链接打开的位置_self当前页面打开超链接，_blank在一个新的页面中打开超链接
可以将href的属性设置为 javascript:;作为占位符，点击后什么也不会发生
可以将href的值设置为id选择器，点击后跳转到目标元素的位置
10图片标签
img自结束标签，img标签属性：
- src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
- width 图片的宽度 (单位是像素)、height 图片的高度，宽度和高度中如果只修改了一个，则另一个会等比例缩放。一般在pc端不对图片进行缩放，在移动端经常需要对图片进行缩放（大图缩小）
图片格式：
- jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片
- gif：支持的颜色比较少，支持简单透明，支持动图；颜色单一的图片，动图
- png：支持的颜色丰富，支持复杂透明，不支持动图；颜色丰富，复杂透明图片（专为网页而生）
- webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式；它具备其他图片格式的所有优点，而且文件还特别的小；缺点：兼容性不好
- base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片 ；一般都是一些需要和网页一起加载的图片才会使用base64
11内联框架
内联框架，用于向当前页面中引入一个其他页面，iframe属性：
- src 指定要引入的网页的路径
- frameborder 指定内联框架的边框0/1有或没有
12音视频
audio 标签用来向页面中引入一个外部的音频文件的，默认情况下不允许用户自己控制播放停止
audio属性：
-
src指定外部文件路径
-
controls 是否允许用户控制播放
-
autoplay 音频文件是否自动播放，目前来讲大部分浏览器不会自动播放
-
loop是否循环播放
<!-- 除了通过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>
13表格
通过table标签来创建一个表格，在table中使用tr表示表格中的一行，在tr中使用td表示一个单元格
td可添加的属性：
- rowspan 纵向的合并单元格
- colspan 横向的合并单元格
长表格：可以将一个表格分成三个部分：头部 thead、主体 tbody、底部 tfoot
表格的样式：
- 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中，tr不是table的子元素
- 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改
- border-collapse: collapse; 合并边框
- border-spacing: 指定边框之间的距离
14表单
在现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器，使用form标签来创建一个表单
form标签的属性：action 表单要提交的服务器的地址
表单类型：
-
文本框，注意：数据要提交到服务器中，必须要为元素指定一个name属性值
文本框 <input type="text" name="username"> -
密码框
-
单选按钮，像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器，checked 可以将单选按钮设置为默认选中，相同的name属性是一组的
<input type="radio" name="hello" value="b" checked> -
多选框
-
下拉列表
<select name="haha"> <option value="i">选项一</option> <option selected value="ii">选项二</option> </select> -
提交按钮
<input type="submit" value="注册"> -
autocomplete="off" 关闭自动补全
-
readonly 将表单项设置为只读，数据会提交
-
disabled 将表单项设置为禁用，数据不会提交
-
autofocus 设置表单项自动获取焦点
