03.HTML常用标签

HTML常用标签

0.思维导图大纲

在这里插入图片描述

1.基本标签

详细介绍

在这里插入图片描述

注意

  1. 不要用 br 来增加文本之间的行间隔,应使用 p 元素,或后面即将学到的 CSS margin 属性
  2. hr 的语义是分隔,如果不想要语义,只是想画一条水平线,那么应当使用 CSS 完成

2.排版标签

介绍

标签名标签含义单/双标签
h1 ~ h6标题
p段落
div没有任何含义

注意

  1. h1 一个网页最好只写一个,h2 ~ h6 能适当多写
  2. h1 ~ h6 不能相互嵌套
  3. p 标签很特殊!它里面不能有:h1 ~ h6,p,div 标签

3.文本标签

介绍

  1. 用于包裹:词汇,短语等
  2. 通常写在排版标签里面
  3. 排版标签更宏观(大段的文字),文本标签更围观(词汇,短语)
  4. 文本标签通常都是行内元素

常用的

标签名标签含义单/双标签
em要着重阅读的内容
strong十分重要的内容(语气比em要强)
span没有语义,用于包裹短语的通用容器

不常用的

标签名标签含义单/双标签
cite作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑)
dfn特殊术语 ,或专属名词
del 与 ins删除的文本 【与】 插入的文本
sub 与 sup下标文字 【与】 上标文字
code一段代码
samp从正常的上下文中,将某些内容提取出来,例如:标识设备输出
kbd键盘文本,表示文本是通过键盘输入的,经常用在与计算机相关的手册中
abbr缩写,最好配合上 title 属性
bdo更改文本方向,要配合 dir 属性,可选值: ltr (默认值)、rtl
var标记变量,可以与 code 标签一起使用
small附属细则,例如:包括版权、法律文本。—— 很少使用
b摘要中的关键字、评论中的产品名称。—— 很少使用
i本意是:人物的思想活动、所说的话等等。现在多用于:呈现字体图标(后面要讲的内容)
u与正常内容有反差文本,例如:错的单词、不合适的描述等。——很少使用
q短引用 —— 很少使用
blockquote长引用 —— 很少使用
address地址信息

3.图片标签

介绍

可以用来显示图片,不属于行内元素,但是类似,也不是块级元素,是单标签

标签常用属性

在这里插入图片描述

在这里插入图片描述

注意

  • 尽量不同时修改图片的宽和高,可能会造成比例失调
  • 像素( px )是一种单位,学到 CSS 时,我们会详细讲解
  • 暂且认为 img 是行内元素(学到 CSS 时,会认识一个新的元素分类)

4.音频标签

介绍

显示音频,是双标签,音频文件支持很多格式

注意

音频加载后不会自动显示播放器的控制条,需要使用 controls 属性进行设置,属性值也是 controlso

常用属性

  • src:音频路径
  • controls:显示播放器控制条

代码示例

<audio src="audio.mp3" controls="controls"></audio>

5.视频标签

介绍

播放视频,是双标签,视频文件支持很多格式

注意

视频加载后不会自动显示播放器的控制条,需要使用 controls 属性进行设置,属性值也是 controlso

常用属性

  • src:音频路径
  • controls:显示播放器控制条

代码示例

<video src="audio.mp3" controls="controls"></audio>

6.超链接标签

介绍

HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

可以实现的功能

  1. 跳转到指定页面
  2. 跳转到指定文件(也可触发下载)
  3. 跳转到描点位置
  4. 唤起指定应用

标签常用属性

在这里插入图片描述

跳转页面

<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a><!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

跳转到文件

代码
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a><!-- 浏览器不能打开的文件,会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a><!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意
  1. 若浏览器无法打开文件,则会引导用户下载
  2. 若想强制触发下载,请使用 download 属性,属性值即为下载文件的名称

跳转到锚点

介绍

什么是锚点?网页中的一个标记点

使用步骤
  1. 设置锚点
  2. 跳转锚点
设置锚点
<!-- 第一种方式:a标签配合name属性 -->
<a name="test1"></a><!-- 第二种方式:其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
注意点
  1. 具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点
  2. name 和 id 都是区分大小写的,且 id 最好别是数字开头
跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a><!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a><!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a><!-- 刷新本页面 -->
<a href="">刷新本页面</a><!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
唤起指定应用
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

