HTML、HTML5一览

文章目录

  • HTML
    • 简介
    • 标签
      • 基本标签
      • 格式化文本
      • 链接
      • 图像
      • 块级元素
      • 列表
      • 表格
      • 框架
      • 表单
      • 实体
  • HTML5

此篇用于优化csdn第一篇文章

在这里插入图片描述

HTML

简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
    基本格式快速生成:快捷点 !+ 回车
    ​​
    ​​在这里插入图片描述
    在这里插入图片描述
    lang后面的是网页显示语言
    charset后的是“万国码”,详解万国码

基本标签

在这里插入图片描述

格式化文本

在这里插入图片描述

链接

在这里插入图片描述
若跳转页面时不覆盖当前页面 则在<a 内定义target=“_blank"

锚点链接:点击链接时,快速定位到链接的位置
在这里插入图片描述

图像

在这里插入图片描述
src后面跟着图片存在的路径,可为硬盘位置,也可为网址链接。alt 是当图片显示不出来的时候,文本代替图片显示。

路径分为相对路径和绝对路径
相对路径
在这里插入图片描述

​​绝对路径
在这里插入图片描述

块级元素

在这里插入图片描述

div和span的区别

列表

无序列表
在这里插入图片描述
有序列表
在这里插入图片描述
自定义列表

在这里插入图片描述

表格

结构
在这里插入图片描述

定义行 定义列 定义表头

​跨行或跨列的单元格
在这里插入图片描述
在这里插入图片描述

框架

在这里插入图片描述

表单

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注:maxlength为限制文字数目,checked为默认选择,value为默认内容
下拉列表:
在这里插入图片描述
设置预选
在这里插入图片描述

实体

在这里插入图片描述

HTML5

html5主要新增的一些标签元素
例如:

  • <canvas>标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

<audio>    定义音频内容
<video>    定义视频(video 或者 movie)
<source>    定义多媒体资源 <video><audio>
<embed>    定义嵌入的内容,比如插件。
<track>    为诸如 <video><audio> 元素之类的媒介规定外部文本轨道。

新表单元素

<datalist>    定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen>    规定用于表单的密钥对生成器字段。
<output>    定义不同类型的输出,比如脚本的输出。

新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:

<article>    定义页面独立的内容区域。
<aside>    定义页面的侧边栏内容。
<bdi>    允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>    定义命令按钮,比如单选按钮、复选框或按钮
<details>    用于描述文档或文档某个部分的细节
<dialog>    定义对话框,比如提示框
<summary>    标签包含 details 元素的标题
<figure>    规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>    定义 <figure> 元素的标题
<footer>    定义 section 或 document 的页脚。
<header>    定义了文档的头部区域
<mark>    定义带有记号的文本。
<meter>    定义度量衡。仅用于已知最大和最小值的度量。
<nav>    定义导航链接的部分。
<progress>    定义任何类型的任务的进度。
<ruby>    定义 ruby 注释(中文注音或字符)。
<rt>    定义字符(中文注音或字符)的解释或发音。
<rp>    在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section>    定义文档中的节(section、区段)。
<time>    定义日期或时间。
<wbr>    规定在文本中的何处适合添加换行符。

详细内容:

  • canvas : HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
    标签只是图形容器,您必须使用脚本来绘制图形。
    你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

  • video:在这里插入图片描述

  • audio:


  • input新增type

color
date
datetime
datetime-local
email
month
number
range(滑块设置)
search
tel
time
url
week

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

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

相关文章

sublime如何写python

推荐一款好用且轻量级的编辑器——sublime—text3&#xff0c;sublime现在支持的语言有很多。 右边弹出的列表可以往下拉&#xff0c;亮点是支持了python&#xff0c;而且不需要安装任何的python环境&#xff0c;直接下载sublime就可以编写python代码并运行了。 使用方法&…

Java面经——SpringCloud微服务

SpringCloud SpringCloud的五大组件 注册中心网关远程调用负载均衡熔断降级 谈谈你对SpringCloud的理解 SpringCloud是为了解决微服务架构中出现的一系列服务治理难题的而提出的一套规范&#xff0c;统一了标准。降低了微服务架构的开发难度。有了 Spring Cloud 这样的技术生…

Three.js——基础纹理、凹凸纹理、法向贴图、环境贴图、canvas贴图

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…

linux嵌入式设备测试wifi信号强度方法

首先我们要清楚设备具体链接在哪个wifi热点上 执行&#xff1a;nmcli dev wifi list rootubuntu:/home/ubuntu# nmcli dev wifi list IN-USE BSSID SSID MODE CHAN RATE SIGNAL BARS > * 14:EB:08:51:7D:20 wifi22222_5G Infr…

香橙派安装 opencv 4.9.0

香橙派Orange AI Pro / 华为昇腾310 使用源码方式安装opencv 4.9.0 下载源码到香橙派 https://opencv.org/releases/ 解压 unzip opencv-4.9.0.zip进入解压后的文件 cd opencv-4.9.0创建构建目录build mkdir build进入目录 cd build使用cmake配置后续的构建环境 cmake -D…

SwiftUI 利用 Swizz 黑魔法为系统创建的默认对象插入新协议方法(二)

功能需求 在 SwiftUI 的开发中,我们往往需要借助底层 UIKit 的“上帝之手”来进一步实现额外的定制功能。比如,在可拖放(Dragable)SwiftUI 的实现中,会缺失拖放取消的回调方法让我们这些秃头码农们“欲哭无泪” 如上图所示,我们在拖放取消时将界面中的一切改变都恢复如初…

