简单了解html常用的标签

HTML

一、基础认知

1、注释

1.1、注释的作用和写法
1.1.1、作用

为代码添加解释性,描述性的信息,主要用来帮助开发人员理解代码,浏览器执行代码时回忽略所有注释。

1.1.2、注释的快捷键

在VS Code中:Ctrl + /

2、HTML标签的结构

2.1、结构说明
  1. 标签由<、>、/、英文单词或者字母组成。并且把标签中<>包括起来的英文单词或者字母称为标签名
  2. 常见的标签由两部分组成,我们称之为双标签。前半部分叫做开始标签,后半部分叫做结束标签,两部分之间包裹内容
  3. 少数标签由一部分组成,我们称之为:单标签,自成一体,无法包裹内容
2.2、HTML标签与标签之间的关系
2.2.1、父子关系(嵌套关系)
html 复制代码
<head>
    <title></title>
</head>
2.2.2、兄弟关系(并列关系)
html 复制代码
<head></head>
<body></body>

二、HTML标签学习

1、排版标签

1.1、标题标签
场景

在新闻和文章页面中,都离不开标题,用来突出显示文章主题

代码

h系列标签

html 复制代码
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
语义

一到六级标题,重要程度一次递减

特点
  • 文字都有加粗
  • 文字都有变大,从h1到h6逐渐变小
  • 独占一行
1.2、段落标签
场景

在新闻文章页面中,用于分段显示

代码
html 复制代码
<p>第一个段落</p>
<p>第二个段落</p>
语义

段落

特点
  • 段落之间有间隙
  • 独占一行
1.3、换行标签
场景

让文字强制换行显示

代码
html 复制代码
<br>
语义

换行

特点
  • 但标签
  • 让文字强制换行
1.4、水平线标签
场景

分割不同主题内容的水平线

代码
html 复制代码
<hr>
语义

主题的分割转换

特点
  • 但标签
  • 在页面中显示一条水平线

2、文本格式化标签

2.1、介绍
场景

需要让文字加粗 、++下划线++ 、倾斜 、删除线等效果

代码
标签 说明
b或者strong 加粗
u或者ins 下划线
i或者em 倾斜
s或者del 删除线
语义

突出重要性的强调语境

3、媒体标签

3.1、图片标签
场景

在网页中显示图片

代码
html 复制代码
<img src="" alt="">
图片标签的alt属性
属性值:替换文本
  • 当图片加载失败时,才显示alt文本
  • 当图片加载成功时,不会显示alt文本
图片标签的title属性
属性值:提示文本

当鼠标悬停时才显示文本

