HTML、HTML5一览

news2025/1/12 23:45:07

文章目录

  • 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

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

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

相关文章

进口电动三通调节阀的应用-美国品牌

进口电动三通调节阀在多个工业领域中发挥着重要作用&#xff0c;通过精确的流体控制&#xff0c;提高生产效率、降低能源消耗、保证产品质量和安全。其应用主要体现在以下几个方面&#xff1a; 化工领域&#xff1a; 用于化工反应过程中的流体调控、物料输送、加热、冷却、混合…

记录22.04 安装 显卡驱动 以及一些问题

一. 前期准备 按照Ubuntu22.04 安装NVIDIA显卡驱动_ubuntu2204安装nvidia显卡驱动-CSDN博客来 1.更新软件列表和安装必要软件、依赖 sudo apt-get update #更新软件列表sudo apt-get install gsudo apt-get install gccsudo apt-get install make2.禁用nouveau (nouveau是…

弘君资本:光刻机、存储芯片概念拉升 同益股份、上海贝岭等涨停

光刻机概念11日盘中再度走强&#xff0c;到发稿&#xff0c;双乐股份、同益股份、东方嘉盛、盛剑环境等涨停&#xff0c;飞凯资料涨近10%&#xff0c;南大光电涨超7%。 存储芯片概念亦拉升&#xff0c;到发稿&#xff0c;雅创电子涨超12%&#xff0c;万润科技、上海贝岭、好上…

简易概况广告变现

广告变现是指媒体或平台通过向用户展示广告主的广告&#xff0c;从而获得收入的过程。 广告变现就像是一个店主&#xff0c;他需要一个吸引人的店面&#xff0c;提供优质的内容和服务&#xff0c;然后在店里摆放一些别人的商品或服务&#xff0c;每当有客人看了或买了这些商品或…

深圳比创达电子|EMI电磁干扰行业:挑战到突破,电子产业新未来

随着电子技术的飞速发展&#xff0c;电磁干扰&#xff08;EMI&#xff09;问题日益凸显&#xff0c;成为影响电子设备性能和稳定性的重要因素。EMI电磁干扰行业作为解决这一问题的关键领域&#xff0c;正面临着前所未有的机遇与挑战。 一、引言&#xff1a;EMI电磁干扰行业的崛…

免费!快速!干货!手把手教你如何在个人电脑上搭建你自己的大模型服务!

大模型发展如火如荼&#xff0c;虽然大模型的能力强大&#xff0c;但是大模型也是非常昂贵的&#xff01;不管是训练还是推理&#xff0c;都需要耗费大量的机器&#xff0c;而且机器的硬件资源&#xff0c;比如GPU、TPU等都有一定的要求。 因此&#xff0c;业界的同行们&#x…

远程工作岗位机会

电鸭&#xff1a;​​​​​​https://eleduck.com/?sortnew电鸭社区是具有8年历史的远程工作招聘社区&#xff0c;也是远程办公互联网工作者们的聚集地。在社区&#xff0c;我们进行有价值的话题讨论&#xff0c;也分享远程、外包、零活、兼职、驻场等非主流工作机会。「只工…

idea最新专业版安装+maven配置教程!

本教程适用于 J B 全系列产品&#xff0c;包括 Pycharm、IDEA、WebStorm、Phpstorm、Datagrip、RubyMine、CLion、AppCode 等。 &#xff08;直接复制&#xff0c;拿走不谢&#xff09; 9H1390TRAK-eyJsaWNlbnNlSWQiOiI5SDEzOTBUUkFLIiwibGljZW5zZWVOYW1lIjoi5rC45LmF5rA5rS7I…

Invalid keystore format,获取安全码SHA1值出错

AndroidStudio版本&#xff1a;Android Studio Electric Eel | 2022.1.1 项目运行JDK版本&#xff1a;11.0.15&#xff0c;查看方法如下&#xff1a; 在Terminal 窗口中&#xff0c;获取的Java版本是&#xff1a;1.8.0&#xff0c;修改Java系统环境变量&#xff0c;改成&#…

