新课限时0元
专属折扣1-2折
1000+免费课
每月享1110元礼券
下载学堂APP
缓存视频离线看
- 畅销套餐
- 精选套餐
- 人气套餐
- 尊享套餐
- 高薪套餐
- 课程介绍
- 课程大纲 试看
- 讲师好课 14
- 学员评价
适合人群：
零基础学员，大学生web前端入门
课程目标：
图片标签与多媒体标签 img audio video 列表标签 ul ol li 表格标签 table
课程简介：
图片标签与多媒体标签 img audio video
本节知识点 |
Img标签 |
Audio标签 |
Video标签 |
source标签（了解） |
1.1 img标签（非常重要）
Img元素可以向网页插入一副图像，支持的图片格式：jpg,bmp,gif,png
语法：
”图片的路径” alt=”对图片说明的文字” width=”” height=”” title=”说明文字”/>
实例：
见视频
注意事项：
1. img 是行内标签，是单标签。
2. 多种图片格式都可以（jpg,bmp,png,gif）
3. 当我们修改图片宽度时，高度会根据图片宽度等比例缩放（反之亦然）
1.2audio标签
1.2.1 定义和用法
语法：
您的浏览器不支持audio标签
实例：
您的网页不支持音频播放,请升级您浏览器
补充：
当前audio标签支持3种音频格式
IE9 | Firefox | opera | Chrome | safari | |
Ogg vorbis | √ | √ | √ | ||
Mp3 | √ | √ | √ | ||
wav | √ | √ | √ |
1.3 Video标签
语法：
您的浏 览器不支持video标签，请升级
<video src="imgs/video.mp4" controls="controls" height="400" poster="imgs/1.jpg" autoplay="autoplay">
你的浏览器不支持
video>
支持的格式：MPEG4、Ogg、MebM
1.4 Source标签
source标签一般用于video标签、audio标签定义媒体资源。允许视频或音频根据浏览器的兼容性进行选择。
1.选择合适的视频播放
当前浏览器不支持 video直接播放，点击这里下载视频： 下载视频
2. 选择合适的音频播放
2.列表标签 ul，ol, dl(学习)
2.1 ul无序列表标签
基本结构:
国际新闻
国内新闻
军事热点
数码、科技
时装
注意：
1.ul标签和li标签是组合使用。
2.li标签里面可以添加任何内容，或者嵌套标签也可以
3.无序列表会自动生成一个小圆点，一般在实际应用中会去掉。
2.2 有序列表ol
语法：定义子项顺序的。一般有编号（数字或字母或希腊字母）
小西瓜
注意：
有序列表type属性的几个值：
A表示显示的编号是大写字母
a表示编号是小写字母
I表示编号是罗马数字
i表示编号是小写罗马数字
默认情况下显示的是数字
实例：
2.3定义列表dl
什么是定义列表
dl标签定义了定义列表，通常用于名称的解释或者概念的定义。每个子项分为2个部分，一部分负责定义，另一部分负责解释
计算机资料
H5前端开发
JavaScript
NodeJS基础与提升
PhP语法基础与提升
文学书籍
诗歌
小说
散文
3. 表格table
3.1表格的使用
（1）table标签
（2）表格行、列的合并
课程大纲-Web前端工程师系列课程——HTML入门02视频课程
5