图片标签的width和height属性
属性值:宽度和高度
注意点
  • 如果只设置width和height中的一个,另一个没有设置的会自动等比例缩放(此时图片不会变形
  • 如果同时设置了,且比例不当时图片就会变形
属性注意点:
  1. 标签的属性写在开始标签内部
  2. 标签可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性名必须以空格隔开
  5. 属性之间没有顺序之分
特点
  • 单便签
  • img标签需要展示对应的效果,需要对标签的属性进行设置
3.2、音频标签
场景

在页面中插入音频

代码
html 复制代码
<audio src="" controls></audio>
常见属性
属性名 说明
src 音频路径
controls 显示播放的控件
autoplay 自动播放
loop 循环播放
3.3、视频标签
场景

在页面中插入视频

代码
html 复制代码
<video src="" controls></video>
常见属性
属性名 说明
src 视频路径
controls 显示播放控件
autoplay 自动播放
loop 循环播放

4、链接标签

场景

点击之后,从一个页面跳转到另一个页面

称呼

a标签、超链接、锚链接

代码
html 复制代码
<a href="">链接文字</a>
连接标签的target属性
属性值

目标网页的打开形式

取值 效果
_self 默认值,在当前窗口中跳转(覆盖原来的网页
_blank 在新窗口中显示(保留原网页
特点

双标签,可以包含内容

如果需要a标签点击之后去指定页面,需要设置a标签的href属性

5、列表标签

5.1、无序列表
场景

在网页中表示一组无顺序之分的列表

便签组成
标签 说明
ul 表示无序列表的整体,用于包裹li标签
li 表示无序列表的每一项,包含每一行的内容
注意
  • ul标签中只允许包含li标签
  • li标签中可以包含任意内容
5.2、有序列表
场景

在网页中,表示一组有顺序之分的列表

标签组成
标签 说明
ol 表示有序列表的整体,用来包裹li标签
il 表示有序列表的每一项
5.3、自定义列表
场景

在网页的底部导航栏中通常会使用自定义列表

标签组成
标签 说明
dl 表示自定义列表的整体,由于包含dd/dt标签
dt 表示自定义列表的主题
dd 表示自定义列表针对主题的每一项内容

三、表格标签

1、表格的基本标签

场景

在网页中以行+列的单元格方式整齐展示数据

基本标签
标签 说明
table 表格整体,用于包含多个tr
tr 表格每行,用于包含td
td 表格单元格,由于包裹内容

2、表格的相关属性

场景

这只表格基本展示效果

常见想过属性
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

3、表格的标题和表头的单元格标签

场景

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

标签
标签名 名称 说明
caption 表格大标题 表示表格整体大标题,默认在表格顶部居中位置显示
th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中
注意
  • caption标签写在table标签内部
  • th标签写在tr标签内部

4、合并单元格

步骤

明确合并哪几个单元格

通过左上原则,确定保留谁删除谁

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

属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并,将多行单元格垂直合并
colspan 合并单元格的个数 跨列合并,将多列单元格水平合并

四、表单标签

1、input系列标签

1.1、场景

在网页中显示收集用户信息的表单效果,标签名为input

1.2、type属性值
标签名 type属性值 说明
input text 文本框,用于输入单行文本
input password 密码框,用于输入密码
input radio 单选框,用于多选一
input checkbox 多选框,用于多选多
input file 文件选择,用于上传文件
input submit 提交按钮,用于提交表单内容
input reset 重置按钮,用于重置
input button 普通按钮
1.3、文本框
场景

在网页中输入单行文本的表单控件

type属性值:text
常用属性
属性名 说明
placeholder 占位符,提示用户输入内容的文本
1.4、单选框
场景

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

type属性值:radio
常用属性
属性名 说明
name 分组,有相同name属性的单选框为一组,一组中同时只能由一个被选中
checked 默认选中
1.5、文件选择
场景

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

type属性值:file
常用属性
属性名 说明
multiple 多文件选择

2、表单标签

2.1、select下拉菜单标签
场景

在网页中提供多个选则的下拉菜单表单控件

标签组成
  • select标签:下拉菜单的整体
  • option标签:下拉菜单的每一项
常见属性

selected:下拉菜单的默认选中

2.2、testarea文本域标签
场景

在网页中提供可以输入多行文本的表单控件

标签名:textarea
常见属性

cols:规定文本域内可见宽度

rows:规定文本域内可见行数

2.3、lable标签
场景

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

标签名:lable
使用方法
方法一
  1. 使用lable标签把内容包裹起来
  2. 在表单标签上添加id属性
  3. 在lable标签的for属性中设置对应的id属性

方法二

  1. 直接使用lable标签把内容和表单标签一起包裹起来
  2. 需要把lable标签的for属性删除即可

五、语义化标签

1、没有语义的布局标签div和span
场景

实际开发网页时会大量的使用到div和span两个没有语义的布局标签

div标签

独占一行

span标签

一行可以显示多个

selected:下拉菜单的默认选中

2.2、testarea文本域标签
场景

在网页中提供可以输入多行文本的表单控件

标签名:textarea
常见属性

cols:规定文本域内可见宽度

rows:规定文本域内可见行数

2.3、lable标签
场景

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

标签名:lable
使用方法
方法一
  1. 使用lable标签把内容包裹起来
  2. 在表单标签上添加id属性
  3. 在lable标签的for属性中设置对应的id属性

方法二

  1. 直接使用lable标签把内容和表单标签一起包裹起来
  2. 需要把lable标签的for属性删除即可

五、语义化标签

1、没有语义的布局标签div和span
场景

实际开发网页时会大量的使用到div和span两个没有语义的布局标签

div标签

独占一行

span标签

一行可以显示多个

相关推荐
ekskef_sef33 分钟前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6411 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻1 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云1 小时前
npm淘宝镜像
前端·npm·node.js
dz88i81 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr1 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安3 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网3 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工3 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼3 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js