HTML5-1-标签及属性

news2024/11/17 1:46:59

文章目录

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

页面的组成:
在这里插入图片描述
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 指定是否一个元素的值在页面载入时是否需要翻译

基本布局

在这里插入图片描述

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

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

相关文章

Linux内核数据结构 散列表

1、散列表数据结构 在Linux内核中&#xff0c;散列表&#xff08;哈希表&#xff09;使用非常广泛。本文将对其数据结构和核心函数进行分析。和散列表相关的数据结构有两个&#xff1a;hlist_head 和 hlist_node //hash桶的头结点 struct hlist_head {struct hlist_node *first…

Linux学习笔记-Ubuntu系统下配置ssh免密访问

Ubuntu系统下配置ssh免密访问 一、基本信息二、ssh安装2.1 查看是否已经安装ssh2.2 安装ssh2.3 查看ssh安装状态 三、启动、停止&#xff0c;及开机自启动3.1 启动ssh3.2 关闭ssh3.3 使用systemctl设置ssh服务自启动3.4 使用systemctl关闭ssh开机启动 四、配置通过密钥进行免密…

Spring Authorization Server入门 (十六) Spring Cloud Gateway对接认证服务

前言 之前虽然单独讲过Security Client和Resource Server的对接&#xff0c;但是都是基于Spring webmvc的&#xff0c;Gateway这种非阻塞式的网关是基于webflux的&#xff0c;对于集成Security相关内容略有不同&#xff0c;且涉及到代理其它微服务&#xff0c;所以会稍微比较麻…

基于Spring Gateway路由判断器实现各种灰度发布场景

文章目录 1、灰度发布实现1.1 按随机用户的流量百分比实现灰度1.2 按人群划分实现的灰度1.2.1 通过Header信息实现灰度1.2.2 通过Query信息实现灰度1.2.3 通过RemoteAdd判断来源IP实现灰度 2、路由判断器2.1. After2.2. Before2.3. Between2.4. Cookie2.5. Header2.6. Host2.7.…

C++ Primer 第2章 变量和基本类型

C Primer 第2章 变量和基本类型 2.1 基本内置类型2.1.1 算术类型一、带符号类型和无符号类型练习 2.1.2 类型转换一、含有无符号类型的表达式 2.1.3 字面值常量一、整型和浮点型字面值二、字符和字符串字面值三、转义序列四、指定字面值的类型五、布尔字面值和指针字面值 2.2 变…

软考A计划-系统集成项目管理工程师-小抄手册(共25章节)-下

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

MySQL—MySQL主从如何保证强一致性

一、前言 涉及到的东西&#xff1a;两阶段提交&#xff0c;binlog三种格式 1、两阶段提交 在持久化 redo log 和 binlog 这两份日志的时候&#xff0c;如果出现半成功的状态&#xff0c;就会造成主从环境的数据不一致性。这是因为 redo log 影响主库的数据&#xff0c;binlog…

【大数据】Doris:基于 MPP 架构的高性能实时分析型数据库

Doris&#xff1a;基于 MPP 架构的高性能实时分析型数据库 1.Doris 介绍 Apache Doris 是一个基于 MPP&#xff08;Massively Parallel Processing&#xff0c;大规模并行处理&#xff09;架构的高性能、实时的分析型数据库&#xff0c;以极速易用的特点被人们所熟知&#xff…

Kali Linux中的ARP欺骗攻击如何进行

在Kali Linux中进行ARP欺骗攻击是一种常见的网络攻击方法&#xff0c;它允许攻击者篡改局域网中的ARP表&#xff0c;以便将网络流量重定向到攻击者控制的位置。 步骤&#xff1a; 安装必要工具&#xff1a; 首先&#xff0c;确保 已经安装了Kali Linux&#xff0c;并在终端中安…

解除用户账户控制提醒

