day04 - 多媒体、列表、超链接1. 多媒体标签 1.1. video 视频标签用在这里语法素材 📎片头 -

1. 多媒体标签

1.1. video

视频标签

用在这里

语法

<video src="文件路径"></video>

素材

📎片头 - 4k.mov

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <video src="片头 - 4k.mov"></video>
  </body>
</html>

效果

问题来了，为什么视频无法播放，也没有播放按钮呢？？？

1.1.1. 属性

1.1.1.1. controls (控制组件)

语法

<video src="文件路径" controls></video>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <video src="片头 - 4k.mov" controls></video>
  </body>
</html>

效果

1.1.1.2. loop (循环播放)

语法

<video src="文件路径" controls loop></video>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <video src="片头 - 4k.mov" controls loop></video>
  </body>
</html>

效果

1.1.1.3. width (宽度)

语法

<video src="文件路径" controls width="数字"></video>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <video src="片头 - 4k.mov" controls width="600"></video>
  </body>
</html>

效果

1.1.1.4. height (高度)

语法

<video src="文件路径" controls height="数字"></video>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <video src="片头 - 4k.mov" controls height="200"></video>
  </body>
</html>

效果

1.1.1.5. poster

封面

1.1.1.6. muted

静音

1.1.1.7. autoplay

要想autoplay生效必须muted静音属性加上，为了防止恶意的视频广告

当然有特殊情况，有个词叫做“媒体参与度”，在浏览器输入"chrome://media-engagement/"，如下图：

1.1.1.8. preload

预加载

none

不进行预加载，视频多长不知道就是0，一点预加载的进度都没有

metadata

可以不预加载但是需要加载视频的基本信息，比如总时长

auto

浏览器自己决定，网速快加载的就快点网速慢加载的就慢点

www.w3school.com.cn/tags/tag_vi…

1.2. audio

音频标签

用在这里

语法

<audio src="文件路径"></audio>

素材

📎menu.mp3

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <audio src="童话镇.mp3"></audio>
  </body>
</html>

效果

1.2.1. 属性

1.2.1.1. controls (控制组件)

语法

<audio src="文件路径" controls></audio>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <audio src="menu.mp3" controls></audio>
  </body>
</html>

效果

1.2.1.2. loop (循环播放)

语法

<audio src="文件路径" controls loop></audio>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <audio src="menu.mp3" controls loop></audio>
  </body>
</html>

效果

1.2.1.3. muted

静音

1.2.1.4. autoplay

自动播放

1.2.1.5. preload

none
auto
metadata

音频即便是静音了也不会自动播放，没有意义

www.w3school.com.cn/tags/tag_au…

2. 列表

2.1. 有序列表

用在这里

语法

<ol>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  ......
</ol><!-- 有序列表的标签 -->

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>
  <body>
    <ol>
      <li>最编程，创未来！</li>
      <li>编程改变世界</li>
      <li>代码改善生活</li>
    </ol>
  </body>
</html>

效果

2.1.1. 属性

2.1.1.1. type

类型

语法

<ol type="a/1/I">
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ol>
type（排序类型）：阿拉伯数字（12345）、罗马数字（I）、26字母......

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>
  <body>
    <ol type="a">
      <li>最编程，创未来！</li>
      <li>编程改变世界</li>
      <li>代码改善生活</li>
    </ol>
  </body>
</html>

效果

2.1.1.2. start

从几开始

语法

<ol start="开始的数字">
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  ......
  <ol>
    <!-- 

    start（开始）：只能是数字。字母、罗马都不支持
    -->

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>
  <body>
    <ol type="1" start="5">
      <li>最编程，创未来！</li>
      <li>编程改变世界</li>
      <li>代码改善生活</li>
    </ol>
  </body>
</html>

效果

2.1.1.3. reversed

倒序

语法

<ol reversed="reversed">
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  ......
</ol>
reversed（倒着来）：reversed
reversed支持阿拉伯数字、罗马数字、字母倒序

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>
  <body>
    <ol type="a" start="c" reversed="reversed">
      <li>最编程，创未来！</li>
      <li>编程改变世界</li>
      <li>代码改善生活</li>
    </ol>
  </body>
</html>

效果

请说出下面选择题中哪几个属性是有序列表的，并解释其意思
- A:type
- B:align
- C:reversed
- D:width
- E:border
- F:start
- G:size

2.2. 无序列表

用在这里

语法

<ul>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
  ......
</ul><!-- 无序标签 -->

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>
  <body>
    <ul>
      <li>最编程，创未来！</li>
      <li>编程改变世界</li>
      <li>代码改善生活</li>
    </ul>
  </body>
</html>

效果

2.2.1. 属性

2.2.1.1. type

语法

