HTML -- 常用标签

  • 标签

表示HTML网页内容的一个最基本的组织单元,类似于语文中的标点符号,

标签的作用:告诉浏览器当前标签中的内容是什么,以什么格式在页面中进行呈现

  • 单标签

单标签(只有一个标签名的标签)的标签格式:

<标签名>
<标签名 />
<标签名 属性名="属性值" 属性名/>

网页中的常见单标签: 

标签名描述
<meta>元信息标签
<link>css外观样式的外链引入标签(类似于import)
<img>图片标签
<input>输入框标签
<br />换行标签,浏览器遇到br标签就会自动进行内容换行(类似于/r /n)
<hr />分格线标签,代表分隔内容的一条横线

  • 双标签

双标签(成对标签名出现,有开始标签和结束标签)的标签格式:

<标签名> 内容 </标签名>

网页中的常见双标签: 

标签名描述
<h1></h1>网页的一级标题
<h2></h2>网页的二级标题
......
<h6></h6>网页的六级标题
<p></p>网页的段落
<a></a>网页超链接
<div></div>块级结构标签
<span></span>行级结构标签
<form></form>表单标签,表示网页的一个提供给用户输入数据的表单
<ul></ul>无序列表结构标签,表示网页的一个内容列表
<li></li>列表项目标签
<table></table>表格标签,表示网页的一个表格
  • 常见标签的使用

注:HTML中的标签是由HTML语法提供的,所以每个标签名都是固定的

而XML中的标签是可以自定义的,但XML中的语法更为严谨

 标题和段落

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML常见标签的使用</title>
</head>
<body><h1>h1标题:常用于网站的logo、标题</h1><h2>h2标题:常用于网站的模块标题、栏目标题</h2><h3>h3标题:常用于网站的模块标题、栏目标题</h3><h4>h4标题:常用于网站的附加板块标题或是文章的标题</h4><h5>h5标题:更小级别的标题,基本用不到</h5><h6>h6标题:更小级别的标题,基本用不到</h6><p>p段落</p></body>
</html>

 换行、分隔、超链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>换行br/分隔符hr/超链接a</title>
</head>
<body><a href="https://baike.baidu.com/item/将进酒/5312" title="将进酒"><h1>将进酒</h1></a><p>君不见黄河之水天上来,奔流到海不复回。<br>君不见高堂明镜悲白发,朝如青丝暮成雪。<br>人生得意须尽欢,莫使金樽空对月。<br>天生我材必有用,千金散尽还复来。<br>烹羊宰牛且为乐,会须一饮三百杯。<br>岑夫子,丹丘生,将进酒,杯莫停。<br>与君歌一曲,请君为我倾耳听。<br></p><hr><h2>译文</h2><p>你可见黄河水从天上流下来,波涛滚滚直奔向大海不回还。<br>你可见高堂明镜中苍苍白发,早上满头青丝晚上就如白雪。<br>人生得意时要尽情享受欢乐,不要让金杯空对皎洁的明月。<br>天造就了我成材必定会有用,即使散尽黄金也还会再得到,<br>煮羊宰牛姑且尽情享受欢乐,一气喝他三百杯也不要嫌多。<br>岑夫子啊,丹丘生啊,快喝酒啊,不要停啊。<br>我为在坐各位朋友高歌一曲,请你们一定要侧耳细细倾听。<br></p>
</body>
</html>

 

超链接的2中常用用法:页面跳转、下载文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--页面跳转:如果href的值是网络页面时,跳转到指定页面--><a href="http://baidu.com">百度一下</a><br><!--页面跳转:如果href的值是本地地址时,跳转到本地的内部网页--><a href="./1_3_4-超链接页面.html">跳转到本地页面</a><br><!--下载资源:当href的值是一个浏览器无法直接展示的内容格式时,浏览器会自动下载当前路径对应的内容--><a href="./html">点击下载</a><!--下载资源:当href的值是一个浏览器可以直接识别并展示的内容格式时,用户可鼠标右键,对当前href的值进行另存为下载--><a href="./attribute.png">点击下载图片(使用“鼠标右键,另存为”的方式)</a>
</body>
</html>

 实际上,页面跳转也是下载文件的一种,因为用户能在浏览器里面看到的所有内容,实际上都是经过浏览器下载到本地,用户才能看到。可以通过F12(打开开发者工具)->network(网络)查看

  •  属性

