前言

在B站听尚硅谷的HTML课程，随听随记，感觉老师讲的很不错，用很快的速度过了一遍，比较基础，大家凑合着看。同时，对于markdown文档也是第一次学习使用，还有很不规范的地方。

一、编辑器的选择

建议选择VScode，全称Visual Studio Code，VScode是微软公司出的一个新款编辑器，功能笔记强大，目前来说反馈比较好。
VScode的特点如下：
开源，免费；
自定义配置
集成git
智能提示强大
支持各种文件格式
调试功能强大
各种方便的快捷键
强大的插件扩展

新手使用VScode的步骤如下：
1、下载vscode安装包;
2、修改语言，下载中文包；
3、修改默认设置，设置为自动保存，然后配合LIve server插件使用，可以实时显示自己书写的代码的样式；
4、安装AYU主题。
通过以上设置，一个新手可以顺利的上手

二、标准HTML5网页结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>

三、语义化标签介绍

1、meta标签
meta标签表示元数据，是一个自结束标签，不需要结束标签。元数据是给浏览器看的，不会显示到网页上面。必须写到head标签内。
meta标签的属性：
charset：可以设置网页的字符集
http-equiv：设置HTTP协议使用。
name：指定数据的类型
content：指定数据的内容
description:用于指定网站的描述，会显示在搜搜引擎的搜索结果中。
举例：这样的关键词设置可以被搜索引擎使用。keywords表示网站的关键字。

 <!--表示元数据的类型是关键字，关键字的内容是HTML5，CSS，javascript--><meta name="keywords" content="html5,css,javascript"><meta name="description" content="这是一个很不错的购物网站"><!--refresh表示重定向的意思，下面的代码表示网站在3秒后跳转到百度 --><meta name="refresh" content="3;url="https://www.baidu.com">

针对移动端meta的设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。
width 控制 viewport 的大小
device-width 获取当前设备的宽度
initial-scale 设备初始缩放比例,就是当页面第一次 load 的时候缩放比例
maxium-scale 允许用户缩放的最大比例
manium-scale 允许用户缩放的最小的比例
user-scalable 设备是否允许用户进行缩放 ‘yes/no’

2、title标签
title标签里的内容会作为搜索引擎搜索结果的超级链接上的内容显示。也是网站的标题。
3、h1-h6元素
h1-h3元素比较常用，后面的基本用不到了。像h1这样的元素独占一行，称为块元素（block element)。
通常一个页面有一个h1标题。
hgroup标签可以把相关的两个或多个标签放到一个组内。举例：

<hgroup><h1>回乡偶书</h1><h2>其一</h2>
</hgroup>
<p>诗的正文</p>

4、em strong标签表示语音语意的加重
在页面中不会换行的标签，叫行内元素（inline element)

<P>今天天气<em>真</em>不错！</p>
<p>今天你必须要<strong>完成作业！</strong></p>

5、blockquote 引用元素

<p>鲁迅说：<blockquote>这句话我是从来没说过的！</blockquote></p>

页面显示为：

鲁迅说：这句话我是从来没说过的！

6、q 元素，表示短引用。引用一个短语和名人名言。

<p>子曰<q>学而时习之，乐呵乐呵!</q></p>

页面输出为：

子曰“学而时习之，乐呵乐呵!”

7、br 标签表示换行

四、块元素和语义元素的区别

在网页中一般通过块元素进行布局，行内元素跟布局就没有什么关系了，行内元素用来包裹文字。在块元素内放置行内元素，不会在行内元素中放置块元素。
P元素中不能放任何的块元素，例如不能在P标签内加h1元素。
浏览器在解析网页时，会自动修正网页中不符合规范的内容：
比如标签卸载了根元素的外部
p元素中出现了块元素

五、布局标签（结构化标签）

1、header 表示网页的头部
2、main标签，主体部分，一个网页只有一个主体。
3、footer标签，网页的底部。
4、nav 表示导航的标签。
5、aside表示侧边栏，和主体相关又不属于主体的部分。
6、article表示独立的文章。
7、section表示独立的区块。
以上的部分都使用的很少，了解就可以。
主要使用的是

