HTML5-1-标签及属性
文章目录
- 语法规范
- 标签规范
- 标签列表
- 通用属性
- 基本布局
页面的组成:
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-标签及属性
文章目录 语法规范标签规范标签列表通用属性基本布局 页面的组成: HTML(HyperText Markup Language,超文本标记语言)是用来描述网页的一种语言,它不是一种编程语言,而是一种标记语言。 HTML5 是下一代 HTM…...
5017. 垦田计划
Powered by:NEFU AB-IN Link 文章目录 5017. 垦田计划题意思路代码 5017. 垦田计划 题意 略 思路 二分最小需要几天即可 注意: 天数不能低于k二分时,若耗时天数小于mid,直接continue 代码 /* * Author: NEFU AB-IN * Date: 2023-08-26 22:4…...

【校招VIP】产品思维分析之面试新的功能点设计
考点介绍: 这种题型是面试里出现频度最高,也是难度最大的一种,需要面试者对产品本身的功能、扩展性以及行业都有一定的了解。而且分析时间较短,需要一定的产品能力和回答技巧。 『产品思维分析之面试新的功能点设计』相关题目及解…...
indexDB vue 创建数据库 创建表 添加对象数据
1 .open(dbName,1) 版本号可以省略 let dbName hist-data-1dconst request indexedDB.open(dbName); // 如果你不知道数据库的版本号,可以省略第二个参数,这样 indexedDB 会默认为你打开最新版本的数据库,因为版本号总是自增长的 2 第一次…...

Django基础1——项目实现流程
文章目录 一、前提了解二、准备开发环境2.1 创建项目2.1.1 pycharm创建2.1.2 命令创建 2.2 创建应用 例1:效果实现例2:网页展示日志文件 一、前提了解 基本了解: 官网Django是Python的一个主流Web框架,提供一站式解决方案…...
基于SSM的在线购物系统——LW模板
摘 要 人类进入21世纪以来,很多技术对社会产生了重大的影响。信息技术是最具代表的新时代技术,信息技术起源于上世纪,在起初的时候只是实现在单机上进行信息的数字化管理,随着网络技术、软件开发技术、通讯技术的发展,…...

Mac操作系统上设置和配置PPPoE连接
嗨,在使用Mac的小伙伴么!你是否在Mac操作系统上尝试设置和配置PPPoE连接,却不知道怎么设置?别担心,今天我将为你一步步教你如何在Mac上进行设置和配置。无论你是新手还是有经验的用户,本文都将帮助你轻松完…...
Python类的属性和方法
Python类是一种面向对象编程的基本概念,它可以用来创建对象,对象可以拥有属性和方法。 属性是类的特征,它们用于存储对象的状态。属性可以是任何数据类型,例如整数、字符串、列表等。在类中,属性通常定义为类的变量&am…...
C#Queue<T>队列出现弹出元素被最后一次压入得元素覆盖的问题
问题代码: //以下为现有代码的大概描述,只可意会,不可执行!!!Queue<Move> mQueue new Queue<Move>(); //该接口为下面描述线程A、线程B调用的接口 private void ActionTrigger(Move move)//M…...

python3GUI--模仿一些b站网页端组件By:PyQt5(详细介绍、附下载地址)
文章目录 一.前言二.展示1.banner1.静图2.动图 2.一般视频组件1.静图2.动图 3.排行榜1.静图2.动图 三.设计心得(顺序由简到难)1.排行榜2.一般视频组件3.banner 四.总结五.下载地址 一.前言 播客二连发&…...
聚类分析概述
聚类分析(Cluster Analysis)是一种无监督学习方法,用于将数据点划分为具有相似特征的组或簇。聚类分析的目标是使同一簇内的数据点之间的相似性最大化,而不同簇之间的相似性最小化。聚类分析在许多领域中都有广泛的应用࿰…...

建模杂谈系列234 基于图的程序改造
说明 为了进一步提升程序设计与运维的可靠性,我觉得(目前看来)只有依赖图的结构。 提升主要包含如下方面: 1 程序结构的简洁性:节点和边2 程序执行的可视化:交通图(红、黄、绿)3 程序支持的逻辑复杂性。…...

requestAnimationFrame(RAF)
1、RAF介绍 requestAnimateFrame(RAF)动画帧,是一个做动画的API。 如果想要一个动画流畅,就需要以60帧/s来更新视图,那么一次视图的更新就是16.67ms。 想要达到上述目标,可以通过setTimeout定时器来手动控…...
【JavaScript笔记】面对对象与构造函数
笔记作用 了解面向对象编程中的一般概念 能够基于构造函数创建对象 理解 JavaScript 中一切皆对象的语言特征 理解引用对象类型值存储的的特征 掌握包装类型对象常见方法的使用 一、深入对象 了解面向对象的基础概念,能够利用构造函数创建对象。 1. 构造函数 …...

LeetCode解法汇总5-正则表达式匹配
目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接: 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 描述: 给你一棵…...

前端开发工具: VSCode
VSCode 安装使用教程(图文版) | arry老师的博客-艾编程 1. 下载 在官方网站:https://code.visualstudio.com/ 下载最新版本的 VSCode 即可 2. VSCode 常见插件安装 所有插件安装后,需要重启一下才生效 2.1 简体中文语言包 2.2 编辑器主…...
【Stable-Diffusion-WebUI】Windows系统安装Stable-Diffusion-WebUI
写在前面 基于 stable-diffusion 封装的 webui 开源项目,通过界面交互的方式来使用 stable-diffusion,降低了使用门槛,可以通过本地部署的方式进行访问,对电脑的配置要求较高,以下配置要求仅供参考 GPU显卡ÿ…...

面试题(三)
目录 一.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 中的设计模式详解…...

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

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

【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...