HTML标签学习

目录

1.排版标签

1.1.标题标签

1.2.段落标签

1.3.换行标签

1.4.水平线标签

2.文本格式化标签

3.媒体标签

3.1.图片标签

3.1.1图片标签的src属性:

3.1.2图片标签的alt属性

3.1.3图片标签的title属性

3.1.4图片标签的width和height属性

3.2.音频标签

3.3.视频标签

4.链接标签

5.列表标签

5.1.无序列表

5.2.有序列表

5.3.自定义列表

6.表格标签

6.1.表格的基本标签

6.2.表格的相关属性

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

6.4.表格的结构标签(了解)

6.5.合并单元格

7.表单标签

7.1.input系列标签

7.1.1.input系列标签的基本介绍

7.1.2.input系列标签-文本框

7.1.3.input系列标签-密码框

7.1.4.input系列标签-单选框

7.1.5.input系列标签-复选框

7.1.6.input系列标签-文件选择

7.1.7.input系列标签-按钮

7.2.button按钮标签

7.3.select下拉菜单标签

7.4.textarea文本域标签

7.5.label标签

8.语义化标签

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

8.2.有语义的布局标签(了解)

9.字符实体

9.1.HTML的空格合并现象

9.2.常见字符实体


  • HTML(Hyper Text Markup Language)中文译为:超文本标记语言
  • 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

1.排版标签

1.1.标题标签

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

代码: h系列标签

//<h1>1级标题</h1>
//<h2>2级标题</h2>
//<h3>3级标题</h3>
//<h4>4级标题</h4>
//<h5>5级标题</h5>
//<h6>6级标题</h6>

语义:1~6级标题,重要程度依次递减

特点:

  • 文字都有加粗
  • 文字都有变大,并且从h1 --> h6文字逐渐减小
  • 独占一行

1.2.段落标签

场景:在新闻和文章的页面中,用于分段显示

代码:<p>我是一段文字</p>

语义:段落

特点:

  • 段落之间存在间隙
  • 独占一行

1.3.换行标签

场景:让文字强制换行显示

代码: 

语义:换行

特点:

  • 单标签
  • 让文字强制换行

1.4.水平线标签

场景:分割不同主题的内容

代码:<hr>

语义:主题的分割转换

特点:

  • 单标签
  • 在页面中显示一条水平线

2.文本格式化标签

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

代码:

标签 说明 标签 说明

b 加粗 strong 加粗

u 下划线 ins 下划线

i 倾斜 em 倾斜

s 删除线 del 删除线

语义:突出重要性的强调语境(用右边的)

特点:

3.媒体标签

3.1.图片标签

场景:在网页中显示图片

代码:<img src="" alt="">

特点:

  • 单标签
  • img标签需要展示对应的效果,需要借助标签的属性进行设置

3.1.1图片标签的src属性:

属性名: src

属性值:目标图片的路径

注意点:

  • 当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
  • 路径情况有很多,分绝对路径和相对路径
  • 相对路径:当前文件(当前HTML网页)开始出发找目标文件的过程

同级目录: ./

下级目录:先找到在哪个文件夹里,进入这个文件夹-->/,再直接写目标文件的名字

上级目录:先出当前文件夹,到上一级目录-->../,再直接写目标文件

3.1.2图片标签的alt属性

属性名: alt 

属性值:替换文本

注意点:

  • 当图片加载失败时,才显示alt的文本
  • 当图片加载成功时,不会显示alt的文本

3.1.3图片标签的title属性

属性名: title

属性值:提示文本

注意点:

  • 当鼠标悬停时,才显示title的文本
  • title属性不仅仅可以用于图片标签,还可以用于其他标签

3.1.4图片标签的width和height属性

属性名: width和height

属性值:宽度和高度(数字)

注意点:

  • 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
  • 如果同时设置了width和height两个,若设置不当此时图片可能会变形

3.2.音频标签

场景:在页面中插入音频

代码:<audio src="./music.mp3" controls></audio>

常见属性:

属性名 功能

src  音频的路径

controls  显示播放的控件

autoplay  自动播放

loop 循环播放

注意点:

  • 音频标签目前支持三种格式:MP3、Wav、Ogg

3.3.视频标签

场景:在页面中插入视频

代码:<video src="./video.mp4" controls></video>

常见属性:

属性名 功能

src  视频的路径

controls  显示播放的控件

autoplay  自动播放(谷歌浏览器中需配合muted实现静音播放)

loop 循环播放

注意点:

  • 视频标签目前支持三种格式:MP4、WebM、Ogg

4.链接标签

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

称呼:a标签、超链接、锚链接

代码:超链接

特点:

  • 双标签,内部可以包裹内容
  • 如果需要a标签点击之后去指定页面,需要设置a标签的href(跳转地址)属性
  • 当开发网站初期,我们还不知道跳转地址的时候,href的值书写#(空连接)

