当前位置： 首页 > news >正文

HTML5-1-标签及属性

news 2025/10/30 8:12:18

文章目录

  • 语法规范
  • 标签规范
  • 标签列表
  • 通用属性
  • 基本布局

页面的组成：
在这里插入图片描述
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
HTML5 是下一代 HTML 标准。
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。

基本结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

语法规范

  • HTML中不区分大小写，但是一般都使用小写
  • HTML中的注释不能嵌套
  • HTML标签必须结构完整，要么成对出现，要么自结束标签
  • HTML标签可以嵌套，但是不能交叉嵌套
  • HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)

标签规范

单标签：<标签名 [属性名=属性值,…]>
成对标签：<标签名 [属性名=属性值,…]></标签名>

标签列表

基础
<!DOCTYPE>定义文档类型。
<html> 定义一个 HTML 文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题
<p> 定义一个段落
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义一个注释
格式
<acronym> HTML5不再支持。定义只取首字母的缩写。
<abbr>定义一个缩写。
<address> 定义文档作者或拥有者的联系信息。
<b> 定义粗体文本。
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 定义文本的方向。
<big> HTML5不再支持。 定义大号文本。
<blockquote> 定义块引用。
<center> HTML5不再支持。HTML 4.01 已废弃。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。
<font> HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
<i> 定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<pre> 定义预格式文本
<progress> 定义运行中的任务进度（进程）。
<q> 定义短的引用。
<rp>定义不支持 ruby 元素的浏览器所显示的内容。
<rt>定义字符（中文注音或字符）的解释或发音。
<ruby> 定义 ruby 注释（中文注音或字符）。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。
<strike> HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。
<strong> 定义语气更为强烈的强调文本。
<sub> 定义下标文本。
<sup>定义上标文本。
<time> 定义一个日期/时间
<tt> HTML5不再支持。 定义打字机文本。
<u> 定义下划线文本。
<var> 定义文本的变量部分。
<wbr>规定在文本中的何处适合添加换行符。
表单
<form> 定义一个 HTML 表单，用于用户输入。
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<datalist> 规定了 input 元素可能的选项列表。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义一个计算的结果
框架
<frame> HTML5不再支持。 定义框架集的窗口或框架。
<frameset> HTML5不再支持。定义框架集。
<noframes> HTML5不再支持。 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。
图像
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<figcaption> 定义一个 caption for a <figure> element
<figure> figure 标签用于对元素进行组合。
Audio/Video
<audio> 定义声音，比如音乐或其他音频流。
<source> 定义media元素 ( 和 )的媒体资源。media
<track> 为媒体( 和 )元素定义外部文本轨道。
<video> 定义一个音频或者视频
链接
<a> 定义一个链接
<link> 定义文档与外部资源的关系。
<main> 定义文档的主体部分。
<nav> 定义导航链接
列表
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dir> HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
<dl> 定义一个定义列表
<dt> 定义一个定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义菜单列表。
<command> 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格
<table> 定义一个表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
样式/节
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义一个文档头部部分
<footer> 定义一个文档底部
<section> 定义了文档的某个区域
<article> 定义一个文章内容
<aside> 定义其所处内容之外的内容。
<details> 定义了用户可见的或者隐藏的需求的补充细节。
<dialog> 定义一个对话框或者窗口
<summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息。
元信息
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。
程序
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。
<embed> 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<object> 定义嵌入的对象。
<param>定义对象的参数。

<head> 元素包含了所有的头部标签元素。在 <head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

通用属性

属性描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname）
contenteditable 规定是否可编辑元素的内容。
contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文 菜单
data 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggable 指定某个元素是否可以拖动
dropzone 指定是否将数据复制，移动，或链接，或删除
hidden hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheck 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translate 指定是否一个元素的值在页面载入时是否需要翻译

基本布局

在这里插入图片描述

相关文章：

HTML5-1-标签及属性

文章目录 语法规范标签规范标签列表通用属性基本布局 页面的组成&#xff1a; HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;是用来描述网页的一种语言&#xff0c;它不是一种编程语言&#xff0c;而是一种标记语言。 HTML5 是下一代 HTM…...

编程日记 2023/8/27 8:06:21

5017. 垦田计划

