尚硅谷HTML习笔记

计算机的两位先驱：
1、图灵 人工智能之父
2、冯诺依曼 现代计算机之父

计算机的组成
一、软件：分为系统软件和应用软件
系统软件：windows、mac、linux、harmony
应用软件：下载的软件如微信
二、硬件：
①中央处理器（cpu）就是控制器和运算器
②存储器，包括内存和硬盘
内存：临时性存储，读写速度快，常见的有16/32G。能同时玩多少游戏，取决于内存的大小。
硬盘：永久性存储，一般1TB。能安装多少东西取决于硬盘的大小。
③ 输入设备：键盘、鼠标
④输出设备：音响、显示器

应用软件分类
C/S架构软件（client、server），需要安装才能使用的软件，需要偶尔更新，不跨平台。对于不同平台开发语言不一样，对应的安装包也不一样。

B/S架构软件（browser、server），直接在网页就可以使用的，无需安装和更新，可跨平台
前端主要开发的是这种
还有微信小程序开发、客户端开发、搭建服务器

浏览器知识
五大主流浏览器
市场份额非常大，都有自己的内核
chrome（blink）、safari（webkit）、ie（trident）、firefox（gecko）、opera（blink）
什么是内核
是浏览器的核心，用于处理浏览器所得到的各种资源。
以前ie浏览器是window系统自带的。
22年微软宣布停止对ie浏览器的维护了
取代的是edge浏览器，内核和谷歌一样

网页的概念
网址—访问—网站
网站是多个网页组成的
网页有哪些组成？
结构（html）、表现（css）、行为（js）

对于Web标准以及W3C的理解
Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成
W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：

可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
跨平台，方便迁移都不同设备
降低代码维护成本

你知道SEO中的TDK吗？
在SEO中，TDK其实就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签

前端页面有哪三层构成
结构层、表示层、行为层
html
超文本标记语言
html的发展历史

标签中的内容叫标签体
单标签无结束标签，如
文档声明告诉浏览器应该使用的html标准

什么是 DOCTYPE， 有何作用？
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

Quirks（怪癖）模式是什么？它和Standards（标准）有什么区别？
区别：总体会有布局、样式解析、脚本执行三个方面区别，这里列举一些比较常见的区别：

1、盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在Quirks模式下，IE的宽度和高度还包含了padding和border
2、设置行内元素的高宽：在Standards模式下，给行内元素设置width和height都不会生效，而在Quriks模式下会生效
3、用margin：0 auto设置水平居中:在Standards模式下，设置margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效
4、设置百分比高度:在Standards模式下，元素的高度是由包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是无效的

vsCode
优点：
1、轻量便捷 2、功能丰富 3、免费使用 4、插件优秀 5、各种语言都可以用
插件推荐：
vscode-icons 插件 设置文件icon
live-server 插件，在代码文件中右键就会出现open with live server 选项。点击之后自带访问服务器下该文件。代码更新后浏览器也没资源也会自动刷新。但是只有打开文件夹才行。
设置：
vscode设置自动保存，可设置延迟时间，失焦保存。

设置字符集和语言

原则：
1、存储时，务必采用合适的字符编码，否则无法存储数据会丢失。（编码失败时会存下一堆问号）
2、存储时采用的编码方式必须和读取时保持一致。否则数据会呈现，但会出现乱码（编码成功，但解码失败）。
3、浏览器默认采用UTF-8进行解码。但是最好还是在文档中声明charset
4、设置语言

怎么改变网站的小图标呢?

设置网站图标在根目录下添加favicon.ico文件
然后在head里面写上这么一句代码:

<link rel="shortcut icon"  href="favicon.ico" type="image/x-icon">
1

src 和 href 的区别
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：

src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。

开发者文档
最官方的标准的是w3c官网 www.w3c.org
但是这个网站是全英文的，对我们学习并不是那么友好。国内有两个对于这个网站的翻译和搬运。
w3School : www.w3school.com.cn
MDN: developer.mozilla.org
这两个网站如何选择MDN上的api更全面，所以这个网站用的更多。