标签：div没有语义，表示一个区块，目前是主要使用的布局元素。还有一个和div配合使用的标签是，行内元素，也没有任何语义，一般用于网页中选中文字。

六、列表

在HTML中列表中一共有三种：
1、无序列表
使用ul标签创建列表，使用li表示列表项。li是单词list item的意思。

<ul><li>china</li><li>japanese</li><li>american</li>
</ul>

2、有序列表
使用ol标签创建列表，使用li表示列表项。
有序列表和无序列表平时基本都不使用前面的标签，因为在不同的浏览器里面显示的样式不同，都要去掉。

<ol><li>china</li><li>japanese</li><li>american</li>
</ol>

3、定义列表
使用dl标签创建列表，dt表示定义的内容，使用dd对内容进行解释说明。

<dl><dt>结构</dt><dd>表示建筑物的构成形式</dd>
</dl>

注意：列表之间可以互相嵌套

七、超级链接

超级链接可以让我们从一个页面跳转到其它页面，或者跳转到当前页面的其它位置。使用a标签创建超级链接。超级链接也是行内元素，可以嵌套除了a以为的任何元素。
1、属性href，用于指定跳转的页面。可以指定一个网址，也可以指定一个同目录下的文件名。

<a href="https://www.baidu.com">百度</a>
<a href="007.html">跳转到文件名为007.html的页面</a>

当想跳转到一个项目的内部页面时，一般使用相对路径。
./ 表示当前文件所在的目录；可以省略不写。
…/ 表示当前目录的上一级。
2、属性target，用来指定超链接打开的位置，常见的值是_self（默认值，在原页面打开心的页面）、_blank（在一的新的页面打开）。
3、跳转到一个页面的其它位置。
设置一个页面回到顶部，将href的属性设置为#就可以实现。

<a id="bottom" href="#">回到顶部</a>

设置一个页面回到底部或者去其它任意地点，要通过id属性，每一个标签都可以添加id属性，同一个页面不能出现重复的id值。

<a href="#bottom">回到底部</a>

4、在开发中href的值可以使用#占位，暂时没有确定位置的时候，可以使用#占位。

<a href="javascript:;">占位使用</a>

八、图片标签

图片标签的作用用于向当前页面引入外部的图片。
1、使用img，src指定图片的路径，可以使用相对路径，也可以使用外部的地址。
img从一定意义上讲也是属于替换元素，介于行内元素和块元素中间的，具有两种元素的特点。
2、alt元素是对图片的描述，描述默认情况下不会显示，有些浏览器会在图片显示不出来的时候显示描述内容。并不是所有的浏览器都会这样支持。搜索引擎会根据描述识别图片，如果不写搜索引擎不会收录。
盲人阅读器，在使用的时会阅读描述的内容。
3、width指定图片的宽度，height指定图片的高度，单位是像素px。宽度和高度只修改一个值，另外一个会等比例缩写或放大。写的时候不建议两个值都设置。在PC端不建设设置图片的大小，如果想使用固定值的图片大小，就用ps直接修到目标值。需要多大就裁多大。但是在移动端经常对图片进行缩放，主要是大图缩小，很少用小图放大，如果那样就会图片失真。
4、图片的格式：
jpeg(jpg) 支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片。
gif 支持的颜色比较少，支持简单透明，支持动图；适合颜色单一的图片，动图。
png支持的颜色丰富，支持复杂透明，不支持动图。专为网页而生的图片。
原则：效果一样，用小的，效果不一样，用效果好的。
webp 谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其它图片格式的所有优点，而且文件还特别小。缺点是兼容性不好。

base64：将图片使用base64进行编码，这样可以直接将图片转换为字符，通过字符的形式将图片引入。一般都想需要和网页一起加载的图片才会使用。使用的场景不是特别多。

九、内联框架

标签iframe
内联框架，用于向当前页面引入一个其它页面。

<iframe src="https://www.baidu.com" width="800" height="600" frameborder="0"></iframe>

frameborder指定内联框架的边框，一般都设置为0，现在使用的场景比较少。内联框架内的内容不会被搜索引擎搜索。

十、音视频播放

1、音频引入
audio标签，用来向网页中引入一个外部的音频文件

<audio src="路径" controls autoplay></audio>

