HTML常用的简单标签

语义化标签

在网页中HTML专门用来负责网页的结构, 所以在使用html标签时,应该关注的是标签的语义，而不是它的样式。
小技巧：VScode中ctrl+回车可以只让光标下移。

块元素block

在页面中独占一行的元素称为块元素。
在网页中一般通过块元素对页面进行布局

行内元素nline

在页面中不会独占一行的元素称为块元素。
主要用来包裹文字

块元素和行内元素的位置关系

块元素：Block
行内元素：inline

• 块元素里面什么都可以放：block，inline
• 行内元素中不可以放块元素
• 特殊：
  • <p>是块元素，但是<p>标签中不可以放块元素
  • <a>是行内元素，但是<a>标签中什么都可以放，但是不可以放自己

浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如:
标签写在了根元素的外部p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
修改结果在内存中显示。
查看方法：浏览器右键选择检查 ->元素

h标签——块元素

标题标签:
h1 ~ h6一共有六级标题
从h1~h6重要性递减,h1最重要,h6最在重要。
h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个标题。

• hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup分组

p标签—— 块元素

在p标签中的内容是一个段落

em标签——行内元素

用于语音语调的加重

<p>今天天气<em>真</em>不错</p>

strong标签——行内元素

表示重要内容

<p>今天天气<strong>真</strong>不错</p>

blockquote——块元素

引用，长引用

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

q——行内元素

短引用

鲁迅说：
    <q>
        这句话我是从来没有说过的
    </q>

br——块元素

br换行

路径地址问题

• 绝对地址：一般用于跳转到外部链接
  eg: http://
• 相对地址：一般用于跳转到内部链接
  ./ :表示当前文件所在的目录
  ../ : 表示当前文件所在目录的上一级目录

快速生成文字

lorem + Tab键

Content sectioning

header : 表示网页的头部
main: 表示网页的主主体
footer ： 表示网页的底部
nav ： 表示网页导航
aside : 和主题相关的其他内容（侧边栏）
article : 表示一个文章块，里面还可以在嵌套文章
section : 表示一个独立的区块，上面的标签都不合适时都用section

• div : 块元素，没有语义就是表示一个区块，是我们主流的布局元素。
  上面的标签的显示效果和div没有什么不同，只是语义上的不同，不同的样式效果还是要用CSS进行修改，。
• span： 行内元素，没有任何语义，用于在网页中显示文字

列表list

• 有序列表 ——ol
• 无序列表 ——ul
  有序列表和无序列表都是用li标签来表示列表项

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>

• 定义列表
  定义列表,使用dl标签来创建一个定义列表
  使用dt来表示定义的内容
  使用dd来对内容进行解释说明

   <dl>
      <dt>结构</dt>
      <dd>html是网页的结构</dd>
    </dl>

列表之前可以互相嵌套。

超链接a——行内元素

作用：让我们从一个页面跳转到其他页面，或者一个页面的其他部分
a标签中可以嵌套出自己之外的任何元素。

属性：

• href属性：表示跳转地址

  • 另一个页面
    绝对路径：直接以http:开头的路径
    相对路径：
    ./ :表示当前文件所在的目录（可以省略不写，默认值）
    ../ : 表示当前文件所在目录的上一级目录

  • 同一个页面内的跳转
    # ：可以直接将超链接的href属性设置为#，这样点击超链接以后
    页面不会发生跳转，而是转到当前页面的顶部的位置
    id属性：id属性就是标签的唯一标识，不能重复，名字不要以数字开头
    可以通过id属性跳转到页面的指定位置,只需将href属性设置为 #目标元素的id属性值

  • href的占位符
    如果不想让超链接发生跳转，可以使用 <a href="javascript:;"></a>进行占位。

eg：不同页面，绝对路径

<a href="http://baidu.com">超链接</a>

• target属性：用来指定超链接打开的位置
  可选值:
  _self （默认值）：在当前页面中打开超链接
  _blank ： 在一个新的页面中打开超链接

img标签——替换元素

img标签来引入外部图片，是一个自结束标签。
属性：

• src 指定的是外部图片的路径（路径规则和超链接一样）；
• alt：图片的描述，有些浏览器会哦在图片无法加载时显示。alt的作用，给浏览器看，浏览器通过标签来关联图片。
• width图片的宽度(单位是像素）
• height图片的高度
  宽度和高度有一个属性变了，另一个属性也会跟着变，等比例缩放。

img是一种替换元素，被引入的资源所代替，称为替换元素。
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放(大图缩小)。

图片格式：

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

使用方法：将编码结果直接写在src中。

页面一旦加载立即出现

• 图片的选择原则
  效果一样，用小的
  效果不一样，用效果好的

内联框架

iframe ： 内联框架用于在当前页面引入一个外部的其他页面。

  <iframe src="https://www.qq.com" frameborder="0"></iframe>

属性：
src: 引入的地址
width：可以设置引入窗口的高度
frameborder ：表示内联框架的边框。

音频播放标签

（1）audio标签进行播放。

<audio src="video/小星星.mp3"></audio>

默认情况下不显示音频播放的进度条，不会自动播放，可以添加如下属性

• controls： 可以显示播放页面
• autoplay： 自动播放 。但是为了用户体验，这个属性一般不会起作用
• loop : 循环播放

    <audio src="video/小星星.mp3" controls autoplay></audio>

• 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
  使用score的优点：可以指定多个音频，解决浏览器的兼容问题，不同的浏览器支持的音频的格式不一样，不同的浏览器选择对应的格式进行播放。

   <audio controls>
     对不起您的浏览器不支持
     <source src ="video/小星星.mp3">
     <source src ="video/小星星.ogg">
   </audio>

（2）embed
embed是一个支持老版本浏览器的音频播放标签
eg：E8就不支持audio，就可以使用embed
<embed src="" type="">
自动播放
通过width和height来指定大小

   <embed src="./video//小星星.mp3" type="audio/mp3">

type=“audio/mp3”
audio：表示文件的大类型
mp3 ：表示文件的具体类型。

（3）设计所有浏览器版本都支持的代码

   <audio controls loop>
     <source src ="video/小星星.mp3">
     <source src ="video/小星星.ogg">
     <embed src="./video//小星星.mp3" type="audio/mp3" width="200px" height="100px"> 
   </audio>

IE8:

Chrome：

视频播放标签

使用video标签， 属性和audio基本上一样

  <video controls width="1000px">
     <source src="./video/1.996(Av980034291,P1).mp4">
   </video>

解决兼容问题

   <video controls width="1000px">
     <source src="./video/1.996(Av980034291,P1).mp4">
      <source src="./video/1.996(Av980034291,P1).webm">
      <embed src="./video/1.996(Av980034291,P1).mp4" type="video/mp4">
   </video>

想要引入别的网站的视频，这里以腾讯视频为例：
打开一个腾讯视频，点击分享


选择嵌入代码块，将复制的内容写到自己的代码中即可。

 <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=i0042znd9iv" allowFullScreen="true" width="1000px" height="600px"></iframe>

这样做的好处是将来发布到服务器上，可以减小自己服务器的压力
缺点：有水印