多媒体标签(图片、音频、视频)
1.图片标签(图片格式,应用场景,特点)
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停显示的内容 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 数字 | 设置图像边框的宽度 |
- border 后面我们会用css来做,这里大家就记住这个border 单词就好了
- width 和 height 作为了解即可,后续都会用CSS设置
2. 音频标签和视频标签(超链接标签(拨打电话 H5应用 、发送邮件))
语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
- 外部链接 需要添加 http:// www.baidu.com或https://www.baidu.com
- 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
- 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
列表标签
什么是列表呢?
容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表。
1. 无序列表
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li></li>
之间就相当于一个容器,可以容纳所有元素。- 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
2.有序列表
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
所有的特性有与ul标签一致,但是实际中比无序列表用的少的多。
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>
最后总结列表:
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序标签 | 里面只能包含li 没有顺序,我们以后布局中最常用的列表 |
<ol></ol> | 有序标签 | 里面只能包含li 有顺序, 使用情况较少 |
<dl></dl> | 自定义列表 | 里面有2个兄弟, dt 和 dd |
表格标签
表格作用:
存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据,因为它可以让数据显示的非常的规整,可读性非常好,特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。
- 创建表格
在HTML网页中,要想创建表格,就需要使用表格相关的标签。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
要深刻体会表格、行、单元格他们的构成。
在上面的语法中包含基本的三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释。
1.table用于定义一个表格标签。
2.tr标签 用于定义表格中的行,必须嵌套在 table标签中。
3.td 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
4.字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。
总结:
1.表格的主要目的是用来显示特殊数据的。
2.一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签。
3.<tr></tr>
中只能嵌套<td></td>
类的单元格。
4.<td></td>
他就像一个容器,可以容纳所有的元素。
表格属性
表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。
我们经常有个说法,是三参为0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0。
表头单元格标签th
-
作用
一般表头单元格位于表格的第一行或第一列,并且文本加粗居中 -
语法
只需用表头标签替代相应的单元格标签即可。
合并单元格
合并单元格是我们比较常用的一个操作,但是不会合并的很复杂。
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
- 先确定是跨行还是跨列合并
- 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如:
<td colspan="3"> </td>
- 删除多余的单元格 单元格
总结表格
标签名 | 定义 | 说明 |
---|---|---|
<table></table> | 表格标签 | 就是一个四方的盒子 |
<tr></tr> | 表格行标签 | 行标签要再table标签内部才有意义 |
<td></td> | 单元格标签 | 单元格标签是个容器级元素,可以放任何东西 |
<th></th> | 表头单元格标签 | 它还是一个单元格,但是里面的文字会居中且加粗 |
<caption></caption> | 表格标题标签 | 表格的标题,跟着表格一起走,和表格居中对齐 |
clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
- 表格提供了HTML 中定义表格式数据的方法。
- 表格中由行中的单元格组成。
- 表格中没有列元素,列的个数取决于行的单元格个数。
- 表格不要纠结于外观,那是CSS 的作用。
- 表格的学习要求: 能手写表格结构,并且能简单合并单元格。