这是我参与「第四届青训营」笔记创作活动的第9天。
🌏实体(转义字符)
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 在HTML中有些时候，我们不能直接书写一些特殊符号 比如：多个连续的空格，比如字母两侧的大于和小于号 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符） 实体的语法：&实体的名字;
- 空格
- > 大于号
- < 小于号
- © 版权符号
🌏meta标签
meta主要用于设置网页中的一些元数据，元数据不是给用户看
- charset 指定网页的字符集
- name 指定的数据的名称
- content 指定的数据的内容
- keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">
- description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
网站的描述会显示在搜索引擎的搜索的结果中
- title标签的内容会作为搜索结果的超链接上的文字显示
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> 将页面重定向到另一个网站
1语义化标签
在网页中HTML专门用来负责网页的结构 所以在使用html标签时，应该关注的是标签的语义，而不是它的样式 在页面中独占一行的元素称为块元素（block element） 在页面中不会独占一行的元素称为行内元素（inline element）
- 标题标签： h1 ~ h6 一共有六级标题 从h1~h6重要性递减，h1最重要，h6最不重要 一般情况下标题标签只会使用到h1h3，h4h6很少用 标题标签都是块元素
- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
- p标签表示页面中的一个段落，p也是一个块元素
- em标签用于表示语音语调的一个加重
- strong表示强调，重要内容！
- blockquote 表示一个长引用
- q表示一个短引用
块元素（block element）
- 在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正 比如： 标签写在了根元素的外部 p元素中嵌套了块元素 根元素中出现了除head和body以外的子元素 ... ...
- header 表示网页的头部
- main 表示网页的主体部分(一个页面中只会有一个main)
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 和主体相关的其他内容（侧边栏）
- article 表示一个独立的文章
- section 表示一个独立的区块，上边的标签都不能表示时使用section
- div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
- span 行内元素，没有任何的语义，一般用于在网页中选中文字
2列表
在html中也可以创建列表，html列表一共有三种： 1、有序列表 2、无序列表 3、定义列表
有序列表，使用ol标签来创建无序列表 使用li表示列表项 无序列表，使用ul标签来创建无序列表 使用li表示列表项
定义列表，使用dl标签来创建一个定义列表 使用dt来表示定义的内容 使用dd来对内容进行解释说明
列表之间可以互相嵌套
3超链接a
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
使用 a 标签来定义超链接 属性： href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
target属性，用来指定超链接打开的位置 可选值：
- _self 默认值 在当前页面中打开超链接
- _blank 在一个新的页面中打开超链接
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素 在开发中可以将#作为超链接的路径的展位符使用 可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生
可以直接将超链接的href属性设置为#，这样点击超链接以后 页面不会发生跳转，而是转到当前页面的顶部的位置 可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
4图片标签
图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点） 属性： src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度 (单位是像素) height 图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意： 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大 但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式： peg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动图
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的 效果不一样，用效果好的
5内联框架与音视频
内联框架，用于向当前页面中引入一个其他页面 src 指定要引入的网页的路径 frameborder 指定内联框架的边框 audio 标签用来向页面中引入一个外部的音频文件的 音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性： controls 是否允许用户控制播放 autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
使用video标签来向网页中引入一个视频
- 使用方式和audio基本上是一样的
\