Powered by:NEFU AB-IN Link 文章目录 5017. 垦田计划题意思路代码 5017. 垦田计划 题意 略 思路 二分最小需要几天即可 注意&#xff1a; 天数不能低于k二分时&#xff0c;若耗时天数小于mid&#xff0c;直接continue 代码 /* * Author: NEFU AB-IN * Date: 2023-08-26 22:4…...

编程日记 2023/8/27 8:05:20

【校招VIP】产品思维分析之面试新的功能点设计

考点介绍&#xff1a; 这种题型是面试里出现频度最高&#xff0c;也是难度最大的一种&#xff0c;需要面试者对产品本身的功能、扩展性以及行业都有一定的了解。而且分析时间较短&#xff0c;需要一定的产品能力和回答技巧。 『产品思维分析之面试新的功能点设计』相关题目及解…...

编程日记 2023/8/27 8:04:18

indexDB vue 创建数据库 创建表 添加对象数据

1 .open(dbName,1) 版本号可以省略 let dbName hist-data-1dconst request indexedDB.open(dbName); // 如果你不知道数据库的版本号&#xff0c;可以省略第二个参数&#xff0c;这样 indexedDB 会默认为你打开最新版本的数据库&#xff0c;因为版本号总是自增长的 2 第一次…...

编程日记 2023/8/27 8:03:17

Django基础1——项目实现流程

文章目录 一、前提了解二、准备开发环境2.1 创建项目2.1.1 pycharm创建2.1.2 命令创建 2.2 创建应用 例1&#xff1a;效果实现例2&#xff1a;网页展示日志文件 一、前提了解 基本了解&#xff1a; 官网Django是Python的一个主流Web框架&#xff0c;提供一站式解决方案&#xf…...

编程日记 2023/8/27 8:02:15

基于SSM的在线购物系统——LW模板

摘 要 人类进入21世纪以来&#xff0c;很多技术对社会产生了重大的影响。信息技术是最具代表的新时代技术&#xff0c;信息技术起源于上世纪&#xff0c;在起初的时候只是实现在单机上进行信息的数字化管理&#xff0c;随着网络技术、软件开发技术、通讯技术的发展&#xff0c;…...

编程日记 2023/8/27 8:01:14

Mac操作系统上设置和配置PPPoE连接

嗨&#xff0c;在使用Mac的小伙伴么&#xff01;你是否在Mac操作系统上尝试设置和配置PPPoE连接&#xff0c;却不知道怎么设置&#xff1f;别担心&#xff0c;今天我将为你一步步教你如何在Mac上进行设置和配置。无论你是新手还是有经验的用户&#xff0c;本文都将帮助你轻松完…...

编程日记 2023/8/27 8:00:12

Python类的属性和方法

Python类是一种面向对象编程的基本概念&#xff0c;它可以用来创建对象&#xff0c;对象可以拥有属性和方法。 属性是类的特征&#xff0c;它们用于存储对象的状态。属性可以是任何数据类型&#xff0c;例如整数、字符串、列表等。在类中&#xff0c;属性通常定义为类的变量&am…...

编程日记 2023/8/27 7:59:10

C#Queue＜T＞队列出现弹出元素被最后一次压入得元素覆盖的问题

问题代码&#xff1a; //以下为现有代码的大概描述&#xff0c;只可意会&#xff0c;不可执行&#xff01;&#xff01;&#xff01;Queue<Move> mQueue new Queue<Move>(); //该接口为下面描述线程A、线程B调用的接口 private void ActionTrigger(Move move)//M…...

编程日记 2023/8/27 7:58:09

python3GUI--模仿一些b站网页端组件By:PyQt5（详细介绍、附下载地址）

文章目录 一&#xff0e;前言二&#xff0e;展示1.banner1.静图2.动图 2.一般视频组件1.静图2.动图 3.排行榜1.静图2.动图 三&#xff0e;设计心得(顺序由简到难)1.排行榜2.一般视频组件3.banner 四&#xff0e;总结五&#xff0e;下载地址 一&#xff0e;前言 播客二连发&…...

编程日记 2023/8/27 7:57:08

聚类分析概述

聚类分析&#xff08;Cluster Analysis&#xff09;是一种无监督学习方法&#xff0c;用于将数据点划分为具有相似特征的组或簇。聚类分析的目标是使同一簇内的数据点之间的相似性最大化&#xff0c;而不同簇之间的相似性最小化。聚类分析在许多领域中都有广泛的应用&#xff0…...