<ul type="square/disc/circle">
  <li>内容</li>
  <li>内容</li>
  ......
</ul>

type（无序列表的形状）：disc（小圆点 默认的）、square（小方块）、circle（空心圆）

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>
  <body>
    <ul type="circle">
      <li>最编程，创未来！</li>
      <li>编程改变世界</li>
      <li>代码改善生活</li>
    </ul>
  </body>
</html>

效果

课堂互动

请说出下面选择题中哪几个属性是无序列表type的属性值，并解释其意思
- A:circle
- B:diamond
- C:reversed
- D:disc
- F:start
- G:square

3. 自定义列表

用在这里

语法

<dl>
  <dt>项</dt>
  <dd>描述项</dd>
</dl>

代码

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签讲解</title>
  </head>

  <body>
    <dl>
      <dt>
        <big>
          <em>
            <font color="orange" size="7">1
            </font>
          </em>
          &nbsp;&nbsp;&nbsp;获得账号
        </big>
      </dt>
      <ul>
        <li>只需要一个手机号或邮箱即可完成注册</li>
        <li>淘宝账号需绑定支付宝账号才能付款</li>
      </ul>
    </dl>
  </body>

</html>

效果

4. 超链接

用在这里

什么是超链接

链接源可以是网页中的任何元素图片、视频、音频、文字等等都可以

4.1. 如何实现超链接

语法

<a href="路径(要跳转到的目标地址)">链接源（点击什么要跳转）</a>

路径分类

相对路径

多用于站点内页面和页面之间的链接

写法一："html/index.html"
写法二："../../html/index.html"

需求：

从index.html网页跳转到HTML文件夹内的list.html
再从list.html网页跳回到index.html

目录结构：

代码

<!-- index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web/index.html - 我是三年七班的沈腾</title>
  </head>
  <body>
    <h1>我是index.html</h1>
    <a href="html/list.html">我要去list.html</a>
  </body>
</html>

<!-- list.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web/html/list.html - 我是三年八班的小岳岳</title>
  </head>
  <body>
    <h1>我是list.html</h1>
    <a href="../index.html">我要回到index.html</a>
  </body>
</html>

效果

绝对路径

多用于站点（天猫）与站点（淘宝）之间的链接

语法：

<a href="https/http开头的网址">链接源（点击什么跳转）</a>

目录结构：

无

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.ctrip.com/">我要去携程</a>
  </body>
</html>

效果：

4.2. 超链接属性

4.2.1. target属性

规定链接目标的打开方式

_blank（新窗口）
_self（当前窗口），_self属性值是默认值
_parent，到了网页开发项目的时候讲解_parent属性值

<a href="路径" target="属性值">链接源</a>

_self（默认，原窗口打开）

语法：

<a href="路径" target="_self">链接源</a>

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com/"
      target="_self"
      >我要去百度</a>
  </body>
</html>

效果

会把当前窗口覆盖掉

_blank（在新窗口中打开）

语法

<a href="路径" target="_blank">链接源</a>

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.ctrip.com/"
      target="_blank"
      >我要去携程</a>
  </body>
</html>

效果

在新的浏览器窗口打开

课堂互动

从 index.html 链接到 logo.png，语法结构正确的是
- A：<a href="logo.png">文本</a>
- B：<a href="imgs/logo.png">文本</a>
- C：<a href="../logo.png">文本</a>
- D：<a href="../imgs/about.png">文本</a>
以下超链接语法正确能实现在原窗口打开的是：
- A：<a href="www.sina.com.cn">新浪</a>
- B：<a href="http://www.baidu.com" target="_blank">百度</a>
- C：<a href="http://www.baidu.com" target="_self">百度</a>
- D：<a href="http://www.sina.com.cn">新浪</a>
需求：随机抽取一位学生在老师电脑上新建一个网页，然后点击超链接跳转到百度要求在新的窗口打开

4.3. 空链接

空链接，没有链接地址的时候，我们可以给一个空链接

语法

空链接有三种类型:
<a href="#">文本/图片</a>                    返回顶部
<a href="">点击为空</a>                    刷新，返回顶部
<a href="JavaScript:;">点击</a>         既不刷新也不返回顶部，推荐使用这个

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <hr size="20px" color="gold"/>
    <input type="text">
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
    <hr size="20px" color="pink"/>
  <hr size="20px" color="pink"/>
   <a href="#">点击空链接跳转顶部</a>
   <a href="">点击空链接刷新并返回顶部</a>                   
   <a href="JavaScript:;">点击空链接无效果</a> 
</body>
</html>

效果

<a href="#">点击空链接跳转顶部</a>

跳转前

跳转后回到了顶部

<a href="">点击空链接刷新并返回顶部</a>

跳转前

跳转后刷新了网页input框的内容不见了