7.列表标签

有几种列表标签

  1. 有序列表
  2. 无序列表
  3. 自定义列表

有序列表

<h2>要把大象放冰箱总共分几步</h2>
<ol><li>把冰箱门打开</li><li>把大象放进去</li><li>把冰箱门关上</li>
</ol>

无序列表

<h2>要把大象放冰箱总共分几步</h2>
<ul><li>把冰箱门打开</li><li>把大象放进去</li><li>把冰箱门关上</li>
</ul>

自定义列表

<h2>如何高效的学习?</h2>
<dl><dt>做好笔记</dt><dd>笔记是我们以后复习的一个抓手</dd><dd>笔记可以是电子版,也可以是纸质版</dd><dt>多加练习</dt><dd>只有敲出来的代码,才是自己的</dd><dt>别怕出错</dt><dd>错很正常,改正后并记住,就是经验</dd>
</dl>

注意

  1. 列表可以嵌套,比如 li 里面在嵌套一个列表
  2. li 标签最好写在 ul 或 ol 中,不要单独使用

8.表格标签

构成

在这里插入图片描述

相关标签

  • table:表格
  • caption:表格标题
  • thead:表格头部
  • tbody:表格主题
  • tfoot:表格注脚
  • tr:每一行
  • th,td:每一个单元格

代码

<table border="1"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody><tr><td>张三</td><td></td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td></td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td></td><td>20</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td></td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot><tr><td></td><td></td><td></td><td></td><td>共计:4人</td></tr></tfoot>
</table>

标签常用属性

在这里插入图片描述

注意

  1. table 元素的 border 属性可以控制表格边框,但 border 值的大小,并不控制单元格边框的宽度只能控制表格最外侧边框的宽度
  2. 默认情况下,每列的宽度,得看这一列单元格最长的那个文字
  3. 给某个 th 或 td 设置了宽度之后,他们所在的那一列的宽度就确定了
  4. 给某个 th 或 td 设置了高度之后,他们所在的那一行的高度就确定了

10.表单标签

介绍

一个包含交互的区域,用于收集用户提供的数据

标签介绍以及常用属性

在这里插入图片描述

form标签

<form action="https://www.baidu.com/s" target="_blank" method="get"><input type="text" name="wd"><button>去百度搜索</button>
</from>

文本输入狂

代码
<input type="text">
常用属性
  1. name:数据的名称
  2. value:输入框的默认值
  3. maxlength:输入框可输入最大长度

密码输入框

代码
<input type="password">
常用属性
  1. name:数据的名称
  2. value:输入框的默认值
  3. maxlength:输入框可输入最大长度

单选框

代码
<input type="radio" name="sex" value="female"><input type="radio" name="sex" value="male">
常用属性
  1. name:数据的名称,想要单选效果,多个 redio 的 name 属性需要保持一致
  2. value:提交的数据值
  3. checked:让该单选按钮默认选中

复选框

代码
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
常用属性
  1. name:数据的名称
  2. value:提交的数据值
  3. checked:让该复选框默认选中

隐藏域

介绍

用户不可见的一个输入区域,作用是: 提交表单的时候,携带一些固定的数据

代码
<input type="hidden" name="tag" value="100">
常用属性
  • name:指定数据的名称
  • value:指定的是真正提交的数据

提交按钮

代码
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
注意
  • button 标签 type 属性的默认值是 submit
  • button 不要指定 name 属性
  • input 标签编写的按钮,使用 value 属性指定按钮文字

重置按钮

代码
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
注意
  • button 不要指定 name 属性
  • input 标签编写的按钮,使用 value 属性指定按钮文字

普通按钮

代码
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
注意

普通按钮的 type 值为 button ,若不写 type 值是 submit 会引起表单的提交

文本域

代码
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
常用属性
  • rows 属性:指定默认显示的行数,会影响文本域的高度
  • cols 属性:指定默认显示的列数,会影响文本域的宽度
  • 不能编写 type 属性,其他属性,与普通文本输入框一致

下拉框

代码
<select name="from"><option value="">黑龙江</option><option value="">辽宁</option><option value="">吉林</option><option value="" selected>广东</option>
</select>
常用属性
  • name:指定数据的名称
  • value:提交的数据
  • selected:默认选中
注意

