HTML详解连载(2)
- 专栏链接 [link](http://t.csdn.cn/xF0H3)
- 下面进行专栏介绍
- 开始喽
- 超链接
- 作用
- 代码示例
- 解释
- 经验分享
- 音频标签
- 代码示例
- 注意
- 强调
- 视频标签
- 代码示例
- 注意
- 强调
- 列表
- 作用:布局内容排列整齐的区域。
- 分类:无序列表,有序列表,定义列表
- 无序列表
- 作用
- 标签
- 示例
- 注意事项:
- 有序列表
- 作用
- 标签
- 示例:
- 注意事项:
- 定义列表
- 标签
- 示例
- 注意事项:
- 表格-基本用法
- 标签
- 标签名及说明
- 注意事项:
- 表格结构标签
- 作用
- 合并单元格
- 作用
- 步骤
专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。
开始喽
超链接
作用
点击跳转到其他页面。
代码示例
<a href=”https://www.baidu.com”>跳转到百度</a>
解释
href属性值是跳转地址,是超链接的必须属性。
属性加上target=”_black”新窗口打开页面
经验分享
开发初期,不知道超链接的跳转地址。href属性写#,表示空链接,不会跳转。
音频标签
代码示例
<audio src=”音频的URL”></audio>
注意
常见属性 | 作用 | 特殊说明 |
---|---|---|
src(必须属性) | 音频URL | 支持格式:MP3、Ogg、Wav |
controls | 显示音频控制面板 | |
loop | 循环播放 | |
autoplay | 自动播放 | 为提升用户体验,浏览器一般会禁用自动播放功能 |
强调
在HTML5中,如果属性名和属性值完全一样,可以简写为一个单词
视频标签
代码示例
<video src=”视频的URL”></video>
注意
常见属性 | 作用 | 特殊说明 |
---|---|---|
src(必须属性) | 音频URL | 支持格式:MP4、Ogg、WabM |
controls | 显示视频控制面板 | |
loop | 循环播放 | |
autoplay | 自动播放 | 为提升用户体验,浏览器支持在静音状态自动播放功能 |
强调
在浏览器中,想要自动播放,必须有muted属性
列表
作用:布局内容排列整齐的区域。
分类:无序列表,有序列表,定义列表
无序列表
作用
布局排列整齐的不需要规定顺序的区域
标签
ul嵌套li,ul是无序列表,li是列表条目
示例
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ul>
注意事项:
ul标签里面只能包裹li标签
li标签里面可以包裹任何内容
有序列表
作用
布局排列整齐的需要规定顺序的区域
标签
ol嵌套li,ol是有序列表,li是列表条目
示例:
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
……
</ol>
注意事项:
ol标签里面只能包裹li标签
li标签里面可以包裹任何内容
定义列表
标签
dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,
dd是定义列表的描述 /详情
示例
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
……
</dl>
注意事项:
dl里面只能包含dt和dd
dt和dd里面可以包含任意内容
表格-基本用法
网页中的表格与Excel表格类似,用来展示数据。
标签
table嵌套tr,tr嵌套td/th
标签名及说明
标签名 | 说明 |
---|---|
table | 表格 |
tr | 行 |
th | 表头单元格 |
td | 内容单元格 |
注意事项:
在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线
表格结构标签
作用
用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰
标签名 | 含义 | 特殊说明 |
---|---|---|
thead | 表格头部 | 表格头部内容 |
tbody | 表格主体 | 主要内容区域 |
tfoot | 表格底部 | 汇总信息区域 |
合并单元格
作用
将多个 单元格合并成一个单元格,以合并同类信息
步骤
1.明确合并目标
2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并,保留最上的单元格,添加属性rowspan
跨列合并,保留最左单元格,添加属性colspan
3.删除其他单元格