<a href="JavaScript:;">点击空链接无效果</a>

点击无效果既不刷新也不会返回到顶部

总结

在实际开发中一般不会有空链接因为空链接对SEO不够友好，

在返回顶部我们可以用空链接去实现，但是用空连接去实现返回顶部有一个弊端就是没有办法很好的加动画效果比如慢慢返回顶部是没办法实现的。

当我们需要鼠标悬浮显示小手形状的时候也可以用到空链接，当然实现小手的形状别的标签也可以只需要设置对应的CSS属性即可。空链接可以解决一些问题但是扩展性可操作性很差。

现在一般用的很少了，之前用的多之前用的多是因为，前端完成页面数据交互需要后端完成，因此前端完成页面以后直接发给后端就可以了，但是页面上有很多超链接因此我们默认的先会给一个空的。现在用的很少是因为数据交互也交给前端完成了，因此我们现在基本不用空链接了

4.4. 锚点链接

用在这里

https://detail.vip.com/detail-1711283497-6919289864296427977.html#J-FW-aboutUs

概念

可以通过a标签定位到当前网页的指定位置

或者是其它网页的指定位置

语法

创建锚点（设置目的地）：<标签名 id="锚点名"></标签名>
链接到锚点（去目的地）：<a href="#锚点名">内容</a>

说明：
1. 创建锚点必须是name或者是id（name必须写在a标签上）
2. 锚点名任意命名，建议见名知义
3. href属性值一定包含井号"#"，创建锚点的时候不要加#

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <!-- 创建锚点名（设置目的地） -->
    <div id="top">顶部</div>



    <!-- 占位符（把浏览器撑高） -->
    <div style="height: 2000px;"></div>


    <!-- 链接到锚点（去目的地） -->
    <a href="#top">去顶部</a>
  </body>
</html>

效果

效果说明：锚链接其实就是指哪儿打哪儿，在咱们浏览网页的时候，网页页面特别大，我们一边浏览一遍往下划，看到页面底端的时候，我们想回页面顶端，只能一点一点往回划拉，那么我们用了锚链接，在浏览到页面最底部的时候，只需要点击回顶部的超链接，就可以直接回到页面顶端，非常方便

4.4.1. 锚点链接可以去页面的任意位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我是index页面</title>
  </head>

  <body>
    <!-- 创建锚点 -->
    <div id="top">顶部</div>
    <div style="height: 1000px;"></div>
    <div id="middle">这是中间</div>
    <div style="height: 1000px;"></div>
   <a href="#top">返回顶部</a>
   <a href="#middle">去中间</a>
  </body>
</html>

效果

4.4.2. 跨页面锚点链接

当我们 a.html跳转到b.html的时候默认的是b.html的顶部吧？我们有个需求，当从a.html跳转到b.html的时候直接定位到b.html的中间位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我是a.html</title>
</head>
<body>
	<h1>这是a页面</h1>
	<!-- 去我们在b页面设置好的目的地锚点 -->
	<a href="b.html#b-middle">去b页面</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我是b页面</title>
</head>
<body>
	<h1>这是b页面</h1>
	<div style="height: 1000px;"></div>
	<!-- 这里只是设置的锚点的目的 -->
	<div id="b-middle">这里是b页面的中间</div>
</body>
</html>

效果

4.5. 超链接默认外观

未被访问的链接带有下划线而且是蓝色的（你的电脑从来没有访问过的网站）

点击时链接带有下划线而且是红色的

访问后的链接带有下划线而且是紫色的

4.6. 唤起指定应用

拨打电话

<a href="tel:10000">给我打电话</a>

发送邮件

<a href="mailto:123456789@qq.com">给我发邮件</a>

发送短信

<a href="sms:10000">给我发短信</a>

最好是在手机上操作你会看到一个闭环完整的功能

4.7. 手机如何访问电脑上的网页

保证你的电脑和手机在同一个网段，简单说就是连接了同一个wifi
win + r打开小黑窗出入cmd

在小黑窗输入ipconfig获取到“无线局域网适配器”IPV4地址右边的IP地址

用VSCode服务器打开你的网页

用这个live server打开你的页面

把127.0.0.1/localhost改成IPV4地址右边的IP地址

在手机中的浏览器输入修改后的ip地址即可，我修改的地址是http://192.168.43.234:8080/web/index.html

当手机和电脑在同一个网段而且在PC端改完IP地址（127.0.0.1/localhost改成了ipconfig后的地址）后都能访问网页但是手机上无法访问，这个时候需要把windows系统的防火墙关闭掉

关闭防火墙的步骤

win + r然后在输入框输入control回车

选择“系统和安全”
选择防火墙

选择启动或关闭防火墙

关闭防火墙即可

5. 标签的分类