option 标签设置 value 属性, 如果没有 value 属性,提交的数据是 option 中间的文字;如果设置了 value 属性,提交的数据就是 value 的值(建议设置 value 属性)

lable

介绍

label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点

两种使用方式
  1. 让 label 标签的 for 属性的值等于表单控件的 id
  2. 把表单控件套在 label 标签的里面

fieldset 与 legend

介绍

fieldset 可以为表单控件分组、 legend 标签是分组的标题

代码
<fieldset>
<legend>主要信息</legend>
<label for="zhanghu">账户:</label>
<input id="zhanghu" type="text" name="account" maxlength="10"><br>
<label>
密码:
<input id="mima" type="password" name="pwd" maxlength="6">
</label>
<br>
性别:
<input type="radio" name="gender" value="male" id="nan">
<label for="nan"></label>
<label>
<input type="radio" name="gender" value="female" id="nv"></label>
</fieldset>

11.iframe

介绍

在这里插入图片描述

实际应用

  1. 在网页中嵌入广告
  2. 与超链接或表单的 target 配合,展示不同的内容

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/220488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node-static 任意文件读取漏洞复现(CVE-2023-26111)

0x01 产品简介 node-static 是 Node.js 兼容 RFC 2616的 HTTP 静态文件服务器处理模块&#xff0c;提供内置的缓存支持。 0x02 漏洞概述 node-static 存在任意文件读取漏洞&#xff0c;攻击者可通过该漏洞读取系统重要文件&#xff08;如数据库配置文件、系统配置文件&#…

扩展学习|商务智能与社会计算

一、概念介绍 &#xff08;一&#xff09;商务智能 商务智能&#xff08;Business Intelligence&#xff0c;简称BI&#xff09;是一种基于数据分析的决策支持系统&#xff0c;旨在帮助企业或组织更好地理解和利用自身数据&#xff0c;发现其中的模式和趋势&#xff0c;并提供…

Spring配置动态数据库

首先创建一个SpringWeb项目——dynamicdb&#xff08;spring-boot2.5.7&#xff09; 然后引入相关依赖lombok、swagger2、mybatis-plus&#xff0c;如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven…

Python数据科学视频讲解:Python的数据运算符

2.9 Python的数据运算符 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解2.9节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括数据科…

stateflow 之图函数、simulink函数和matlab函数使用及案例分析

目录 前言 1. 图函数graph function 2.simulink function 3.matlab function 4.调用stateflow中的几种函数方式 前言 对于stateflow实际上可以做simulink和matlab的所有任务&#xff0c;可以有matlab的m语言&#xff0c;也可以有simulink的模块&#xff0c;关于几种函数在…

头歌-Python 基础

第1关&#xff1a;建模与仿真 1、 建模过程&#xff0c;通常也称为数学优化建模(Mathematical Optimization Modeling)&#xff0c;不同之处在于它可以确定特定场景的特定的、最优化或最佳的结果。这被称为诊断一个结果&#xff0c;因此命名为▁▁▁。 填空1答案&#xff1a;决…

机器学习:从概念到应用

机器学习&#xff1a;从概念到应用 一、引言 随着科技的飞速发展&#xff0c;人工智能已经渗透到我们生活的方方面面。作为人工智能领域的一个重要分支&#xff0c;机器学习正在改变我们的世界。它通过让计算机从数据中学习&#xff0c;实现自我优化和改进&#xff0c;为各行…

【Git从入门到精通 | 02】.gitignore忽略文件不生效怎么办?

这是机器未来的第64篇文章 原文首发地址&#xff1a;https://robotsfutures.blog.csdn.net/article/details/134989872 《Git源码版本管理系列》快速导航&#xff1a; 【Git从入门到精通 | 01】企业Git使用github工作流最佳实践 文章目录 1. 问题场景2. 原因解析3. 处理办法 写…

CTF-Java做题记录合集

文章目录 前言[CISCN 2023]deserbug[MTCTF2022]easyjava[羊城杯 2020]a_piece_of_java[红明谷CTF 2021]JavaWeb 前言 年底都比较忙&#xff0c;很久没有静下心来打过CTF了&#xff0c;最近Java的各种链子也是接触了不少&#xff0c;于是静下心来打算做点Java类的题目&#xff…

linux 网络子系统 摘要