controls属性 音视频文件引入时，默认情况下不允许用户控制播放停止。需要加一个属性才能控制，加入controls，这个属性不需要赋值。
autoplay属性 是否自动播放的属性。如果设置了autoplay则音乐在打开页面时自动播放，但大部分浏览器都不会自动对音乐进行播放。因为这样设置的用户体验会不太好。
loop属性 设置音乐是否重复循环播放。

通过src来指定尾部文件的路径以为，还科宇通过source来指定外部文件的路径。效果是一样的。这样使用的作用是处理不支持的浏览器显示文字。相比较来说用户效果比较好。source可以设置多个文件，这样可以设置不同格式的文件。

<audio controls autoplay>对不起，您的浏览器不支持播放音频文件，请升级浏览器！<source="路径" ><source="路径" ><embed src="路径" type="audio/mp3" width="300" height="50">
</audio>

embed标签可以设置IE8也支持音频文件支持。
用起来比较麻烦，比较老的一般标签。
2、使用video标签引入视频文件。
使用方式和audio基本都是一样的。
小网站一般自己的服务器不放，买一些第三方音视频托管云。
不花钱引入网页视频的方法：可以将视频传入到视频网站，例如腾讯视频，然后在视频下部找到分享，下面会有通用代码，复制代码后放到自己页面中，可以实现视频的播放，减轻自己服务器的压力。缺点是比较low，视频中会有第三方网站的信息。

HTML5学习笔记（2020年11月）相关推荐

程序猿学习笔记~2020年10月26日(数据类型与条件语句)
Java学习日记~2020年10月26日基本数据类型整数类型整数类型有byte.short.int.long.在不同位数的操作系统占用不同的字节.在64位操作系统中,它们分别占1.2.4.8个字 ...
1. HTML学习笔记-2021年11月2日
文章目录 1.1 初识HTML 1. 2 HTML注释 1. 3 标签的属性 1.4 网页的基本结构 1.5 基本结构说明 2.1 测试编辑器 2.2 实体 2.3 meta标签 2.4 语义化标签 ...
HTML5学习笔记简明版（11）：新API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口. 这些接口在全部实现了Document接口的元素对象上进行了实现.HTML5在 ...
【企业了解】人人都是产品经理、鸟哥笔记、CSDN、稀土掘金（2020年11月稀土掘金被字节跳动，金融与科技）
[企业了解]人人都是产品经理.鸟哥笔记.CSDN.稀土掘金前言今天早上看<今日热榜官网>的时候,被一篇文章吸引--<中国成功学迭代史>,内容挺有意思的.然后发现这篇文章来自 ...
Jenkins持续集成学习笔记(2020.11.22)
Jenkins持续集成学习笔记(2020.11.22) 前言: (官网) 以前很久学习过Jenkins持续集成进行快速部署项目进行测试, 最近换工作了, 发现新公司有用到, 现在来复习一下官网介绍: ...
【数据竞赛】2020年11月国内大数据竞赛信息-奖池5000万
2020年11月:下面是截止到2020年11月国内还在进行中的大数据比赛题目,非常丰富,大家选择性参加,初学者可以作为入门练手,大佬收割奖金,平时项目不多的,比赛是知识非常好的实践方式,本号会定期发布 ...
工程伦理第三章学习笔记2020最新
工程伦理第三章学习笔记2020最新因为之前自己在网上找答案总是觉得费劲,一道一道的找,很慢,突然找到了前两章的答案,感觉有一种前人种树后人乘凉的感觉,于是自己在艰难找完第三章习题并全对的情况下,将题 ...
2020年11月08中级数据库系统工程师考后说
2020年11月08日中级数据库系统工程师考试结束,总结词:难. 吐槽吗? 考官不按常理出牌?老师没有传授到点? 为什么会的都没考,考的很多都不会? 上午题记忆点题居多(概念性功能性题为代 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
北风修仙笔记—2020年4月
HI,欢迎来到北风的修仙笔记. 这里会记录下北风在人生路上升级打怪的一些思考,每月月底都会以本文的形式在公众号集中发布. 当然如果想提前剧透的,可以关注我的知识星球@采铜于山.知乎@北风博客 .微博@ ...

HTML5学习笔记（2020年11月）

前言

目录