一.列表:信息资源展现的一种形式，使信息结构化和条理化，并且以列表的形式展现出来
1.1无序列表
语法：
<ul>
<li>女装/男装/内衣</li>
<li>鞋靴/箱包/配件</li>
<li>童装玩具/孕产/用品</li>
</ul>
特点：1.没有顺序，每个li元素独占一行（块级元素）
2.默认每个li元素前有一个实心的小圆点
3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
注意：
1.遵循W3C标准，ul标签下只能有li标签，但是li标签下可以包含任何标签
1.2有序列表
语法：
<ol>
<li>李强</li>
<li>李强2</li>
</ol>
特点：1.有顺序，每个li元素独占一行
2.默认每个li元素前有顺序标识1,2,3
3.一般用于排序类型的列表，例如：问卷调查，
1.3定义列表
语法：
<dl>
<dt>标题1</dt>
<dd>标题1的内容1</dd>
<dd>标题1的内容2</dd>
<dt>标题2</dt>
<dd>标题2的内容1</dd>
<dd>标题2的内容2</dd>
</dl>
特点：1.没有顺序，每个dt和dd标签独占一行
2.默认没有标记
3.一般用于一个标题下有 一个或者多个列表选项
二.表格
表格是块元素,发明该标签的初衷是用于表格数据
1.使用表格好处:
1)简单通用:
由于表格行列的简单结构,以及在生活中的广泛使用,因此对它的理解和编写都很方便
2)结构稳定:
>表格通常每行的列数一致,同行单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐
>这种严格的约束形成了一个不易变形的长方形盒子结构,堆叠排列起来结构很稳定
2.表格的基本结构
1)单元格:
单元格是表格的最小单位,一个或多个单元格纵横排列组成了列
2)行:
一个或多个单元格横向堆叠形成了行
3)列:
由于表格单元格的高度必须一致,因此单元格纵向排列形成了列
3.表格的基本语法
语法:
<tr> <th>第一行第一个</th> <th>第一行第二个</th> </tr> <tr> <td>第一列第一个</td> <td>第二列第一个</td> </tr>
创建表格如下:
1)创建表格标签<table>...</table>
2)在表格标签<table>...</table>里创建行标签<tr>...</tr>可以有多行
3)在第一行标签<tr>...</tr>里创建单元格标签<th>...</th>可以创建表格标题
4)在行标签<tr>...</tr>里创建单元格标签<td>...</td>可以有多个单元格
为了显示表格的轮廓,一般还需要设置<table>标签的border边框属性,指定边框的高度
4.表格的跨行与跨列
1)表格的跨列:
跨列是指单元格的横向合并
语法:
<table> <tr> <td colspan="所跨的列数">单元格内容</td> </tr> </table>
col为column(列)的缩写,span为跨度,所以colspan的意思为跨列
2)表格的跨行:
跨行是指单元格在垂直方向上的合并
语法:
<table> <tr> <td rowspan="所跨的行数">单元格内容</td> </tr> </table>
row为行的意思,rowspan即跨行
跨行或跨列操作时,需要以下两步骤:
>在需合并的第一个单元格,设置跨列或跨行属性
>删除被合并的其他单元格,即把某个单元格看成多个单元格合并后的单元格
3)跨行and跨列:
>有时表格中既有跨行又有跨列的情况,从而形成了相对复杂的表格显示
>跨行和跨列以后,并不改变表格的特点,同行的总高度一致,同列的总宽度一致
>表格中各单元格的宽度或高度互相影响,结构相对稳定,但缺点是不能灵活地进行布局控制
三.HTML5的媒体元素
1.视频元素
1)video元素的基本语法:
用来播放视频文件,支持Ogg(Ogg Vorbis的缩写),MPEG4,WebM等视频格式
语法:
<video src="视频路径" controls="controls"></video>
语法解析:
1)src属性用于指定要播放的视频文件的路径
2)controls属性用于提供播放,暂停和音量控件
3)也可以使用width和height设置视频的宽度和高度
注:如果浏览器不支持video元素,可以在video元素中间插入一段文字用于提示,这样就可以显示这段文字给用户:
<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>
2)video元素的应用:
示例:
<body> <video controls> <source src="video/video.webm"/> <source src="video/video.mp4"/> 你的浏览器不支持video标签 </video> </body>
注:
1)source元素连接到不同的视频文件,浏览器会自动选择第一个可以识别的格式:
>在video中虽然可以使用src属性链接视频路径,可是只能链接一种格式的视频,很难让每种浏览器都支持这种格式.所以就出现了source元素来解决这一问题,source元素嵌套在video里面,并且可以出现多次,每个source元素对应一种格式的视频,这样,浏览器会在这些格式中选择自己可以识别的一种来进行播放
2)在video元素中指定controls属性可以在页面上以默认的方式进行播放控制.如果不加这个属性,那么视频就不能直接播放
` 还有一种方法解决在页面内播放视频的问题即在video元素里设置另一个属性autoplay
设置auto[lay属性后,不需要与用户进行任何交互,就可以让视频文件加载完成后自动播放,所以人们大部分都不喜欢,所以要慎用
2.音频元素
1)audio元素的基本语法:
用来播放音频文件,支持Ogg,MP3,WAV等音频格式
语法:
<audio src="音频路径" controls="controls"></video>
语法解析:
1)src属性用于指定要播放的视频文件的路径
2)controls属性用于提供播放,暂停和音量控件
3)也可以使用width和height设置视频的宽度和高度
注:如果浏览器不支持audio元素,可以在audio元素中间插入一段文字用于提示,这样就可以显示这段文字给用户:
<audio src="音频路径" controls="controls">你的浏览器不支持audio标签</audio>
2)audio元素的应用:
示例:
<body> <audio controls> <source src="music/music.mp3"/> <source src="music/music.ogg"/> </audio>
</body>
视频元素和音频元素的语法及使用都一样,source用来链接到不同的音频文件,浏览器会自动选择第一个可以识别的格式
3.经验:
1)通过source引入的视频文件的格式至少包括WebM和MPEG4 或 Ogg和MPEG4
2)通过source引入的音频文件的格式至少包括WAV和MP3 或 Ogg和MP3
四.HTML5的结构元素
| 元素名 | 描述 |
header |
标题头部区域的内容(用于页面或页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用(常用于侧边栏) |
| nav | 导航类辅助内容 |
五.<iframe>框架
<iframe>框架的主要作用是使页面中的部分内容用框架实现,一般用于在页面中引用站外的页面内容,使用比较方便,灵活
1.语法:
<iframe src="引用页面地址" name="框架标示名"...></iframe>
2.使用:
<iframe>内联框架的常用属性包括name,width,height.其中name属性可以和锚链接结合起来实现页面间的互相跳转
<!--1)在被打开的框架上加name属性--> <iframe name="mainFrame" src="subframe/the_second.html" /> <!--2)在超链接上设置target目标窗口属性为希望显示的框架窗口名--> <a herf="subframe/the_second.html" target="mainFrame">下边显示第二页</a>
浙公网安备 33010602011771号