HTML基础学习笔记

第一个HTML网页

使用vscode，输入!自动生成完整结构，如下

在vscode右键open with live server，如下

其中是html5的文档声明，告诉浏览器当前网页版本
注意：HTML中不区分大小写！！！

HTML标签

HTML页面是以标签的形式呈现，标签也称为元素。上图中的html为一对根标签，所有的源码都是写在根标签的内部（doctype除外）。其中lang="zh"代表该页面为英文的，若想指定为中文，将“en”改为“zh”。
根标签内部又包含head和body两种子标签，head对应该页面的标题等内容，body对应网页的内容。
head通常包含title标签和meta标签两种，title的作用是页面的标签栏，其内容会作为搜索引擎的搜索结果的超链接上的文字显示；meta则用来指定网页的特殊数据等内容，将在下边进行介绍。
body包含的即为网页的内容，例如h1为一级标题，h2为二级标题，p表示段落等。可以增加font标签来指定某部分字体的格式，例如font color=“red” size=“3”。


普通标签一般为成对出现的，有头有尾，尾的起始是一个/，表示该标签的结束；而除此之外存在一种“自结束标签”，例如image和input等，不需要对应的结束标签。在开始标签和自结束标签中可以设置属性，与标签名以空格隔开，属性值用引号引起来。

在HTML中的注释采用尖括号、感叹号和中划线组成，注释可以换行，不可以嵌套。在VSCode中注释可以通过快捷键ctrl+/生成。

HTML实体

在HTML中存在编写的多个空格会默认被解析为一个空格，字母两侧的大于小于号被解析为标签等情况，如果需要在网页中输入这些特殊的符号，则需要使用HTML中的实体（转义字符）例如：
&nbsp：空格
&gt：大于号
&lt：小于号
&copy：版权符号

meta标签

meta标签：主要用于设置网页中的一些元数据，其包含的属性例如：
charset 指定网页的字符集，例如utf-8，避免乱码
name 指定的数据的名称，例如keywords，description等（keywords 表示网站的关键字，可以同时指定多个关键字，用逗号隔开；description 用于指定网站的描述）content 指定的数据的内容

http-equiv 将页面重定向到另一个网站，例http-equiv=“refresh”，content=“3;https:www.baidu.com”，其中3表示跳转时间，例子为跳转到百度页面

语义化标签

由于在网页中HTML专门负责网页的结构，所以对于HTML应该关注的是标签的语义而不是样式
标题标签：
h1-h6重要性递减，h1最重要，h6最不重要。一般只会使用h1-h3，h4-h6很少用。h1在网页中重要性仅次于title标签，一般情况下一个页面只会有一个h1。
在页面中独占一行的元素称为块元素（block element），不会独占一行叫做行内元素（inline element）
各种标题标签属于块元素；p标签中的内容表示一个段落，也是一个块元素；hgroup标签用来为标题分组，可以将一组相关的标题同时放在hgroup中；em标签表示语音语调的一个加重，属于行内元素；strong标签表示强调重要内容，也属于行内元素；blockquote标签表示内容是长引用，属于块元素；q标签表示短引用，属于行内元素；br标签表示换行。
在网页中一般通过块元素对页面进行布局，行业元素主要用来包裹文字，一般情况块元素中可以放行内元素，而行内元素中不放块元素，块元素内基本什么元素都可以放，但特殊的：p元素中不能放任何块元素。
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如标签写在了根元素外部，p元素嵌套了块元素，根元素出现了除head和body以外的子元素等情况，会进行自动修正，不会影响用户查看网页，但建议尽量保证规范。
以下是h5新属性：
header标签表示网页的头部；main标签表示网页的主体部分（一个页面中只有一个main）；footer标签表示网页的底部；nav标签表示网页中的导航；aside标签表示和主体相关的其他内容（侧边栏）；article标签表示一个独立的文章；section标签表示一个独立的区块，上面的标签都不能表示时可以使用section。
用的不多，目前一般还是使用div标签较多，div没有语义，就用来表示一个区块，是目前主要的布局元素；另一个是span，语义上与div没有区别，但div是块元素，span是行内元素，例如随便打开一个网页的源代码

列表list

1.有序列表：
ul标签，li标签表示列表项
2.无序列表：
ol标签，li表示列表项
3.定义列表
dl标签，dt表示定义内容，dd表示对内容进行描述
列表之间是可以互相嵌套的

超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置，使用a标签来定义，是一个行内元素，在a标签中可以嵌套除自身外的任何元素。
属性href：1.可以是一个外部网站的地址；2.也可以写一个内部页面的地址（相对路径，一般以./或者…/开头，省略不写默认为./，./表示在当前文件所在的目录，…/表示当前文件所在目录的上一级）可以用#或者javascript:;来作为超链接的占位符；3.#表示回到顶部


属性target：
_self 默认值，在当前页面中打开超链接
_blank 在一个新的页面中打开超链接

属性id：
每一个标签都可以添加一个id属性，id属性是元素的唯一标识，同一个页面不能出现重复的id属性，可以借助id属性完成页面内容跳转

图片标签

img属于替换元素（基于块和行内元素之间，具有两种元素特点），是一个自结束标签，属性有：
src：外部图片路径，路径规则与超链接一样
alt：图片的描述，默认是图片无法加载的时候显示，搜索引擎会根据alt中的内容来识别图片
width：图片宽度 height：图片高度（单位是像素）宽度和高度只修改一个会将另一个等比例缩放，一般在pc端不建议修改图片大小，但在移动端经常需要进行缩放（主要是大图缩小）
多种图片格式：jpeg（jpg），gif，png，webp：效果一样用小的，效果不一样用效果好的；base64用于需要和网页同步加载的图片

内联框架

iframe标签，用于向当前界面引入一个其他页面，内联框架引的页面不会被搜索引擎检索
src指定要引入的网页的路径，frameborder指定内联框架的边框（0为无，1为有），跟图片一样可以设置宽和高

音视频播放

audio标签，用来向页面中引入外部音频文件，音视频文件引入时默认情况是不允许用户自己控制播放和停止，其属性有：
src指定要引入音频的路径 controls表示是否允许用户控制播放（不需要赋值）loop为循环播放（不需要赋值）
autoplay设置自动播放（不需要赋值），但是目前来讲大部分浏览器考虑了用户体验问题，不会自动对音乐进行播放
除了直接通过src指定路径，还可以通过source来指定文件，优势在于可以在浏览器不支持的时候出现提示文字，也可以放入多个版本的音频文件（默认执行第一个，不支持的时候执行下面的）
embed标签，用来在老版本的浏览器引入音频文件，缺点是会自动播放，利用type属性指定文件类型，可以指定宽度和高度

video标签，用来向页面引入视频文件，用法和audio基本一样，不兼容的也可以使用embed解决，只需要在type指定类型即可。还有一种简便的引入网络视频的方式，即打开网络视频，点击分享，复制通用代码粘贴到代码中即可

注：一般在开发中，不会把音视频直接放在服务器上，而是可以放在一个专用的服务器上只引入其地址，或者直接引入网上的音视频等。