标签一共分为三类：行内元素、块级元素、行内块元素

5.1. 行内元素

不是独占一行的就叫做行内元素

有哪些标签是行内元素

超链接标签<a></a>
加粗标签<b></b>
倾斜标签<i></i>
下划线标签<u></u>
放大标签<big></big>
缩小标签<small></small>
上角标标签<sup></sup>
下角标标签<sub></sub>
行内盒子标签<span></span>
font标签

行内元素的特点

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。水平对齐方式align无效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我是index页面</title>
  </head>

  <body>
    <a href="tel:18001066666" width="2000" align="right">
      咱们班级的学生
    </a>
    <a href="">隔壁班级的学生</a>
  </body>
</html>

效果

5.2. 块级元素

有哪些标签是块级元素

标题标签<h1></h1>~<h6></h6>
段落标签<p></p>
水平线标签<hr/>
有序列表标签<ol></ol> <li></li>
无序列表标签<ul></ul>
自定义列表标签<dl></dl> <dt></dt> <dd></dd>
块级盒子标签<div></div>

块级元素的特点

块级元素独占一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我是index页面</title>
  </head>

  <body>
    <h1 align="center">hello</h1>
    <h2 align="right">hi</h2>
  </body>
</html>

效果

5.3. 行内块元素

有哪些标签是行内块元素

图片标签<img/>

行内块元素的特点

可以与其他行内元素位于同一行，可以设定元素的宽（width）和高（height）

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      img{
        width: 500px;
        height: 300px;
      }
    </style>
  </head>

  <body>
    <img src="pictrue.png"/>
    <img src="pictrue.png"/>
  </body>

</html>

效果

课堂互动

请同学们选择行内元素有哪些？
- A：div
- B：p
- C：span
- D：h1
- E：u
- F：i
- G：a
- H：hr
- I：b
- J：ins
- K：img
请同学们选择块级元素有哪些？
- A：div
- B：p
- C：u
- D：h3
- E：span
- F：i
- G：ul li
- H：hr
- I：b
- J：ins
- K：img
- L：ol li
- M：dl dt dd

5.4. 使用规则

块级元素中能写行内元素、块级元素以及行内块元素几乎什么都能写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <base target="_blank" />
  <title>Document</title>
</head>
<body>
 <div>
   <p>熊大</p>
   <span>熊二</span>
   <img src="imgs/baidu.png" width="100" alt="">
 </div>
</body>
</html>

行内元素中能写行内元素但是不能写块级元素

行内元素中能写行内元素和行内块元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <span>
        <span>熊二</span>
        <img src="imgs/baidu.png" width="100" alt="">
    </span>
</body>

</html>

行内元素中能写行内元素和行内块元素

行内元素中不能能写块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <span>
        <span>熊二</span>
        <img src="imgs/baidu.png" width="100" alt="">
        <div>熊三</div>
    </span>
    <span>
        熊四
    </span>
</body>

</html>

选中span但是div块元素被包裹在内了当做了行内元素，单独来看div依旧是块级元素

特殊规则，标题标签不能嵌套

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

</head>
<body>
    <h1>
        <h6>熊二</h6>
    </h1>
</body>
</html>

特殊规则，P标签中几乎不能写块元素

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

</head>
<body>
    <p>
        <div>熊二</div>
    </p>
</body>
</html>

day04 - 多媒体、列表、超链接

1. 多媒体标签

1.1. video

1.1.1. 属性

1.1.1.1. controls (控制组件)

1.1.1.2. loop (循环播放)

1.1.1.3. width (宽度)

1.1.1.4. height (高度)

1.1.1.5. poster

1.1.1.6. muted

1.1.1.7. autoplay

1.1.1.8. preload

1.2. audio

1.2.1. 属性

1.2.1.1. controls (控制组件)

1.2.1.2. loop (循环播放)

1.2.1.3. muted

1.2.1.4. autoplay

1.2.1.5. preload

2. 列表

2.1. 有序列表

2.1.1. 属性

2.1.1.1. type

2.1.1.2. start

2.1.1.3. reversed

2.2. 无序列表

2.2.1. 属性

2.2.1.1. type

3. 自定义列表

4. 超链接

4.1. 如何实现超链接

4.2. 超链接属性

4.2.1. target属性

4.3. 空链接

4.4. 锚点链接

4.4.1. 锚点链接可以去页面的任意位置

4.4.2. 跨页面锚点链接

4.5. 超链接默认外观

4.6. 唤起指定应用

4.7. 手机如何访问电脑上的网页

5. 标签的分类

5.1. 行内元素

5.2. 块级元素

5.3. 行内块元素

5.4. 使用规则

6. 作业

6.1. 作业一

6.2. 作业二

6.3. 作业三