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

基本布局

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第四章:树形结构的关联式容器(map+set)

系列文章目录 文章目录 系列文章目录前言1、关联式容器与序列式容器1.1 键值对 2、set的介绍3、multiset的介绍3.1 接口count与容器multiset 4、map的介绍4.1 接口insert4.2 operator[]和at 5、multimap的介绍 前言 根据应用场景的不桶&#xff0c;STL总共实现了两种不同结构的…

Elasticsearch(十四)搜索---搜索匹配功能⑤--全文搜索

一、前言 不同于之前的term。terms等结构化查询&#xff0c;全文搜索首先对查询词进行分析&#xff0c;然后根据查询词的分词结果构建查询。这里所说的全文指的是文本类型数据&#xff08;text类型&#xff09;,默认的数据形式是人类的自然语言&#xff0c;如对话内容、图书名…

springboot+mp完成简单案例

目录 1.框架搭建 2.前端搭建 3.后端编写 需求&#xff1a;完成简单的连表条件查询以及添加即可 1.框架搭建 1.创建springboot项目 2.相关依赖 <!--web依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boo…

Leetcode每日一题:1448. 统计二叉树中好节点的数目(2023.8.25 C++)

目录 1448. 统计二叉树中好节点的数目 题目描述&#xff1a; 实现代码与解析&#xff1a; dfs 原理思路&#xff1a; 1448. 统计二叉树中好节点的数目 题目描述&#xff1a; 给你一棵根为 root 的二叉树&#xff0c;请你返回二叉树中好节点的数目。 「好节点」X 定义为&…

基于MATLAB开发AUTOSAR软件应用层Code mapping专题-part 4 Data store标签页介绍

这篇文章我们继续讲解code-mapping的Data stores页,这个页的内容对应的SIMULINK中的模块是Data store memory。 我们首先在模型中创建一个Data store memory模块,如图: Data store memory模块的作用相当于一个全局变量,我们可以在模型的功能逻辑里将一个信号存进去,在另…

docker harbor私有库

目录 一.Harbor介绍 二.Harbor的特性 三.Harbor的构成 四.Harbor构建Docker私有仓库 4.2在Server主机上部署Harbor服务&#xff08;192.168.158.25&#xff09; 4.2.1 这时候这边就可以去查看192.168.158.25网页 4.3此时可真机访问serverIP 4.4通过127.0.0.1来登陆和推送镜…

系统架构设计师之缓存技术:Redis与Memcache能力比较

系统架构设计师之缓存技术&#xff1a;Redis与Memcache能力比较

React + Next.js 搭建项目(配有对比介绍一起食用)

文章标题 01 Next.js 是什么02 Next.js 搭建工具 create-next-app03 create-react-app 与 create-next-app 的区别04 快速构建 Next.js 项目05 App Router 与 Pages Router 的区别 01 Next.js 是什么 Next.js 是一个 React 框架&#xff0c;它允许你使用 React 框架建立超强的…

k8s service (三)

K8s service (三) LoadBalancer类型的Service LoadBalancer和NodePort其实是同一种方式&#xff0c;目的都是向外暴露一个端口&#xff0c;区别在于LoadBalancer会在集群的外部再来做一个负载均衡设备&#xff0c;而这个设备需要外部环境支持的&#xff0c;外部服务发送到这…

【安装GPU版本pytorch,torch.cuda.is_available()仍然返回False问题】

TOC 第一步 检查cuda是否安装&#xff0c;CUDA环境变量是否正确设置&#xff0c;比如linux需要设置在PATH&#xff0c;window下环境变量编辑看看&#xff0c;是否有CUDA 第二步&#xff0c;核查python中torch版本 首先查看你环境里的pytorch是否是cuda版本&#xff0c;我这…

EasyExcel自定义字段对象转换器支持转换实体和集合实体

文章目录 1. 实现ObjectConverter2. 使用3. 测试3.2 导出excel3.1 导入excel 1. 实现ObjectConverter package com.tophant.cloud.common.excel.converters;import cn.hutool.json.JSONUtil; import com.alibaba.excel.converters.Converter; import com.alibaba.excel.enums.…

pdf转ppt软件哪个好用?推荐一个好用的pdf转ppt软件

在日常工作和学习中&#xff0c;我们经常会遇到需要将PDF文件转换为PPT格式的情况。PDF格式的文件通常用于展示和保留文档的原始格式&#xff0c;而PPT格式则更适合用于演示和展示。为了满足这一需求&#xff0c;许多软件提供了PDF转PPT的功能&#xff0c;使我们能够方便地将PD…

最新CMS指纹识别技术

指纹识别 1&#xff0e;CMS简介 CMS&#xff08;Content Management System&#xff0c;内容管理系统&#xff09;&#xff0c;又称整站系统或文章系统&#xff0c;用于网站内容管理。用户只需下载对应的CMS软件包&#xff0c;部署、搭建后就可以直接使用CMS。各CMS具有独特的…

C语言(第三十二天)

1. 递归是什么&#xff1f; 递归是学习C语言函数绕不开的一个话题&#xff0c;那什么是递归呢&#xff1f; 递归其实是一种解决问题的方法&#xff0c;在C语言中&#xff0c;递归就是函数自己调用自己。 写一个史上最简单的C语言递归代码&#xff1a; #include <stdio.h>…

【FPGA】verilog语法的学习与应用 —— 位操作 | 参数化设计

【FPGA】verilog语法的学习与应用 —— 位操作 | 参数化设计 学习新语法&#xff0c;争做新青年 计数器实验升级&#xff0c;让8个LED灯每个0.5s的速率循环闪烁&#xff0c;流水灯ahh好久不见~ 去年光这个就把我折磨够呛。。我肉眼可见的脱发就是从那时候开始的。。在那两个月…

如何使用HTML5新增的标签来优化SEO?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用HTML5新增的标签来优化SEO&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对…

NSSCTF——Web题目2

目录 一、[HNCTF 2022 Week1]2048 二、[HNCTF 2022 Week1]What is Web 三、[LitCTF 2023]1zjs 四、[NCTF 2018]签到题 五、[SWPUCTF 2021 新生赛]gift_F12 一、[HNCTF 2022 Week1]2048 知识点&#xff1a;源代码审计 解题思路&#xff1a; 1、打开控制台&#xff0c;查看…

法线矩阵推导

法线矩阵推导 https://zhuanlan.zhihu.com/p/72734738 https://juejin.cn/post/7113952418613690382 https://blog.csdn.net/wangjianxin97?typeblog 1、为什么需要法线矩阵 vec3 normalEyeSpace modelViewMatrix * normal;如果模型矩阵执行了非等比缩放, 顶点的改变会导致法…

思乐直播系统短视频直播系统源码 直播短视频平台系统APP源码多功能后台系统

思乐直播系统&#xff0c;集直播、短视频等功能&#xff0c;根据市场趋势开发并推出思乐直播APP&#xff0c;APP功能丰富且可在后台管理系统进行配置&#xff0c;做到按需求来开启功能。APP使用起来方便快捷&#xff0c;随时随地开启直播、分享短视频。 整个系统具备非常完善、…

Spark 7:Spark SQL 函数定义

SparkSQL 定义UDF函数 方式1语法&#xff1a; udf对象 sparksession.udf.register(参数1&#xff0c;参数2&#xff0c;参数3&#xff09; 参数1&#xff1a;UDF名称&#xff0c;可用于SQL风格 参数2&#xff1a;被注册成UDF的方法名 参数3&#xff1a;声明UDF的返回值类型 ud…