【html】H2_列表、表格与媒体元素

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

列表

无序列表

<h3>无序列表h3>
		<ul>   
			<li>大国粮策li>
			<li>韩国炸鸡涨价一只卖到百元li>
			<li>唐山市委书记检查雷霆风暴行动li>
			<li>三星堆盲盒里还有多少隐藏款li>
			<li>优酷会员涨价了li>			
		ul>
无序列表的特性:
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

1
2
3
4
5
6
7
8
9
10
11
12
13

有序列表

<h3>有序列表h3>
		<ol>  
			<li>大国粮策li>
			<li>韩国炸鸡涨价一只卖到百元li>
			<li>唐山市委书记检查雷霆风暴行动li>
			<li>三星堆盲盒里还有多少隐藏款li>
			<li>优酷会员涨价了li>		
		ol>

有序列表的特性:
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
1
2
3
4
5
6
7
8
9
10
11
12
13

自定义列表：

<dl>
    <dt>水果dt>   
    <dd>苹果dd>
    <dd>桃子dd>
    <dd>李子dd>
dl>
没有顺序，每个<dt>标签、<dd>标签独占一行
1
2
3
4
5
6
7

列表对比

表格

表格的基本语法：

border:设置边框线的粗细 ；tr:行 ；td:单元格

• 合并列：colspan
• 合并行：rowspan
• 单元格内容水平移动：align
  right：右
  center：居中
  left：左
• 单元格内容垂直移动：valign
  top:上
  center：居中
  bottom：下

<table border="1" cellspacing="0">
     
        <tr>
        <td colspan="2" align="center">表格td>
            
        tr>
        <tr>
        <td>第1个单元格的内容td>
        <td>第2个单元格的内容td>		       
        tr>
        <tr>
        <td>第1个单元格的内容td>
        <td>第2个单元格的内容td>
        tr>
table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

网页上播放视频和音频

• 视频元素 video
• 音频元素 audio
• 属性：controls底部控件 ；src 播放地址 ； autoplay 自动播放 ；loop 循环播放 ；
• 解决兼容性问题：使用source 标签

语法：
<video src="视频路径"  controls="controls">video>
    

示例：
<video src="video/video.mp4" controls>video>

解决兼容性问题：哪种格式能播放显示哪种：
<video controls>
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
      
video>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

HTML5页面布局

<header><h2>网页头部h2> header>
<section><h2>网页主体部分h2>section>
<footer><h2>网页底部h2>footer>
1
2
3

动态更换内容*

iframe内联框架

语法：

<iframe src="http://www.xxx.com" name="mainFrame" >iframe>
       引用页面的地址      框架标识名
1
2

实例：

<a href="https://lenovo.ilive.cn/?f=stee"  target="mainFrame">点击打开联想浏览器a>
<a href="https://www.taobao.cn/"  target="mainFrame">点击打开淘宝a>
<a href="https://m.runoob.com/"  target="mainFrame">点击打开菜鸟教程a>
<a href="index.html"  target="mainFrame">点击打开了一个HTML页面a>


<iframe  name="mainFrame" width="800" height="500">iframe> 


 
1
2
3
4
5
6
7
8
9
10