标签的作用就是用于展示内容,但是内容有时候并非文本,且文本的展示需要附加一些额外的效果时,就需要使用标签的属性来声明。不管是单标签还是双标签,都有属性[Attribute]。

标签的属性有两种:

  •  普通属性:属性名与属性值使用"="关联,属性值使用单引号或双引号围住
  •  布尔属性:只有属性名,没有属性值,或是属性值只有True或False  (不是直接在后面写上True或False,而是当标签中写上这个属性名,则其值表示为True,反之为False)

 属性的使用

<!DOCTYPE html>
<html lang="en"> <!--lang就是HTML标签的属性,代表当前网页的默认语言language为english-->
<head><meta charset="UTF-8"> <!-- charset是meta元信息标签的属性,表示当前网页的编码是utf-8--><title>HTML常见标签的使用</title>
</head>
<body><!-- 双标签的属性 --><!--align:文本的对齐方式 ==> left左(默认)、right右、center居中title:表示当前标签的补充提示,当用户把鼠标放在当前标签上方,则会自动显示title属性的值--><h1 align="left" title="提示文本">h1标题:常用于网站的logo、标题</h1><h2 align="center">h2标题:常用于网站的模块标题、栏目标题</h2><h3 align="right">h3标题:常用于网站的模块标题、栏目标题</h3><h4>h4标题:常用于网站的附加板块标题或是文章的标题</h4><h5>h5标题:更小级别的标题,基本用不到</h5><h6>h6标题:更小级别的标题,基本用不到</h6><p>p段落</p><!-- 单标签的属性:单标签没有内容,需要依靠属性来展示对应的内容--><img src="./attribute.png"> <!--src:需要展示图片的地址--><input type="number"> <!--输入框标签[数值输入框],number表示只允许当前输入框中的内容为数值--><input type="password"> <!--输入框标签[密码输入框],password表示输入的任何内容都是密码,所以输入的内容不会被展示出来 --><input type="text"> <!--输入框标签[单行文本输入框],text表示只允许输入一行内容,不能回车--><input type="datetime-local"> <!--时间输入框,只需要用户选择时间日期-->
</body>
</html>

<input type="datetime-local">  

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

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

相关文章

深入解剖指针篇(2)

目录 指针的使用 strlen的模拟实现 传值调用和传址调用 数组名的理解 使用指针访问数组 一维数组传参的本质 冒泡排序 个人主页&#xff08;找往期文章&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 指针的使用 strlen的模拟实现 库函数strlen的功能是求字符串…

1683. 无效的推文

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 题目描述 表&#xff1a;Tweets ------------------------- | Column Name | Type | --------…

PySpark(二)RDD基础、RDD常见算子

目录 RDD RDD五大特性 RDD创建 RDD算子 常见的Transformation算子 map flatMap mapValues reduceByKey groupBy filter distinct union join intersection glom groupByKey groupByKey和reduceByKey的区别 ? sortBy sortByKey 常见的action算子 countByKey…

MySQL入门篇(10)-聚合函数的应用

MySQL数据库聚合函数的应用 在MySQL数据库中&#xff0c;聚合函数用于计算一组数据的统计值并返回结果。这些函数可以应用于查询语句中&#xff0c;对数据进行汇总、计数、平均值计算等操作。本文将介绍一些常用的MySQL聚合函数及其应用。 1. COUNT函数 COUNT函数用于计算指…

软考 系统分析师系列知识点之需求管理(2)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之需求管理&#xff08;1&#xff09; 所属章节&#xff1a; 第11章. 软件需求工程 第8节. 需求管理 11.8.2 需求风险管理 人们做事情总希望一帆风顺&#xff0c;做项目也是如此&#xff0c;总是希望项目进展顺利&#xff…

Ubuntu18配置Docker

1.基本过程 1.更新软件源列表 sudo apt update2.安装软件包依赖 sudo apt install apt-transport-https ca-certificates curl software-properties-common3.在系统中添加Docker的官方密钥 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - …

新概念英语第二册(49)上

【New words and expressions】生词和短语&#xff08;13&#xff09; tired adj. 厌烦的 real adj. 真正的 owner n. 主人 spring n. 弹簧 mattress …

erlang (erlang 操作模块)学习笔记(四)

