Loading... ## 列表 ### 列表的分类 * 有序列表 ol-li * 无序列表 ul-li * 定义列表 dl-dt-dd ### 有序列表 **语法结构** ```html <ol type="有序列表的类型"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol> ``` * 参数解释 * type 的取值范围 * A : 以大写字母实现排序显示 * a : 以小写字母实现排序显示 * I : 以罗马数字实现排序显示 * i : 以罗马数字实现排序显示(小写) * 1 : 以数字实现排序显示 [默认] ### 无序列表 **语法结构** ```html <ul type="无序列表的显示类型"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> .... </ul> ``` * 参数解释 * type 的取值范围 * square : 实心方块 * circle : 空心圆 * disc : 实心圆 [默认] ### 定义列表 **语法结构** ```html <dl> <dt>列表标题</dt> <dd>列表项</dd> <dd>列表项</dd> ... </dl> ``` * 📢 定义列表不支持type属性 ## 表格 ### 表格的组成 * 行 (row) * 列 (column) * 行和列交互的部分我们称之为: 单元格 (cell) ### 如何创建表格 **语法结构** ```html <table border="1" cellpadding="0" cellspacing="0" width="360" align="center"> <tr> <th>表格标题1</th> <!-- 表格标题默认居中显示,并且会加粗 --> <th>表格标题1</th> .... </tr> <tr> <td rowspan="1">内容1</td> <td colspan="2">内容2</td> .... </tr> .... </table> ``` * 属性解释 * border : 表格边框 [0: 没有边框 1: 具有边框] * cellpadding : 单元格的内边距 * cellspacing : 单元格的外边距 * width : 表格的宽度 * align : 表格水平对其方式 [ left : 居左显示 right : 居右显示 center : 居中显示 ] * rowspan : 单元格的夸行 [只能用在 th/td标签 上] (竖着) * colspan : 单元格的夸列 [只能用在 th/td标签 上] (横着) ## 媒体元素 ### 视频元素(video) **语法结构** ```html <video src="video/数据库的安装.mp4" width="500" height="500" controls loop autoplay muted></video> ``` * 属性解释 * src : 视频文件所存放的地址 * width : 视频播放区域的宽度 * height : 视频播放区域的高度 * controls : 显示操控面板 * loop : 进行循环播放 * autoplay : 进行自动播放 * muted : 静音 * 注意: 如果使用了autoplay,则必须配合muted属性,否则,浏览器将不会实现自动播放的操作 **扩展语法** ```html <video width="800" height="" loop autoplay controls meted> <source src="myvideo.mp4" type="video/mp4"></source> <!-- 导入mp4的视频文件 --> <source src="myvideo.ogv" type="video/ogg"></source> <!-- 导入ogv的视频文件 --> <source src="myvideo.webm" type="video/webm"></source> <!-- 导入webm的视频文件 --> <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> <!-- 导入flash视频文件 --> <param name="movie" value="myvideo.swf" /> <param name="flashvars" value="autostart=true&file=myvideo.swf" /> </object> 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a> </video> ``` * 属性解释 * width / height : 视频播放区域的宽度 / 高度 * `<source>` : 资源标签 * 注意: 以上的语法结构更符合浏览器的兼容性 * 浏览器对视频格式的兼容性 ### 音频元素(audio) **语法结构** ```html <audio src="audio/恰是你的温柔.mp3" controls loop autoplay muted></audio> ``` * 属性解释 * src : 当前音频文件所在的目录 * controls : 显示控制面板 [暂停/音量/播放进度...] * loop : 进行循环播放 * autoplay : 实现自动播放 * muted : 静音 * 注意: 如果使用了autoplay,则必须配合muted属性,否则,浏览器将不会实现自动播放的操作 * 浏览器对音频格式的兼容性 ## HTML5结构标签 🆕 * `<header> </header>` 网页的头部区域 : 网页Logo / 网站导航栏 / 全局搜索栏.... * `<nav> </nav>` 网页的到导航栏 * `<footer> </footer>` 网页的脚部区域: 版权信息 / 友情链接... * `<section> </section>` 网页中的独立模块 * `<aside> </aside>` 网页中的侧边栏/侧边广告 * `<article> </article>` 网页中的独立文章内容 ## 内联框架 **语法** ```html <iframe src="no2.html" width="500" height="600" name="newsInfo" frameborder="1" scrolling="no"></iframe> ``` * 属性解释 * src : 框架所要链接的url地址/文件目录地址 * width : 框架的宽度 * height : 框架的高度 * name : 框架的名称 (参考第一章的a链接) * frameborder : 框架边框 * scrolling : 是否允许滚动框架内容 * scrolling的取值范围[ auto : 自动 no : 不允许 yes : 允许] --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - 表单](https://jbea.cn/archives/516.html) </div> 最后修改：2024 年 04 月 22 日 © 允许规范转载 赞 10 都滑到这里了，不点赞再走！？
