web前端学习-html标签
web前端学习-html标签
- 1. HTML的基础知识
-
- 1.1 排版标签
-
- 1.1.1 标签标题
- 1.1.2 文本格式化标签
- 1.1.3 换行标签和分割线标签
- 1.1.4 文本格式化标签
- 1.2 媒体标签
-
- 1.2.1 图片标签
- 1.2.2 路径
- 1.2.3 音频标签
- 1.2.4 视频标签
- 1.2.5 链接标签
-
- 1.2.5.1 链接标签的基础介绍
- 1.2.5.2 链接标签的target属性
- 3. 列表标签
-
- 3.1 无序列表
- 3.2 有序列表
- 3.3 自定义列表
- 4 .表格标签
-
- 4.1表格的基本标签
- 4.2 表格的相关属性
- 4.3 表格的标题和表头单元格标签
- 4.4 表格的结构标签
- 4.5 合并单元格
- 5. 表单标签
-
- 5.1 inpu系列标签
- 5.2 input系列标签-文本框
- 5.3 input系列标签-单选框
- 5.4 文件选择
- 5.5 input系列-按钮标签
- 5.6 按钮标签
- 5.7 select下拉菜单标签
- 5.8 textarea文本域标签
- 5.9 lable 标签
- 5.10 语义化标签
-
- 5.10.1 没有语义的标签
- 5.10.1 语义标签
- 5.11 字符实体
1. HTML的基础知识
1.1 排版标签
1.1.1 标签标题
场景： 在新闻和文章的网页中，都离不开标题， 用来突出显示文章的标题
- h系列标签： 1~6级标题，重要程度依次递减
- 特点： 文字都有加粗，文字都有变大，并且从h1->h6文字逐渐减小，独占一行
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签title>
head>
<body>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
body>
html>
运行结果：
command + D： 快速选中相同的内容
1.1.2 文本格式化标签
场景： 在新闻和文章的页面中，用于分段显示
- 特点： 表示段落， 段落之间存在间隙， 独占一行
1.1.3 换行标签和分割线标签
- 单标签，在页面中显示一条水平线
- 单标签，在页面中显示一条水平线
1.1.4 文本格式化标签
- 场景：需要让文字加粗，下划线、倾斜、删除线等效果
- 代码：
b、strong都是表示文本加粗的效果u、ins:表示文本下划线i 、em:字体倾斜s、del删除线
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<b>b表示的字体加粗b>
<strong>strong表示的字体加粗strong> <br>
<u>u表示的文本下划线u>
<ins>ins表示文本下划线ins><br>
<i>i表示字体倾斜i>
<em>em表示字体倾斜em><br>
<s>s表示删除线s>
<del>del表示删除线del>
body>
html>
1.2 媒体标签
1.2.1 图片标签
- 场景：在网页中显示图片
- 代码：
- 特点：
- 单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置
scr:表示的图片的路径alt:表示替换文本，当图片加载失败的时候显示的文本，图片加载成功则不会显示title：提示文本，当鼠标悬停在图片上时，才显示的文本width、height:宽度和高度(数字)，如果只设置其中一个属性，另一个没有设置，图片会自动等比例缩放（此时图片不会变形），但是如果两个属性都设置了，若设置不当此时图片可能会变形
- 属性注意点：
- 标签的属性写在开始标签的内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性名之间必须以空格隔开
- 属性之间没有顺序之分
1.2.2 路径
- 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
- 例如：
/Users/dyc/Desktop/test.png - 相对路径：从当前文件出发寻找目标文件的过程
./：表示当前目录../：上级目录
1.2.3 音频标签
- 场景：在页面中插入音频
- 代码：
- 常见属性：
src：音频的路径controls：显示音频的播放控件autoplay: 自动播放（部分浏览器不支持这个属性，也就是设置了也没有效果）loop：表示循环播放- 注意点：音频标签目前只支持三种格式：MP3、Wav、Ogg
1.2.4 视频标签
- 场景：在页面中插入视频
- 代码：
- 常见属性：
src：音频的路径controls：显示视频的播放控件autoplay: 自动播放（谷歌浏览器中需要配合mute实现静音的自动播放）loop：表示循环播放
1.2.5 链接标签
1.2.5.1 链接标签的基础介绍
- 场景： 点击之后，从一个静态页面跳转到另外一个页面
- 称呼： a标签、超链接、锚链接
- 代码：
点击跳转到百度一下 - 特点：双标签，内部可以包裹内容，如果需要点击a标签去指定页面，需要设置a标签的
href属性，当你不知道这个链接需要填写啥时，你可以先填写一个#表示一个空链接，等确定正确的地址在修改
1.2.5.2 链接标签的target属性
target：表示目标网页的打开形式_self:默认值，在当前窗口中跳转（覆盖原网页）_blank:在新窗口中跳转（保留原网页）- 代码：
点击跳转到百度一下
3. 列表标签
学习列表标签的目的：能够使用无序列表、有序列表、自定义列表标签，实现网页中的列表结构的搭建
3.1 无序列表
无序列表的应用场景很多，比如在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
其特点是按照行的方式，整齐显示内容
- 无序列表的组成标签：
ul:表示无列表的整体，用于包裹的标签li:表示无序列表的每一项。用于包含每一行的内容- 特点：列表的每一项前都默认的显示圆点标识（后面可以通过css去掉）
- 注意点：
ul标签内只能包含li标签，li标签可以包含任何内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p>水果列表p>
<ul>
<li>榴莲li>
<li>香蕉li>
<li>苹果li>
<li>哈密瓜li>
<li>火龙果li>
ul>
body>
html>
3.2 有序列表
- 标签组成：
ol：表示有序列表的整体，用于包裹li标签li:表示有序列表的每一项。用于包含每一行的内容- 特点：列表的每一项前面都有序号
- 注意：
ol标签只允许包含li标签，li标签可以包含任何内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p>成绩排行榜p>
<ol>
<li>小姐姐：100分li>
<li>小帅哥：80分li>
<li>小可爱：60分li>
ol>
body>
html>
3.3 自定义列表
- 场景： 在网页的地步导航栏中通常会使用自定义列表的实现
- 标签组成：
dl:表示自定义列表的整体，用于包裹dt/dd标签dt：表示自定义列表的主题dd：表示自定义列表的每一项内容- 注意点：
dl标签内只允许包含dt/dd标签，dt/dd标签可以包含任意内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<dl>
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>购物指南dd>
<dd>订单操作dd>
dl>
body>
html>
4 .表格标签
4.1表格的基本标签
- 场景： 在网页中已行+列的单元格的方式整齐展示数据，如：学生成绩表
- 基本标签：
table：表格整体，可用于包裹多个trtr：表格每行，可用于包裹tdtd:表格单元格，可用于包裹内容- 注意点：标签的嵌套关系：
table>tr>td
4.2 表格的相关属性
border：表格的边框宽度（数字）width：表格宽度（数字）height: 表格高度 （数字）- 但是我们在实际开发过程中，对于样式效果设置
推荐使用CSS设置
4.3 表格的标题和表头单元格标签
caption：表格大标题，表示表格整体的大标题，默认在表格整体的顶部居中显示th:表头单元格，表示一列小标题，通常用于表哥的第一行，默认内部文字加粗并居中显示- 注意点：
caption标签书写在table标签内部，th标签书写在tr内部（用于替换td标签）
4.4 表格的结构标签
- 让表格的内容结果分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
thead:表格头部tbody:表格主体tfoot：表格底部- 注意点：表格结果标签内部用于包裹
tr标签，表格的结构标签可以省略，该结构标签对于显示效果没有说明作用，但是加上了结构标签，对于浏览器来说结构就比较清晰，执行起来效率会比较高，而且代码的结构也比较侵清晰
4.5 合并单元格
- 场景：将
水平或垂直多个单元格合并成一个单元格 - 标签属性：
rowspan:合并单元格的个数，跨行合并，将多行的单元格垂直合并colspan: 合并单元格的个数，跨列合并，将多列的单元格水平合并- 合并原则：左上原则（上下合并，保留最上的，删除其它，左右合并，保留最左边的，删除其她的）
- 注意点：只能同一个结构标签中的单元格才能合并
5. 表单标签
5.1 inpu系列标签
- input标签可以通过
type属性值的不同展示不同效果 - type属性值如下:
5.2 input系列标签-文本框
placeholder：占位符，提示童虎输入内容的文本
5.3 input系列标签-单选框
通过上面的例子，我们可以发现上面的单选框好像不能单选， 并且没有一个默认选中状态，是因为没有设置下面两个属性
name：分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中checked：默认选中
5.4 文件选择
对于文件的选择，我们还可以设置多文件的选择
multiple:多文件选择
5.5 input系列-按钮标签
- 场景：在网页中
显示不同功能的按钮表单控件 - type属性值：
submit:提交按钮，点击之后提交数据给后端服务器reset：重置按钮，点击之后恢复表单默认值button：普通按钮，默认无功能，之后配合js添加功能- 注意点：如果需要实现以上按钮功能，需要配合form标签使用，form的使用方法，用form标签把标签表单标签一起包裹起来即可
5.6 按钮标签
-
场景：在网页中显示用户点击的按钮
-
标签名：
button -
type属性值（同input的按钮系列）：
submit:提交按钮，点击之后提交数据给后端服务器reset：重置按钮，点击之后恢复表单默认值button：普通按钮，默认无功能，之后配合js添加功能- 注意点：谷歌浏览器中button默认是提交按钮，button标签是双标签，便于包裹其她内容：文字，图片等
5.7 select下拉菜单标签
-
场景：在网页中提供多个选这项的下拉菜单表单控件
-
标签组成：
select:下拉菜单的整体option:下拉菜单的每一项selected:下拉菜单的默认选中
-
快捷键：alt +shift+ ↓ ：快速创建复制一行内容到下一行
5.8 textarea文本域标签
- 场景：在网页中提供可输入多行文本的表单控件
- 标签名：
textarea - 常见属性：
cols:规定了文本域内可见宽度rows：规定了文本宽度可见行数- 注意点：右下角可以拖拽改变大小（后期开发中一般会禁掉），实际开发中正对样式效果
推荐使用CSS设置
5.9 lable 标签
- 场景： 常用于绑定内容和表单标签的关系
- 标签名:lable
- 使用方法：
- 使用lable标签把内容（文本）包裹起来，在表单标签上添加
id属性，在lable标签的for属性中设置对应的id的属性值 - 直接使用lable标签把内容（文本）和表单标签一起包裹起来，需要把lable标签的for属性删除即可
- 使用lable标签把内容（文本）包裹起来，在表单标签上添加
5.10 语义化标签
在html中有一些没有语义的布局标签（div，span）和有语义的布局标签
5.10.1 没有语义的标签
- 场景：实际开发网页时会大量频繁的使用到
div和span这两个没有语义的标签 div:一行只显示一个（独占一行）span：一行可以显示多个
5.10.1 语义标签
- 场景： 在html5的新版本中，推出了一些有语义的布局标签供开发者使用
- 标签：
5.11 字符实体
在开发的过程中，我们有时候需要添加一些符号，我们在代码中需要使用一些字符实体的代码来实现：
这里我们用到最多是空格的符号 都是英文下的标点符号
代码示例