map_size 1> map_size(#{a>1, b>2, c>3}). 3返回一个整数&#xff0c;即键值对的数量 max 2> max(1, 2). 2 3> max(1.0, 1). 1.0 4> max(1, 1.0). 1 5> max("abc", "b"). "b"返回 Term1 和 Term2 中最大的值。如果这…

前端JavaScript篇之ES6中数组新增了哪些扩展?

目录 ES6中数组新增了哪些扩展?1. **箭头函数&#xff1a;**2. **扩展运算符&#xff08;Spread Operator&#xff09;&#xff1a;**3. **解构赋值&#xff1a;**4. **Array.from()方法&#xff1a;**5. **Array.of()方法&#xff1a;**6. **find()和findIndex()方法&#xf…

Python入门到精通(七)——Python文件操作

Python文件操作 一、文件的编码 二、文件的读取 1、操作汇总 2、model 常用的三种基础访问模式 三、文件的写入 四、文件的追加 五、综合案例 一、文件的编码 1、什么是编码&#xff1f; 编码就是一种规则集合&#xff0c;记录了内容和二进制间进行相互转换的逻辑。编…

Flink1.14新版KafkaSource和KafkaSink实践使用(自定义反序列化器、Topic选择器、序列化器、分区器)

前言 在官方文档的描述中&#xff0c;API FlinkKafkaConsumer和FlinkKafkaProducer将在后续版本陆续弃用、移除&#xff0c;所以在未来生产中有版本升级的情况下&#xff0c;新API KafkaSource和KafkaSink还是有必要学会使用的。下面介绍下基于新API的一些自定义类以及主程序的…

解析Excel文件内容,按每列首行元素名打印出某个字符串的统计占比(超详细)

1.示例&#xff1a; 开发需求&#xff1a;读取Excel文件&#xff0c;统计第3列到第5列中每列的"False"字段占比&#xff0c;统计第6列中的"Pass"字段占比&#xff0c;并按每列首行元素名打印出统计占比 1.1 实现代码1&#xff1a;列数为常量 请确保替换y…

测试access和trunk口的区别(华为)

思科设备参考&#xff1a;测试access和trunk口的区别&#xff08;思科&#xff09; 一&#xff0c;实验目的 实现同一 Vlan 内的主机互通&#xff0c;不同 Vlan 间的主机隔离。 二&#xff0c;配置前测试 PC1分别ping PC2、PC3、PC4都能通&#xff0c;因为四台PC默认同处于v…

NatCross免费内网穿透工具:助你快速搭建内网服务

NatCross是一款免费的内网穿透工具&#xff0c;产品基于分布式集群服务架构&#xff0c;为需要远程连接的企业和个人提供更加稳定和简单的解决方案。 场景主要包括出差在外或分支机构访问公司的OA、CRM、ERP系统、利用ADSL等宽带连接实现远程视频监控、在办公室或者家里搭建网站…

Android native层c++调用java层API

在Android开发中&#xff0c;从本地&#xff08;native&#xff09;代码调用Java层的接口是一个常见的需求&#xff0c;尤其是在使用JNI&#xff08;Java Native Interface&#xff09;进行混合编程时。以下是一个基本的步骤指南&#xff0c;展示如何从C代码调用Java方法&#…

一文掌握SpringBoot注解之@Configuration知识文集(2)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

【JAVA】单例模式的线程安全性

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 我的其他博客 正文 老生常谈的问题了&#xff0c;首先要说的是单例模式的线程安全意味着&#xff1a;某个类的实例在多线程环境 下只会被…

main函数中参数argc和argv用法解析

1 基础 argc 是 argument count 的缩写&#xff0c;表示传入main函数的参数个数&#xff1b; argv 是 argument vector 的缩写&#xff0c;表示传入main函数的参数序列或指针&#xff0c;并且第一个参数argv[0]一定是程序的名称&#xff0c;并且包含了程序所在的完整路径&…

YOLO系列详解(YOLO1-YOLO5)

YOLO&#xff08;You Only Look Once&#xff09;系列是一组流行的实时对象检测算法&#xff0c;它们因其速度快和准确率高而闻名。YOLO 系列从 YOLOv1 发展到了后续的多个版本&#xff0c;每个版本都在性能、准确度和速度方面进行了改进。 YOLOv1 发布年份&#xff1a;2016主…

2024年美赛赛题浅析

MCM 赛题难度B>A>C 选题人数C>A>B Problem A: Resource Availability and Sex Ratios 数据收集多元分析定性分析&#xff08;语文建模&#xff09;稳定性分析相关分析 七鳃鳗寄生虫生态系统的数据收集 Problem B: Searching for Submersibles 数据收集预测模…