前端初识（HTML）（2）

音频标签的介绍：

 

代码：<audio src=”./music.mp3” controls></audio>

视频标签：

 

<video src=”./video.mp4” controls></video>

链接标签

a标签

 

<a href=”./目标网页.html”>超链接</a>

链接标签的target属性

属性名：target

属性值：目标网页的打开形式

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

 

对于项目文件，index开头的是首页面内容，需要首先打开。

 

列表标签

无序列表、有序列表、自定义列表

无序列表：

 

场景：在网页中表示一组无顺序之分的列表，如:新闻列表。

标签组成：

 

显示特点：

列表的每一项前默认显示圆点标识

注意点：

ul标签中只允许包含li标签**（不允许放除li之外的任何标签）

li标签可以包含任意内容

有序列表：

 

场景：在网页中表示一组有顺序之分的列表，如:排行榜。

标签组成：

 

显示特点：

列表的每一项前默认显示序号标识

注意点：

ol标签中只允许包含li标签**（不允许放除li之外的任何标签）

l i标签可以包含任意内容

自定义列表：

 

场景：在网页的底部导航中通常会使用自定义列表实现。

标签组成：

 

显示特点：

dd前会默认显示缩进效果

注意点：

dl标签中只允许包含dt/dd标签**（不允许放除dt/dd之外的任何标签）

dt/dd标签可以包含任意内容

表格标签

表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表

基本标签：

 

注意点：

标签的嵌套关系: table > tr > td

表格相关属性

场景：设置表格基本展示效果

常见相关属性：

 

注意点：

实际开发时针对于样式效果推荐用CSS设置

表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

其他标签：

 

注意点：

caption标签书写在table标签内部

th标签书写在tr标签内部（用于替换td标签)

表格的结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰

结构标签：

 

注意点：

表格结构标签内部用于包裹tr标签

表格的结构标签可以省略

合并单元格-思路

场景：将水平或垂直多个单元格合并成一个单元格

 

合并单元格-代码实现

合并单元格步骤：

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并→只保留最上的，删除其他

左右合并→只保留最左的，删除其他

3.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并〈不能跨: thead、tbody、tfoot)

表单标签

input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input

input标签可以通过type属性的不同，展示不同效果

type属性值：

 

如果想快速输入，可以：

方法一：先输入inp，在弹出的提示中选择相应的属性：

 

方法二：先打标签<>,再输入人input，空格，ty，接着会有提示：

 

input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

 

input系列标签-单选框

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

 

注意点：

name属性对于单选框有分组功能

有相同name属性值的单选框为一组，一组中只能同时有一个被选中

input系列标签-文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

 

input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

 

注意点：

如果需要实现以上按钮功能，需要配合form标签使用

form使用方法:用form标签把表单标签一起包裹起来即可

表单域标签：

form，框住需要实现提交、刷新按钮作用的所有标签，进行统一处理的功能

button默认为空白按钮，如果要显示文字，需要在标签后加value=”名字”:

 

**对于其他按钮，也是一样，都可以通过value更改按钮名称

button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值（同input的按钮系列）：

 

注意点：

谷歌浏览器中button默认是提交按钮

button标签是双标签，更便于包裹其他内容:文字、图片等

select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签:下拉菜单的整体

option标签:下拉菜单的每一项

常见属性：

selected:下拉菜单的默认选中

textarea文本域标签

场景：

标签名：

常见属性：

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注意点：

右下角可拖拽改变大小

实际开发时针对样式效果推荐用CSS设置

label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法①：

1. 使用label标签把内容（如:文本)包裹起来

2．在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法②：

1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可

语义化标签

1.1没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签：一行只显示一个(独占一行)

span标签：一行可以显示多个

有语义的布局标签（了解，一般用于手机端）

场景：在HTML5新版本中 推出了一些有语义的布局标签供开发者使用

标签：

 

 

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

字符实体

目标：能通过字符实体在网页中显示特殊符号

学习路径：

1. HTML中的空格合并现象
2. 常见字符实体

常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文;

常见字符实体：