解决用户账户控制提醒 1. 前言2. 解决用户账户控制提醒2.1 控制面板2.2 注册表2.3 UAC服务 结束语 1. 前言 当我们使用电脑时&#xff0c;有时进行安装应用或者打开应用时&#xff0c;总会弹出一个提示框&#xff0c;要选择点击是否允许程序运行&#xff1b; 系统经常弹出用户…

流处理详解

【今日】 目录 一 Stream接口简介 Optional类 Collectors类 二 数据过滤 1. filter()方法 2.distinct()方法 3.limit()方法 4.skip()方法 三 数据映射 四 数据查找 1. allMatch()方法 2. anyMatch()方法 3. noneMatch()方法 4. findFirst()方法 五 数据收集…

azure data studio SQL扩展插件开发笔记

node.js环境下拉取脚手架 npm install -g yo generator-azuredatastudio yo azuredatastudio 改代码 运行 调试扩展&#xff0c;在visual studio code中安装插件即可 然后visual studio code打开进行修改运行即可 image.png 运行后自动打开auzre data studio了&#xff0c; 下面…

深度学习9:简单理解生成对抗网络原理

目录 生成算法 生成对抗网络&#xff08;GAN&#xff09; “生成”部分 “对抗性”部分 GAN如何运作&#xff1f; 培训GAN的技巧&#xff1f; GAN代码示例 如何改善GAN&#xff1f; 结论 生成算法 您可以将生成算法分组到三个桶中的一个&#xff1a; 鉴于标签&#…

6. 使用python将多个Excel文件合并到同一个excel-附代码解析

【目录】 文章目录 6. 使用python将多个Excel文件合并到同一个excel-附代码解析1. 目标任务2. 结果展示3. 代码示例4. 代码解析4.1 导入库4.2 调用库的类、函数、变量语法4.3 os.listdir-返回目录中的文件名列表4.4 startswith-用于判断一个字符串是否以指定的前缀开头4.5 ends…

如何评估开源项目的活跃度和可持续性?

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

深度学习1.卷积神经网络-CNN

目录 卷积神经网络 – CNN CNN 解决了什么问题&#xff1f; 需要处理的数据量太大 保留图像特征 人类的视觉原理 卷积神经网络-CNN 的基本原理 卷积——提取特征 池化层&#xff08;下采样&#xff09;——数据降维&#xff0c;避免过拟合 全连接层——输出结果 CNN …

postgresql-字符函数

postgresql-字符函数 字符串连接字符与编码字符串长度大小写转换子串查找与替换截断与填充字符串格式化MD5 值字符串拆分字符串反转 字符串连接 concat(str, …)函数用于连接字符串&#xff0c;并且忽略其中的 NULL 参数&#xff1b;concat_ws(sep, str, …) 函数使用指定分隔…

小研究 - Java虚拟机内存管理(三)

Java 语言的面向对象&#xff0c;平台无关&#xff0c;安全&#xff0c;开发效率高等特点&#xff0c;使其在许多领域中得到了越来越广泛的应用。但是由于Java程序由于自身的局限性&#xff0c;使其无法应用于实时领域。由于垃圾收集器运行时将中断Java程序的运行&#xff0c;其…

【手写promise——基本功能、链式调用、promise.all、promise.race】

文章目录 前言一、前置知识二、实现基本功能二、实现链式调用三、实现Promise.all四、实现Promise.race总结 前言 关于动机&#xff0c;无论是在工作还是面试中&#xff0c;都会遇到Promise的相关使用和原理&#xff0c;手写Promise也有助于学习设计模式以及代码设计。 本文主…

9个python自动化脚本,PPT批量生成缩略图、添加图片、重命名

引言 最近一番在整理资料&#xff0c;之前买的PPT资源很大很多&#xff0c;但归类并不好&#xff0c;于是一番准备把这些PPT资源重新整理一下。统计了下&#xff0c;这些PPT资源大概有2000多个&#xff0c;一共30多G&#xff0c;一个一个手动整理这个投入产出比也太低了。 作为…