任务3.8.1 利用RDD实现词频统计

实战&#xff1a;利用RDD实现词频统计 目标 使用Apache Spark的RDD&#xff08;弹性分布式数据集&#xff09;模块实现一个词频统计程序。 环境准备 选择实现方式 确定使用Spark RDD进行词频统计。 Spark版本与Scala版本匹配 选择Spark 3.1.3与Scala 2.12.15以匹配现有Spar…

前端JS必用工具【js-tool-big-box】学习,获取当前浏览器向上滚动还是向下滚动,获取当前距离顶部和底部的距离

这一小节&#xff0c;我们说一下 js-tool-big-box 添加的最新工具方法&#xff0c;在日常前端开发工作中&#xff0c;如果网页很长&#xff0c;我们就需要获取当前浏览器是在向上滚动&#xff0c;还是向下滚动。如果向上滚动&#xff0c;滚动到0的时候呢&#xff0c;需要做一些…

树二叉树

树 ​ 树是 n&#xff08;n≥0&#xff09;个结点的有限集。当 n 0时&#xff0c;称为空树。在任意一颗非空树中应满足&#xff1a; &#xff08;1&#xff09;有且仅有一个特定的称为根的结点。 &#xff08;2&#xff09;当 n > 1时&#xff0c;其余结点可分为 m&…

管理的三大关键:定目标、抓过程、拿结果

第一板斧&#xff1a;定目标 想清楚&#xff0c;写清楚&#xff0c;讲清楚&#xff0c;才能干明白 没有见过伟大&#xff0c;谈何伟大&#xff1f;很多管理者之所以定不好目标&#xff0c;是因为他们根本不知道也没见过好目标是什么样的&#xff0c;谈何定出好目标&#xff…

无源晶振振荡电路失效问题分析与解决策略

无源晶振&#xff08;晶体谐振器&#xff09;在电子设备中扮演着至关重要的角色&#xff0c;为数字电路提供稳定的时钟信号。然而&#xff0c;振荡电路一旦失效&#xff0c;可能会导致整个系统运行不正常。晶发电子将从三个主要方面分析无源晶振振荡电路失效的问题&#xff0c;…

测试开发面经分享,面试七天速成

1. get、post、put、delete的区别 a. get请求&#xff1a; i. 用于从服务器获取资源。请求参数附加在URL的查询字符串中。 ii. 对服务器的请求是幂等的&#xff0c;即多次相同的GET请求应该返回相同的结果。 iii. 可以被缓存&#xff0c;可以被收藏为书签。 iv. 对于敏感数据不…

【回调函数】

1.回调函数是什么&#xff1f; 回调函数就是⼀个通过函数指针调用的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被用来调用其所指向的函数 时&#xff0c;被调用的函数就是回调函数。回调函数不是由该函数的实现方…

MySQL—多表查询—小结

一、引言 前面的博客已经全部学习完了关于多表查询。接下来对多表查询进行一个小结。 &#xff08;1&#xff09;多表查询主要是讲了两个方面 多表关系 &#xff08;不管业务关系如何的复杂&#xff0c;最终多表的关系基本上可以分为三类&#xff09; "一对多"、&qu…

每天一个数据分析题(三百五十九)- 多维分析模型

图中是某公司记录销售情况相关的表建立好的多维分析模型&#xff0c;请根据模型回答以下问题&#xff1a; 2&#xff09;产品表左连接品牌表的对应关系属于&#xff1f; A. 一对多 B. 一对一 C. 多对一 D. 多对多 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CD…

拯救学弟学妹计划之【论文帮手】是如何实现的?

功能介绍 概述 论文帮手是一款专为学术研究者设计的智能应用&#xff0c;旨在提供论文撰写和研究支持。应用通过深入了解用户的研究领域和需求&#xff0c;利用先进的搜索技术和人工智能&#xff0c;为用户提供定制化的学术资源和写作支持。 功能详述 1. 相关论文查找 此功…