首页 > 其他分享 >简单了解html常用的标签

简单了解html常用的标签

时间:2024-06-23 09:59:18浏览次数:21  
标签:lable 常用 场景 网页 标签 表单 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、父子关系(嵌套关系)
<head>
    <title></title>
</head>
2.2.2、兄弟关系(并列关系)
<head></head>
<body></body>

二、HTML标签学习

1、排版标签

1.1、标题标签
场景

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

代码

h系列标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

在这里插入图片描述

语义

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

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

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

代码
<p>第一个段落</p>
<p>第二个段落</p>

在这里插入图片描述

语义

段落

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

让文字强制换行显示

代码
<br>
语义

换行

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

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

代码
<hr>
语义

主题的分割转换

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

2、文本格式化标签

2.1、介绍
场景

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

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

突出重要性的强调语境

3、媒体标签

3.1、图片标签
场景

在网页中显示图片

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

当鼠标悬停时才显示文本

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

在页面中插入音频

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

在页面中插入视频

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

4、链接标签

场景

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

称呼

a标签、超链接、锚链接

代码
<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属性值说明
inputtext文本框,用于输入单行文本
inputpassword密码框,用于输入密码
inputradio单选框,用于多选一
inputcheckbox多选框,用于多选多
inputfile文件选择,用于上传文件
inputsubmit提交按钮,用于提交表单内容
inputreset重置按钮,用于重置
inputbutton普通按钮
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标签

一行可以显示多个

标签:lable,常用,场景,网页,标签,表单,html,属性
From: https://blog.csdn.net/weixin_63323754/article/details/139896307

相关文章

  • 02_Vue常用的一些指令
    文档:内置指令|Vue.js(vuejs.org) 1.v-on,给元素绑定事件监听器<!--方法处理函数--><buttonv-on:click="doThis"></button><!--缩写--><button@click="doThis"></button><!--点击事件将最多触发一次--><buttonv-on:click.......
  • 9.2JavaEE——JDBCTemplate的常用方法(一)excute()方法
    execute()方法用于执行SQL语句,其语法格式如下:jdTemplate.execute("SQL语句");下面以创建数据表的SQL语句为例,来演示excute()方法的使用,具体步骤如下。1、创建数据库        在MySQL中,创建一个名为spring的数据库。 mysql>createdatabasespring;QueryOK,1......
  • 常用JS特性浏览器支持版本查询
    此文仅供自己快速查询常用的特性。红色表示不支持。FeatureiOSAndroidChromeFirefoxES6Class10.34.4.44946箭头函数104.4.44522let10(for循环scope错误),114.4.441(strict模式),4944const10(scope错误),114.4.4(非严格模式)41(非严格没块域)......
  • C++ STL容器操作:6种常用场景算法
    C++STL容器操作:6种常用场景算法    •   引言   •   概述   •   查找与计数   ▪   std::find   ▪   std::find_if   ▪   std::find_if_not   ▪   std::find_end   ▪   std::find_first_of......
  • 313.带购物车功能的服装商城网页 大学生期末大作业 Web前端网页制作 html5+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这......
  • Linux常用命令2
    Linux基础命令21.top命令top可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行信息的实用工具。通过top命令所提供的互动式界面,用热键可以管理第一行:top-15:13:33up4min,1user,loadaverage:0.12,0.17,0.08内容含义15:13:33表示当前......
  • pytest测试框架pytest-html插件生成HTML格式测试报告
    Pytest提供了丰富的插件来扩展其功能,pytest-html插件帮助我们生成HTML格式的测试报告,为我们提供直观、有效的测试结果展示。为了使用pytest-html,需要满足以下条件:·Python3.6或更高版本pytest-html安装使用pip命令安装:pipinstallpytest-html(安装在pytest工程所......
  • 3_3、MFC常用控件用法:列表视图、树型控件和标签
    列表视图、树型和标签1、列表视图控件1.1简介通知消息列表视图控件相关结构体1.2创建CListCtrl类的主要成员函数1.3实例2、树型控件2.1简介通知信息相关数据结构2.2创建CTreeCtrl类的主要成员函数2.3实例3、标签控件3.1简介标签页的通知信息标签控件的相关......
  • HTML
    一、标签认识标记<!DOCTYPEhtml>:文档声明,声明的是HTML5<html></html>:html标签<head></head>:头部标签<title></title>:标题标签<body></body>:内容标签<p></p>:段落<span></span>:文本标签(行级标签)<i>&......
  • 纯html如何识别.vue文件并搭建vue项目
    前言使用原生html写vue项目。注意:是项目,而不是页面,此方式是不推荐的,毕竟有脚手架,但在一些及其特殊场景下,可能会需要类似的方式,因此作为一个记录。这种方式唯一的优点就是写完可以直接扔服务器上了-_-对html写vue的认知很多人对在html中运行vue项目这种内容,认知只......