语义化标签
用于特定的标签去表达特定的含义。标签的默认效果并不重要，因为后期可以通过css控制。但是语义化非常重要。
语义化的优点
1、代码结构清晰，可读性强。
2、有利于seo
3、方便设备解析

块级元素与行内元素的区别
1、块级元素：独占一行，排版标签一般都是块级元素。
2、行内元素：不独占一行，设置宽高无效，设置margin和padding只有左右有效，上下无效
使用规则
1、块级元素中可以写行内和块级。
2、行内元素中只能写行内，不能写块级。
3、一些特殊的规则。H1到H6不能互相嵌套。p中不能写块级元素。

文本标签
1、用于包裹括词汇，短语等。
2、通常写在排版标签的里面。
3、排版标签更宏观，大段的文字文本标签更微观，如词汇，短语
4、文本标签通常都是行内元素。
常用的文本标签
1、em 着重阅读的内容。
2、strong十分重要的内容，语气比一要强。
3、span没有语意用于包裹短语的通用容器。

图片标签
vscode不支持外部文件直接复制过来，但是可以按住拖到文件中
img标签的常用属性：
1、alt 图片描述，搜索引擎通过alt属性得知图片的内容，当图片无法展示时，有些浏览器会呈现出属性的值。
2、src
3、width
4、height

常见图片格式的优缺点
一、jpg格式
概述：拓展名为点.jpg或.jpeg，它是一种有损的压缩格式，他将肉眼不容易观察出来的细节丢弃了
主要特点:支持的颜色丰富，占用空间小，但不支持透明背景，不支持动态图
使用场景：对细节没有极高要求的场景，比如说产品的宣传图等等

二、png格式
概述：是一种无损压缩格式，能更高质量的保存图片
主要特点：支持的颜色丰富，占用空间大，支持透明背景，不支持动态图
使用场景：需要使用透明背景的图片、想要呈现更高质量的图片

三、bmp格式
概述：不进行压缩的格式，最大程度上保留细节。
主要特点：支持颜色丰富，保留细节，占用空间极大，不支持透明背景和动态图
使用场景：对图片细节要求极高，如大型游戏

四、gif 格式
概述：支持256中颜色，色彩呈现不是很完整
主要特点：支持的颜色较少，支持简单透明背景、支持动态图
使用场景：动态图

五、webp格式
概述：谷歌退出的一种格式，专门用来在网页中呈现图片
主要特点：具备以上几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容问题
使用场景：网页中的各种图片

六、base64 格式
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
原理：把图片进行base64编码，形成一串文本，直接作为img的src即可。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。

超链接

主要作用：从当前页面进行跳转
常用属性：
1、href：要跳转的具体位置
2、target：跳转时如何打开页面，_self 在本页签中打开 _blank 在新页签中打开，默认是self

用法1：跳转到页面,可以是本地网页也可以是外部网页

<a href=''./xxx target='_self'></a>
1

用法2：跳转到文件

<a href='./xxx.png'></a> 能直接打开的文件
<a href='./xxx.zip'></a> 浏览器无法打开的文件，会自动触发下载
<a href='./xxx.map4' download='xxx.map4'></a> 可以通过download强制触发下载
1
2
3

用法3：跳转到锚点
什么是锚点？网页中的一个标记点
如何使用？

<!-- 第一种方式，a标签配合name属性 -->
<a href="#abc"> 点我调到锚点</a>
<a name="abc"></a>
<!-- 第二种方式，普通标签配合id属性 -->


<a href="#abc"> 点我调到锚点</a>
<a href="#">点我调到本页面的顶部</a>
<a href="">点我刷新本页面</a>

1
2
3
4
5
6
7
8
9
10

用法四：唤起制定应用

<a href='tel:10086'> 点我唤起设备拨号</a>
<a href="mailto:10086@qq.com">点我唤起设备发送邮件</a>
<a href="msm:10086">点我唤起设备发送短信</a>
1
2
3

注意事项：
1、代码中的多个空格和回车，都会被浏览器解析成一个空格
2、虽然a是行内元素，但他可以包裹处他自己外的任何元素
3、浏览器无法打开的文件，会引导用户下载。也可以强制用户下载
4、具有href属性的a标签是超链接，具有name属性的a标签是锚点

