HTML学习笔记

1、实体（转义字符）

在HTML中有些时候，我们不能直接书写一些特殊符号，比如：多个连续的空格，比如字母两侧的大于和小于号如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）

• 实体的语法：&实体的名字;

     空格
   > 大于号
   < 小于号
   © 版权符号

2、meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看
meta标签的属性有：

1. charset 指定网页的字符集
2. name 指定的数据的名称
3. content 指定的数据的内容
   name中的值可为：

• keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用逗号隔开<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
• description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百..."/>
• title标签的内容会作为搜索结果的超链接上的文字显示
• <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">的作用：将页面重定向到另一个网站

3、行内元素和块元素

块元素（block element）

• 在网页中一般通过块元素来对页面进行布局

行内元素（inline element）

• 行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
    比如：
        标签写在了根元素的外部
        p元素中嵌套了块元素
        根元素中出现了除head和body以外的子元素

4、布局标签（结构化语义标签）

• header 表示网页的头部
• main 表示网页的主体部分(一个页面中只会有一个main)
• footer 表示网页的底部
• nav 表示网页中的导航
• aside 和主体相关的其他内容（侧边栏）
• article 表示一个独立的文章
• section 表示一个独立的区块，上边的标签都不能表示时使用section
• div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
• span 行内元素，没有任何的语义，一般用于在网页中选中文字

5、列表

在html中也可以创建列表，html列表一共有三种：

1. 有序列表
2. 无序列表
3. 定义列表

• 有序列表，使用ol标签来创建无序列表,使用li表示列表项
• 无序列表，使用ul标签来创建无序列表,使用li表示列表项
• 定义列表，使用dl标签来创建一个定义列表,使用dt来表示定义的内容,使用dd来对内容进行解释说明

列表之间可以互相嵌套

6、超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置,使用 a 标签来定义超链接
属性：

1. href 指定跳转的目标路径
   - 值可以是一个外部网站的地址
   - 也可以写一个内部页面的地址
2. target属性，用来指定超链接打开的位置
   可选值：
   _self 默认值 在当前页面中打开超链接
   _blank 在一个新的要么中打开超链接

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。在开发中可以将#作为超链接的路径的展位符使用，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置（占位符），也可以使用 javascript:; 来作为href的值，此时点击这个超链接什么也不会发生（占位符）

7、图片标签

图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签, img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：

1. src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
2. alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
3. width 图片的宽度 (单位是像素)
4. height 图片的高度

• 宽度和高度中如果只修改了一个，则另一个会等比例缩放
  注意：
  一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
  但是在移动端，经常需要对图片进行缩放（大图缩小）

8、图片的格式：

1. jpeg(jpg)
   • 支持的颜色比较丰富，不支持透明效果，不支持动图
   • 一般用来显示照片
2. gif
   • 支持的颜色比较少，支持简单透明，支持动图
   • 颜色单一的图片，动图
3. png
   • 支持的颜色丰富，支持复杂透明，不支持动图
   • 颜色丰富，复杂透明图片（专为网页而生）
4. webp
   • 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
   • 它具备其他图片格式的所有优点，而且文件还特别的小
   • 缺点：兼容性不好
5. base64
   • 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
   • 一般都是一些需要和网页一起加载的图片才会使用base64
     使用原则：
     效果一样，用小的
     效果不一样，用效果好的

9、内联框架

内联框架，用于向当前页面中引入一个其他页面

1. src 指定要引入的网页的路径
2. frameborder 指定内联框架的边框
   <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

10、音视频标签

audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：

1. controls 是否允许用户控制播放
2. autoplay 音频文件是否自动播放
   如果设置了autoplay 则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放
3. loop 音乐是否循环播放
   <audio src="./source/audio.mp3" controls autoplay loop></audio>
   除了通过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>

使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的