音视频元素及 css 样式及优先级作业

1.音视频元素

视频标签
<video src="demo.mp4" width="300" controls muted autoplay loop poster="girl.jpg "></video>
</br>

controls 控制按钮
muted 播放时静音
autoplay 自动播放
loop 循环播放
poster=”girl.jpg “给视频增加封面与 autoplay 只能二选一
音频标签
<audio src="123.mp3" width="300" controls autoplay></audio>
</br>

controls 控制按钮
muted 播放时静音
autoplay 自动播放
loop 循环播放

2.CSS 样式及优先级

iframe 内联框架元素
<iframe src="https://j.map.baidu.com/f4/Lmsg" height="300" frameborder="3"></iframe>
</br>

frameborder=”3” 为内联框架线条宽度
height=”300” 为页面宽度
```
展示效果图:
![展示效果图]()
```

选项卡以 iframe+地图形式举例

```html
代码展示:
<div class="box">
  <div>
    <a style="color: rgb(0, 0, 0)">请选择所在城市<a/>
    <a href="https://j.map.baidu.com/f4/Lmsg" target="1">河南</a>
    <a href="https://j.map.baidu.com/24/xobg" target="1">安徽</a>
  </div>
  <iframe frameborder="3" width="500" height="500" name="1"></iframe>
</div>

</br>

在做选项卡时需注意`iframe`中的`name`标签 需与target标签属性一致.
width="500" 为iframe标签 宽度
height="500" 为iframe标签 高度
name="1" 为选项卡绑定数据
展示效果图:
![]()

CSS 样式来源

预定义样式(浏览器默认样式)
自定义(开发者自己编写的样式)
继承样式(简化,例如字体,字号,前景色等)
自定义样式类型
1.以行内样式添加,效果仅限当前行元素
举例:
html <h1 style="color:red">hello 张金明</h1>
2.使用<style></style> 元素,将当前页面中的公共样式进行提取,实现样式复用后,再通过选择器对样式进行设置.
举例:
```
<h1>hello 张金明</h1>
<h1>hello kuangna</h1>
<style>
  h1 {
    color: red;
  }
</style>
```
3.引用外部样式文件使用
<link rel="styleshee" href="xxx.css" />
4.自定义样式类型
4.1 行业样式使用:ele.style 应用于当前元素
4.2 文档样式使用<style>应用于当前文档
4.3 行内样式大于外部样式

简单选择器 *选择器==元素=标签+属性
1.标签选择器
针对单行标签做选择叠加属性
举例:

<h1>你好</h1>
<!-- css 应该写为 -->
<style>
  h1 {
    color: red;
  }
</style>

2.属性选择器

2.1 针对属性标签选择叠加属性(class 属性) 举例:
<h1 class="name">你好呀</h1>
<!-- css 应该写为  -->
<style>
  h1[class="name"] {
    color: red;
  }
</style>
<!-- - 语法糖形式 -->
<style>
  h1.name {
    color: rgb(10, 186, 127);
  }
</style>
2.2针对属性标签选择叠加属性(id 属性)
<h1 id="name">你好</h1>
<style>
  [id="name"] {
    color: red;
  }
</style>
<!-- - 语法糖形式  -->
<style>
  h1#name {
    color: red;
  }
</style>

3.上下文选择器,通过元素的位置与层级来匹配.

3.1父子关系:(仅限父子关系)
<ul class="list">
  <li class="itml">itml1</li>
  <li class="itml">itml2</li>
  <li class="itml">itml3</li>
  <li class="itml">itml4</li>
  <li class="itml">itml5</li>
  <li class="itml">itml6</li>
</ul>
<style>
  .list > .itml {
    border: 1px solid red;
  }
</style>
3.2后代关系:`空格` (后级所有元素)
<ul class="list">
  <li class="itml">itml1</li>
  <li class="itml">itml2</li>
  <li class="itml">
    itml3
    <ul>
      <li class="itml">itml1</li>
      <li class="itml">itml2</li>
      <li class="itml">itml3</li>
    </ul>
  </li>
  <li class="itml">itml4</li>
  <li class="itml">itml5</li>
  <li class="itml">itml6</li>
</ul>
<style>
  .list .itml {
    border: 1px solid red;
  }
</style>
3.3兄弟关系:`+` (相邻的下一个元素)
<ul class="list">
  <li class="itml">itml1</li>
  <li class="itml">itml2</li>
  <li class="itml">
    itml3
    <ul>
      <li class="itml">itml1</li>
      <li class="itml">itml2</li>
      <li class="itml">itml3</li>
    </ul>
  </li>
  <li class="itml one1">itml4</li>
  <li class="itml">itml5</li>
  <li class="itml">itml6</li>
</ul>
<style>
  /* 选中指定列 */
  .list > .itml.one1 {
    background-color: aqua;
  }
  /* 选中指定兄弟下一列 */
  .list > .itml.one1 + * {
    background-color: aqua;
  }
</style>
3.4同级关系:`~` (与当前元素同级的后面的全部元素)
<ul class="list">
  <li class="itml">itml1</li>
  <li class="itml">itml2</li>
  <li class="itml">
    itml3
    <ul>
      <li class="itml">itml1</li>
      <li class="itml">itml2</li>
      <li class="itml">itml3</li>
    </ul>
  </li>
  <li class="itml one1">itml4</li>
  <li class="itml">itml5</li>
  <li class="itml">itml6</li>
</ul>
<style>
  /* 选中后代所有 */
  .list > .itml.one1 ~ * {
    background-color: bisque;
  }
</style>

张金明你是最棒的~~~~

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

二十期·前端第一课作业。

2023-02-16 21:43:27