列表

表格

    



    

        
测试
    
    

        
ceg
    
    

        
做好笔记
        
笔记方便复习
        
多加练习
        
只有敲出来的代码才是自己的
    
    

        
学生信息
        

            

                
姓名
                
性别
            
        
        

            

                
张三
                
男
            
            

                
李四
                
女
            
        
        

    



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

表格常用属性

补充常用标签

表单的基本结构

表单通常用于和用户交互。
1、普通的输入框必须要写name，但不需要写value，name相当于定义的key
2、单选框，多个radio的name属性要保持一致，并且必须设置value，value即为选择的数据值。

1
2

3、隐藏域，input的type设为用户不可见的一个输入区域。作用是在提交表单的时候携带一些固定的数据。同时需要指定name和value。

1

4、提交按钮将input的type设置为submit。不需要指定name属性即可呈现按钮样式。

1

5、重置按钮

1

6、下拉框

  hei
   option value='2'>bei
  
1
2
3
4

7、label标签可以与表单控件相关联，关联之后点击文字对应的表单就会获取焦点。
两种与label关联的方式
一、让label标签的for属性值等于表单控件的ID
二、将表单控件套在label标签的里面。

框架标签

iframe的优缺点
优点：
可以用来处理加载缓慢的内容，比如：广告
缺点：
iframe会阻塞主页面的Onload事件
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
会产生很多页面，不易管理
浏览器的后退按钮没有作用
无法被一些搜索引擎识别

常用字符实体

更多字符实体

html 全局属性

Meta 元信息

什么是h5

即HTML5,新一代html标准，由w3c 完成标准定制
两个官网：w3c提供的，whatwg 提供的，我们只使用共有的
优势？
1、新增了语义化标签、全局属性
2、新增了多媒体标签，代替flash
3、更侧重语义化，对seo友好
4、可移植性号，可以应用在移动设备上
5、针对js，新增了很多可操作的接口

H5和HTML5区别
H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
HTML5是一个技术名词，指的就是第五代HTML

新增的语义化标签

新增状态标签

新增列表属性
效果：

新增文本标签
效果：

新增表单控件属性

required 校验必填字段，会toast提示，没有必填星号
autofocus 自动聚集
autocomplete 如果输入过之后会展示历史记录，直接选中即可。

input 新增属性值

   <!-- 如果设置了novalidate表单提交时就不进行校验 -->
    <form action="" novalidate>
        <input type="text" name="text">
        <input type="search">
        <input type="radio">
        <input type="range">
        <input type="password">
        <input type="checkbox">
        <!-- 选中时间 -->
        <input type="date">
        <input type="month">
        <input type="week">
        <input type="time">
        <!-- 数字键盘，拨号 -->
        <input type="tel">
        <!-- 自带正则校验，表单提交时会校验 -->
        <input type="email">
        <!-- 介绍一个url编码和解码的工具 ： http://www.wetools.com/url-encode -->
        <input type="url">
        <input type="number">
        <!-- 提交和重置按钮 -->
        <input type="reset">
        <input type="submit">

    </form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果：

新增视频标签

    <video src="http://vjs.zencdn.net/v/oceans.mp4" width="400px"          height="200px" controls muted loop
        poster='./test.png'>

    </video>
1
2
3
4

效果：

新增音频标签

<audio autoplay muted loop preload="none" controls src="https://www.w3school.com.cn/i/horse.ogg">

    </audio>
1
2
3

html新增的全局属性（了解即可）

如何处理老版本浏览无法兼容HTML5

requestAnimationFrame（了解）？
实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，CSS3 中可以使用 transition 和 animation 来实现，HTML5 中的 canvas 也可以实现。除此之外，HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。
语法：
window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)
使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。
示例：
//我们可以创建的时候就给一个ID

const animationID=window.requestAnimationFrame(loop);//loop就是我们的渲染循环，可以看上面的render那块的函数
//比如我想10秒之后停止动画
setTimeout(()=>{
    window.cancelAnimationFrame(animationID)
},10000)
1
2
3
4
5