编程日记 2023/8/27 7:56:08

建模杂谈系列234 基于图的程序改造

说明 为了进一步提升程序设计与运维的可靠性&#xff0c;我觉得&#xff08;目前看来&#xff09;只有依赖图的结构。 提升主要包含如下方面&#xff1a; 1 程序结构的简洁性&#xff1a;节点和边2 程序执行的可视化&#xff1a;交通图(红、黄、绿)3 程序支持的逻辑复杂性。…...

编程日记 2023/8/27 7:55:06

requestAnimationFrame(RAF)

1、RAF介绍 requestAnimateFrame&#xff08;RAF&#xff09;动画帧&#xff0c;是一个做动画的API。 如果想要一个动画流畅&#xff0c;就需要以60帧/s来更新视图&#xff0c;那么一次视图的更新就是16.67ms。 想要达到上述目标&#xff0c;可以通过setTimeout定时器来手动控…...

编程日记 2023/8/27 7:54:04

【JavaScript笔记】面对对象与构造函数

笔记作用 了解面向对象编程中的一般概念 能够基于构造函数创建对象 理解 JavaScript 中一切皆对象的语言特征 理解引用对象类型值存储的的特征 掌握包装类型对象常见方法的使用 一、深入对象 了解面向对象的基础概念&#xff0c;能够利用构造函数创建对象。 1. 构造函数 …...

编程日记 2023/8/27 7:53:03

​LeetCode解法汇总5-正则表达式匹配​

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 描述&#xff1a; 给你一棵…...

编程日记 2023/8/27 7:52:01

前端开发工具: VSCode

VSCode 安装使用教程&#xff08;图文版&#xff09; | arry老师的博客-艾编程 1. 下载 在官方网站&#xff1a;https://code.visualstudio.com/ 下载最新版本的 VSCode 即可 2. VSCode 常见插件安装 所有插件安装后,需要重启一下才生效 2.1 简体中文语言包 2.2 编辑器主…...

编程日记 2023/8/27 7:51:00

【Stable-Diffusion-WebUI】Windows系统安装Stable-Diffusion-WebUI

写在前面 基于 stable-diffusion 封装的 webui 开源项目&#xff0c;通过界面交互的方式来使用 stable-diffusion&#xff0c;降低了使用门槛&#xff0c;可以通过本地部署的方式进行访问&#xff0c;对电脑的配置要求较高&#xff0c;以下配置要求仅供参考 GPU显卡&#xff…...

编程日记 2023/8/27 7:49:59

面试题(三)

目录 一.Spring 1.Spring IOC & AOP 2.Spring bean (1) 作用域 (2) Spring 中的 bean ⽣命周期 (3) Spring 框架中⽤到了哪些设计模式 二.Mybatis 1.标签 2.Dao接口 3.返回与映射 4.延迟加载 三.Kafka 四.设计模式 1.IO 设计模式 2.Spring 中的设计模式详解…...

编程日记 2023/8/27 7:48:58

谈谈子网划分的定义、作用、划分方式以及案例

个人主页&#xff1a;insist--个人主页​​​​​​ 本文专栏&#xff1a;网络基础——带你走进网络世界 本专栏会持续更新网络基础知识&#xff0c;希望大家多多支持&#xff0c;让我们一起探索这个神奇而广阔的网络世界。 目录 一、子网划分的定义 二、子网掩码的作用 1、…...

编程日记 2023/8/27 7:47:57

BIO到NIO、多路复用器, 从理论到实践, 结合实际案例对比各自效率与特点(下)

文章目录 多路复用器简介多路复用器的两个阶段Java中的多路复用器封装测试代码压测结果总结 本篇文章是BIO到NIO、多路复用器, 从理论到实践, 结合实际案例对比各自效率与特点(上)的下一篇, 如果没有看的小伙伴, 可以先看下, 不然可能会不连贯. 多路复用器简介 多路复用器是对…...

编程日记 2023/8/27 7:46:56

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/10/25 20:14:59

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/10/7 19:05:44

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/10/29 15:45:09

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/10/27 13:38:30

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2025/10/25 5:49:46

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48