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 指定是否一个元素的值在页面载入时是否需要翻译

基本布局

在这里插入图片描述

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

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

相关文章

vue3+antdesign table实现表格行颜色

实现效果&#xff1a; 代码&#xff1a; html: <a-table:columns"stockColumns":data-source"stockData"class"ant-table-striped":rowClassName"rowClassName"></table> js: const rowClassName computed(() > {re…

Windows下MATLAB调用Python函数操作说明

MATLAB与Python版本的兼容 具体可参看MATLAB与Python版本的兼容 操作说明 操作说明请参看下面两个链接&#xff1a; 操作指南 简单说明&#xff1a; 我安装的是MATLAB2022a和Python3.8.6&#xff08;安装时请勾选所有可以勾选的&#xff0c;包括路径&#xff09;。对应版本安…

归一化的作用,sklearn 安装

目录 归一化的作用&#xff1a; 应用场景说明 sklearn 准备工作 sklearn 安装 sklearn 上手 线性回归实战 归一化的作用&#xff1a; 归一化后加快了梯度下降求最优解的速度; 归一化有可能提高精度(如KNN) 应用场景说明 1&#xff09;概率模型不需要归一化&#xff…

ArrayList与顺序表

文章目录 一. 顺序表是什么二. ArrayList是什么三. ArrayList的构造方法四. ArrayList的常见方法4.1 add()4.2 size()4.3 remove()4.4 get()4.5 set()4.6 contains()4.7 lastIndexOf()和 indexOf(&#xff09;4.8 subList()4.9 clear() 以上就是ArrayList的常见方法&#xff01…

RHCE——九、SELinux

SELinux 一、概念1、作用2、SELinux与传统的权限区别 二、SELinux工作原理1、名词解释主体&#xff08;Subject&#xff09;目标&#xff08;Object&#xff09;策略&#xff08;Policy&#xff09;安全上下文&#xff08;Security Context&#xff09; 2、文件安全上下文查看1…

element——switch接口成功后赋值打开开关

应用场景 基本用法使用v-model双向绑定值&#xff0c;进行开关控制 例子1:需求&#xff1a; **点击switch&#xff0c;出弹窗&#xff0c;点击弹窗保存按钮调接口成功后再赋值&#xff08;row.orderButtonValue“1”&#xff09;打开switch开的状态变颜色。 在vue 中使用 :va…

安全开发-JS应用NodeJS指南原型链污染Express框架功能实现审计WebPack打包器第三方库JQuery安装使用安全检测

文章内容 环境搭建-NodeJS-解析安装&库安装安全问题-NodeJS-注入&RCE&原型链案例分析-NodeJS-CTF题目&源码审计打包器-WebPack-使用&安全第三方库-JQuery-使用&安全 环境搭建-NodeJS-解析安装&库安装 Node.js是运行在服务端的JavaScript 文档参考…

分布式事务篇-2.4 Spring-Boot整合Seata

文章目录 前言一、pom jar导入:二、项目配置&#xff1a;2.1 配置 说明&#xff1a;2.1 .1 seata server 端:2.1 .2 seata client 端: 2.2 开启seata 对于数据源的代理:2.3 seata-client 的注册中心&#xff1a;2.4 seata-client 的配置中心&#xff1a;2.5 去掉手写的数据源代…

【第四阶段】kotlin语言的mutator函数学习

1.mutator特性1&#xff1a;使用list可以直接 - fun main() {val list mutableListOf(123,456,789)//特性1 可是直接使用list -list 111list-123println(list) }执行结果 2.mutator特性2&#xff1a;removeIF() 如果实现是true 会自动遍历整个集合&#xff0c;一个一个的移除…

新亮点!安防视频监控/视频集中存储/云存储平台EasyCVR平台六分屏功能展示

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

【Robot Framework】发送GET和POST请求

做接口自动化时&#xff0c;经常要使用GET与POST请求&#xff0c;那么如何使用RF发送对应的请求呢&#xff1f; 一、安装RequestsLibrary pip install robotframework-requests安装以后&#xff0c;导入到对应的测试套件或测试用例中. 本次主要介绍通过RequestsLibrary来实现…

【状压+概率DP】CF678 E

Problem - E - Codeforces 题意&#xff1a; 思路&#xff1a; 首先&#xff0c;n < 18&#xff0c;应当想到状压 很明显&#xff0c;这里可以使用状压DP 设 dp[s][i] 表示&#xff0c;现在选的方案为 s &#xff0c;且我是 i 的最终胜利的概率是多少 重要的是转移 这是…

数学建模——校园供水系统智能管理

import pandas as pd data1pd.read_excel("C://Users//JJH//Desktop//E//附件_一季度.xlsx") data2pd.read_excel("C://Users//JJH//Desktop//E//附件_二季度.xlsx") data3pd.read_excel("C://Users//JJH//Desktop//E//附件_三季度.xlsx") data4…

飞天使-python的模块与包与装饰器

文章目录 模块与包标准模块第三方模块自定义模块 高级语法切片迭代器/生成器高级模式&#xff08;闭包&#xff09;高级模式&#xff08;装饰器&#xff09; 参考视频 模块与包 标准模块 import os print(os.getcwd())import sys print(sys.argv) print(sys.platform) print(…

ETC reset

ETC重新激活 换前挡风玻璃膜会把ETC设备拿下来&#xff0c;需要到【ETC服务中心】重新【粘上去】&#xff0c;另外需要工作人员用手持终端【重新激活】 ETC 背面有个 【白色】开关小柱子&#xff0c;一旦拆下来就失效&#xff0c;因为这个开关弹出来了 截面图看就是这样的&…

万人在线,一站式自动化运维 SysOM 3.0重磅发布!龙蜥社区系统运维 MeetUp 回顾来了

8 月 12 日&#xff0c;由龙蜥社区系统运维 SIG 主办&#xff0c;乘云数字协办的&#xff0c;主题为“观测&#xff0c;让运维更简单&#xff01;”的系统运维 MeetUp 于杭州圆满结束。来自乘云数字、谐云科技、乐维、云杉网络、擎创科技、观测云、阿里云以及浙江大学等众多厂商…

Linux 多线程同步机制(上)

文章目录 前言一、线程同步二、互斥量 mutex三、死锁总结 前言 一、线程同步 在多线程环境下&#xff0c;多个线程可以并发地执行&#xff0c;访问共享资源&#xff08;如内存变量、文件、网络连接 等&#xff09;。 这可能导致 数据不一致性, 死锁, 竞争条件等 问题。 为了解…

医院常见的HIS、CIS、LIS、EMR、PACS、RIS医疗信息化中的介绍

医院常见的HIS、CIS、LIS、EMR、PACS、RIS分别是&#xff1a; HIS&#xff08;Hospital Information System&#xff09;&#xff1a;医院信息系统&#xff0c;是医院管理信息化的核心系统&#xff0c;包括病人管理、医生管理、药品管理、医疗设备管理、财务管理等多个方面&am…

Unity插件---Dotween

1.什么是DOTween DoTween 是由 Demigiant 开发的&#xff0c;被广泛应用于 Unity 游戏开发中。它是一个流行的动画插件&#xff0c;被许多开发者用于创建流畅、高效的动画效果&#xff0c;提升游戏体验。 2.DOTween的初始配置 ①set up 首先找到DOTween Unity Panel 的面板 点…

c# 本地化中英文切换

区域 线程默认区域为当前计算机所选区域 设置当前区域&#xff1a; Thread.CurrentThread.CurrentCulture new CultureInfo(“zh-cn”); 获取当前区域&#xff1a; Console.WriteLine(Thread.CurrentThread.CurrentCulture.ToString()); 区域名称&#xff1a; “zh-cn” 中文…