SpringBoot校园疫情管理系统-计算机毕业设计源码81164

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;校园当然也不例外。校园疫情管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;采用J…

SmartEDA:Multisim与Proteus的强劲对手,引领电子设计新纪元

在电子设计领域&#xff0c;Multisim与Proteus长久以来一直占据着重要的地位&#xff0c;它们以其强大的仿真功能和丰富的组件库&#xff0c;深受设计师们的喜爱。然而&#xff0c;随着科技的不断进步和创新&#xff0c;一款名为SmartEDA的新兴电子设计工具正悄然崭露头角&…

MYSQL数据库客户端常规指令使用

这里新开一章&#xff0c;对MYSQL进行更加底层的系统的一个学习 Mysql常用工具简介 emmmm这里的话就默认大家在linux系统上面都进行了MYSQL的安装了. 在mysql安装完成之后&#xff0c;一般在路径 /usr/bin 下的 我们对该路径进行一个文件的展示 这里是展示出来的辅助工具 …

Web3.0区块链技术开发方案丨ICO与IDO代币开发

在Web3.0时代的到来下&#xff0c;区块链技术不仅改变着金融领域的格局&#xff0c;也在资金筹集和代币发行方面掀起了一场变革。初始代币发行&#xff08;ICO&#xff09;和去中心化代币发行&#xff08;IDO&#xff09;成为了项目融资的主要方式&#xff0c;其基于区块链技术…

【android 9】【input】【8.发送按键事件2——InputDispatcher线程】

系列文章目录 本人系列文章-CSDN博客 目录 系列文章目录 1.简介 1.1流程介绍 1.2 时序图 2.普通按键消息发送部分源码分析&#xff08;按键按下事件&#xff09; 2.1 开机后分发线程阻塞的地方 2.2 InputDispatcher::dispatchOnceInnerLocked 2.3 InputDispatcher::disp…

有没有不用写代码,贴图也简单的HTML WEB 3D 产品展示配置器?

品牌零售商&#xff0c;产品有3D模型但没有贴图&#xff0c;以前是直接送去生产&#xff0c;现在需要上线电商&#xff0c;看到国外挺多这种展示方式的网店&#xff0c;国内有没有这方面的供应商&#xff0c;网店顾客可以自己鼠标转动、换零件、换颜色等看定制效果&#xff0c;…

深入理解并发之LongAdder、DoubleAdder的实现原理

深入理解LongAdder、DoubleAdder的实现原理 本文主要通过LongAdder和DoubleAdder的源码&#xff0c;讲述一下其实现原理。通过LongAdder和DoubleAdder的源码可知。两者都是继承了Striped64的类。下面我们将通过源码的形式讲述一下这三个类都做了哪些事情。 1: Striped64 ​ …

用C#(WinForm)开发触摸屏,体验感满满

用C#&#xff08;WinForm&#xff09;开发触摸屏&#xff0c;体验感满满

人工智能大模型的进化之路:探索如何让它们变得更“聪明”

一、引言 在人工智能&#xff08;AI&#xff09;领域&#xff0c;大模型凭借其强大的处理能力和广泛的应用前景&#xff0c;已经成为研究的热点。然而&#xff0c;尽管这些模型在多个领域展现出了惊人的能力&#xff0c;但它们仍然面临着理解力、泛化能力和适应性等方面的挑战…

中央空调节能的分户计费系统

中央空调节能 在建筑能耗中&#xff0c;中央空调能耗一般占到了40%---60%的比例&#xff0c;因此如何有效降低空调能耗就成为建筑节能的重中之重。 项目案例描述 山东银座购物广场&#xff1a;为集购物中心、高级酒店式公寓和办公为一体的综合性公共建筑。整体建筑共为地下3层&…

我们身边的北斗:你知道吗北斗还能帮我们演唱会抢票

当我们步入2024年&#xff0c;演唱会与音乐节的热潮依然不减。每当周末或节假日&#xff0c;各大城市的演唱会场馆总是人头攒动&#xff0c;歌声与掌声交织成一片欢乐的海洋。而在朋友圈里&#xff0c;也总能看到乐迷们晒出的演唱会现场照片和视频&#xff0c;分享着那份独特的…

智领未来,安全无忧:智能网联汽车监控大屏的守护之旅

在繁忙的都市中&#xff0c;驾驶者往往面临着诸多安全隐患。传统的驾驶辅助系统虽然能够提供一定的帮助&#xff0c;但在复杂多变的交通环境中&#xff0c;其局限性也逐渐显现。而智能网联汽车安全监控大屏&#xff0c;正是为了解决这一问题而诞生的。 山海鲸可视化大屏 大屏采…

36. 【Java教程】输入输出流

本小节将会介绍基本输入输出的 Java 标准类&#xff0c;通过本小节的学习&#xff0c;你将了解到什么是输入和输入&#xff0c;什么是流&#xff1b;输入输出流的应用场景&#xff0c;File类的使用&#xff0c;什么是文件&#xff0c;Java 提供的输入输出流相关 API 等内容。 1…

【翻译软件】CopyTranslator复制即翻译的外文辅助阅读翻译软件NO.102

使用平台&#xff1a;Windows/Linux/macOS 设置里选择翻译引擎和翻译API&#xff0c;谷歌翻译已经退出中国了&#xff0c;但还是提供了镜像地址 一、复制即翻译 只需要复制文本到剪贴板&#xff0c;就可以查看翻译结果 记得开启“自动粘贴”哦。 二、多段同时翻译 三、智能…