##链接标签的target属性

属性名: target

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

取值 效果

_self 默认值,在当前窗口中跳转(覆盖原网页)

_blank 在新窗口中跳转(保留原网页)

5.列表标签

5.1.无序列表

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

标签组成:

标签名 说明

ul 表示无序列表的整体,用于包裹li标签

li 表示无序列表的每一项,用于包含每一行的内容

显示特点:

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

注意点:

  • ul标签中只允许包含li标签
  • li标签可以包含任意内容

5.2.有序列表

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

标签组成:

标签名 说明

ol 表示有序列表的整体,用于包裹li标签

li 表示有序列表的每一项,用于包含每一行的内容

显示特点:

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

注意点:

  • ol标签中只允许包含li标签
  • li标签可以包含任意内容

5.3.自定义列表

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

标签组成:

标签名 说明

dl 表示自定义列表的整体,用于包裹dt/dd标签

dt 表示自定义列表的主题

dd  表示自定义列表的针对主题的每一项内容

显示特点:

  • dd前会默认显示缩进效果

注意点:

  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

6.表格标签

6.1.表格的基本标签

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

基本标签:

标签名 说明

table 表格整体,可用于包裹多个tr

tr 表格每行,用于包裹td

td 表格单元格,可用于包裹内容

注意点:

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

6.2.表格的相关属性

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

常见相关属性:

属性名 属性值 效果

border 数字 边框宽度

width 数字 表格宽度

height 数字 表格高度

注意点:

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

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

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

其他标签:

标签名 名称 说明

caption 表格大标题 表示表格整体大标题,默认在表格整体顶部居中位置显示

th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

注意点:

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部(用于替换td标签)

6.4.表格的结构标签(了解)

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

结构标签:

标签名 名称

thead 表格头部

tbody 表格主体

tfoot 表格底部

注意点:

  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略

6.5.合并单元格

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

合并单元格步骤:

  1. 明确合并哪几个单元格
  2. 通过左上原则,确定保留谁删除谁

上下合并-->只保留最上的,删除其他

左右合并-->只保留最左的,删除其他

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

属性名 属性值 说明

rowspan 合并单元格的个数 跨行合并,将多行的单元格垂直合并

colspan 合并单元格的个数 跨列合并,将多列的单元格水平合并

注意点:

  • 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot

7.表单标签

7.1.input系列标签

7.1.1.input系列标签的基本介绍

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

标签名: input

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

type属性值:

7.1.2.input系列标签-文本框

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

type属性值: text 

常用属性:

(拓展)value属性和name属性作用介绍

value属性:用户输入的内容,提交之后会发送给后端服务器

name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义

后端接收到数据的格式是: name的属性值 = value的属性

7.1.3.input系列标签-密码框

场景:在网页中显示输入密码的表单控件

type属性值:password 

常用属性(同文本框):

 

注意点: 

  • type属性值不要拼错或者多加空格,否则相当于设置了默认值状态:text文本框

7.1.4.input系列标签-单选框

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

type属性值:radio 

常用属性:

注意点: 

  • name属性对于单选框有分组功能
  • 有相同name属性值的单选框为一组,一组中只能同时有一个被选中

7.1.5.input系列标签-复选框

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

type属性值:checkbox 

常用属性(同单选框):

7.1.6.input系列标签-文件选择

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

type属性值:file 

常用属性:

7.1.7.input系列标签-按钮

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

type属性值:

注意点: 

  • 如果需要实现以上按钮功能,需要配合form标签使用
  • form使用方法:用form标签把表单标签一起包裹起来即可

7.2.button按钮标签

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

标签名:button 

type属性值(同input的按钮系列): 

注意点: 

  • 谷歌浏览器中button默认是提交按钮
  • button标签是双标签,更便于包裹其他内容:文字、图片等

7.3.select下拉菜单标签

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

标签组成: 

  • select标签:下拉菜单的整体
  • option标签:下拉菜单的每一项

常见属性: 

  • selected:下拉菜单的默认选中

7.4.textarea文本域标签

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

标签名:textarea 

常见属性: 

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数

注意点: 

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用CSS设置

7.5.label标签

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

标签名:label 

使用方法 

  1. 使用label标签把内容(如:文本)包裹起来
  2. 在表单标签上添加id属性
  3. label标签的for属性中设置对应的id属性值

使用方法 

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

8.语义化标签

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

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

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

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

8.2.有语义的布局标签(了解)

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

标签: 

注意点: 

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

9.字符实体

9.1.HTML的空格合并现象

场景:如果在html代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格

9.2.常见字符实体

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

结构: &英文;

常见字符实体:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星球奋斗者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值