第二章：列表、表格与媒体元素

Ffengqing.@

已于 2023-12-20 08:28:35 修改

阅读量471

点赞数 16

文章标签：媒体前端 html5 html

于 2023-12-19 18:43:56 首次发布

本文链接：https://blog.csdn.net/2302_81923853/article/details/135088475

版权

第二章：列表、表格与媒体元素

一：基础单词</font/>
在这里插入图片描述

二：列表的概念：列表就是信息资源的一种展示形式

三：列表分为哪几种类型？

1.无序列表:（列表之间没有顺序级别之分，通常是使用粗圆点并列存在的）

语法：
<ul>
 	<li>列表项1</li>
    <li>列表项2</li> 
    <li>列表项3</li> 
  此代码省略 
</ul>   
                            (无序列表开始于<ul>，每个列表项始于<li>标签)


注意:
          <li>与</li>之间相当于一个容器，因此可以嵌套其他标签。
          但是<ul>与</ul>之间只能嵌套<li>标签。

在这里插入图片描述

2. 有序列表: (有序列表的各列表项必须按照一定的顺序排列)

语法：
<ol>
           <li>列表项1</li>
           <li>列表项2</li>
           <li>列表项3</li> 
      此代码省略 
</ol>                              （有序列表开始于<ol>每个列表始于<li>）

在这里插入图片描述

在这里插入图片描述

3. 定义列表:（定义列表不仅是一列项目，而且是项目及其注释的结合）

语法：
<dl>
      <dt>名词1</ldt>
      <dd>名词1的解释-第1项</dd>
      <dd>名词1的解释-第2项</dd> 
    此代码省略 
</dl>
   注意：（它以<dl>标签开始，每个定义列表以<dt>开始，每个定义列表项的定义以<dd>开始）

在这里插入图片描述

四：表格（表格是由若干行和若干列组成的）


语法：
<body>
    <table>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cel1 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
</body>

表格的标签:
是由<table>标签定义的，每个标签的行由<tr>标签定义, 每个行的单元格列由<td>标签定义。

  显示表格的轮廓:在<table>标签里设置border属性，用来制定边框的宽度。 
                在border属性中还可以添加表格高度、宽度等
  表格的表头：在表格的实际运用中，一个表格都有一个表头，即表格标题，
             它使用<th> 标签进行定义。并且大多数浏览器中会把表头显示为粗体居中的文本。

在这里插入图片描述

五：表格的跨行与跨列
表格的跨行：
跨行是指单元格在垂直方向上的合并，使用标签的rowspan属性实现单元格的跨行操作。

语法：
<table border="1"> 
          <tr>
            <td  rowspan="所跨的行数">单元格</td>
          </tr>
</table>

表格的跨列：
跨列是指单元格的横向合并，使用标签的colspan属性实现单元格的跨列操作。

语法：
<table border="1"> 
          <tr>
              <td  colspan="所跨的列数">单元格</td>
          </tr>
 </table>

六：HTML5媒体元素
1.标签（播放视屏）

语法：
<video  src=“视频路径”  controls=“controls” > </video> 
意义：
<video>标签用于定义一个视频，src属性用于指定要播放视频文件的路径，
controls:属性用于提供播放、暂停和音量控件来控制视频。
<source/>标签: 用于提示用户浏览器不支持<video>标签。

<video>标签的常用属性
1.	width：设置视频播放器的宽度
2.	.heigh：设置视频播放器的高度
3.	Src：要播放视频的URL
4.	Controls:如果出现该属性，则向用户显示控件，如播放按钮
5.	autoplay：如果出现该属性，则视频自动播放
6.	loop：如果出现该属性，则视频循环播放
7.	muted：如果出现该属性，则视频播出后为静音
8.	poster：规定视频正在下载时显示的图像，直到用户单击播放按钮
9.	preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。

在这里插入图片描述

2.标签（播放音频）

语法：
<audio  src=“音频路径”  controls=“controls” > </audio>
意义:
<audio>标签:用于定义一个音频
src属性:用于指定要播放视频文件的路径
controls属性:用于提供播放、暂停和音量控件来控制视频。
<source/>标签:用于提示用户浏览器不支持<audio>标签。

<audio>标签的常用属性：
1.	Src：要播放视频的URL
2.	Controls:如果出现该属性，则向用户显示控件，如播放按钮
3.	autoplay：如果出现该属性，则视频自动播放
4.	loop：如果出现该属性，则视频循环播放
5.	muted：如果出现该属性，则视频播出后为静音
6.	preload：规定当网页加载时，音频是否默认被加载及如何被加载

七：HTML5结构标签

<header>：定义为档的头部区域
<nav>：定义导航链接的部分
<section>：定义文档中的节，其包含一组内容及其标题
<article>：定义独立的内容
<aside>：定义页面主区域内容之外的内容（如侧边栏）
<footer>：定义文档的底部区域

例如：
  <title>页面</title>
  <style>
        header,
        section,
        footer {
            height: 200px;
            border: 1px solid red;
        }
  </style>
</head>
<body>
    <header>
        <h2>头部</h2>
    </header>
    <section>
        <h2>主体部分</h2>
    </section>
    <footer>
        <h2>底部</h2>
    </footer>
</body>

在这里插入图片描述

八：内嵌框架

语法：
<iframe  src=“页面地址”  width=“宽度”  height=“高度”  name=“名称” >  </iframe>

src:设置显示的页面路径
width:设置容器的宽度
height:设置容器的高度
name:设置容器的名称

含义： <iframe>框架用于在页面中的任意的位置嵌入另一个网页，如在自己的页面中引入京东、淘
宝商品详细页等。

框架的边框去除:style="border: 0;"
框架滚动轴去除:scrolling="no"