当你输入一个网址并按下回车键的时候&#xff0c;首先&#xff0c;应用层协议对该请求包做了格式定义;紧接着传输层协议加上了双方的端口号&#xff0c;确认了双方通信的应用程序;然后网络协议加上了双方的IP地址&#xff0c;确认了双方的网络位置;最后链路层协议加上了双方的M…

【docker】镜像使用(Nginx 示例)

查看本地镜像列表 docker images删除本地镜像 # docker rmi [容器 ID]docker rmi a6bd71f48f68 查找镜像 docker search nginx 参数介绍 NAME: 镜像仓库源的名称DESCRIPTION: 镜像的描述OFFICIAL: 是否 docker 官方发布STARS: 点赞、喜欢AUTOMATED: 自动构建。 拉去镜像 …

SQL小技巧3:分层汇总

前几天&#xff0c;QQ学习群有个小伙伴问我一个使用SQL分层汇总的问题。 今天正好分享下。 需求描述 在数据报表开发的工作中&#xff0c;经常会遇到需要对数据进行分组汇总的情况。 假设有一个销售数据表sales&#xff0c;包含列region&#xff08;地区&#xff09;、mont…

LInux查看cpu、磁盘、内存、网络的命令

LInux查看cpu、磁盘、内存、网络的命令 1.查看cpu系列2.查看内存方面3.查看磁盘相关 1.查看cpu系列 想知道了cpu性能好不好、忙不忙可以用lscpu、uptime、top、htop。 1.1 top 命令查看系统的实时负载&#xff0c; 包括进程、CPU负载、内存使用等等 top内容详解 项目意义us用…

出海电商访问亚马逊打开很慢!有什么办法可以快速解决?

亚马逊作为全球最大的电商平台&#xff0c;很多中国卖家在平台上做着买卖。亚马逊中国卖每天都要频繁访问亚马逊店铺处理回复邮件和处理订单&#xff0c;上传产品等等事宜&#xff0c;但是时常会遇到打开一个新页面需要等待很长时间&#xff0c;更甚者直接打不开页面! 亚马逊打…

纸质表格扫描转Excel的利器,让您省钱省劲

将纸质表格扫描到电脑Excel上是一种快捷而高效的数字化处理方法&#xff0c;使得数据可以方便地进行编辑、分析和共享。本文将介绍几种常用的方法来完成这项任务。 第一种方法是使用扫描仪。现代扫描仪具备较高的分辨率和颜色还原能力&#xff0c;可以将纸质表格转化为高质量的…

Mybatis插件对指定字段加解密

Mybatis插件对指定字段加解密 1、需求环境&#xff1a;2、需求拆分3、代码实现 (懒得去除敏感信息了&#xff0c;先说明以下全是截图无代码)对存量数据对增量数据 1、需求环境&#xff1a; 在整个项目都结束之后&#xff0c;甲方希望库表内所有涉及到电话号码、详细地址、身份…

thinkphp连接数据库mysql 报错问题

第一 看报错日志php如果是下面这个报错的话 就是mysql 数据库没有验证连接 ​​​​​​​[2023-12-13T09:57:0108:00][error] [10501]SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client 我们就可以去mysql 的文件检查 验证身份 使…

Python爬取旅游网站热门景点信息的技术性文章

目录 一、引言 二、准备工作 三、爬取热门景点信息 1、分析网页结构 2、发送HTTP请求 3、解析HTML文档 4、提取所需信息 5、保存数据到文件或数据库 四、优化爬虫程序性能和效率 五、异常处理与日志记录 1、异常处理 2、日志记录 六、安全性与合法性考虑 七、总结…

leetcode--3. 无重复字符的最长子串[滑动窗口\哈希表 c++]

原题 &#xff1a; 3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&#xff09; 题目解析&#xff1a; 最长子串可以用滑动窗口解决&#xff0c;无重复字符可以使用哈希表解决。 算法原理&#xff1a; 滑动窗口哈希表 哈希表作为一个数组存放每个字符出现的次数。 …

java-集合

什么是算法和数据结构 【1】算法&#xff1a; &#xff08;1&#xff09;可以解决具体问题 :例如 1234。。。99100 解题流程算法 &#xff08;2&#xff09;有设计解决的具体的流程 算法1&#xff1a; 123 336 6410.....加到100 --》5050 算法2&#xff1a;(1100)*5…