HTML、HTML5一览

devtools/2024/12/22 13:20:52/

文章目录

  • 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.ppmy.cn/devtools/46338.html

相关文章

校园交友|基于SprinBoot+vue的校园交友网站(源码+数据库+文档)

校园交友网站 目录 基于SprinBootvue的校园交友网站 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台功能模块 5.2.1管理员功能模块 5.2.2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#x…

2024.5.29晚训参考代码

因为本套题没有BFS例题&#xff0c;所以我先把BFS模板放着 #include<bits/stdc.h> using namespace std; int n,m;//n*m的棋盘 int dis[402][402]; bool vis[402][402]; int X[]{-2,-2,-1,-1,1,1,2,2};//偏移量的表 int Y[]{-1,1,-2,2,-2,2,-1,1};//定义一个数组&…

基于单片机的汽车防盗报警系统设计与实现

摘要&#xff1a; 为了有效保护车辆&#xff0c;防止车辆被盗&#xff0c;汽车防盗报警系统的设计成为研究的热点问题 。 基于 STC89C52 单片机设计了一套汽车防盗报警系统&#xff0c;该系统由硬件和软件两部分组成&#xff0c;通过高效集成电路形成完整的控制系统&#xff…

小熊家务帮day5-day7 客户管理模块1 (小程序认证,手机验证码认证,账号密码认证,修改密码,找回密码等)

客户管理模块 1.认证模块1.1 认证方式介绍1.1.1 小程序认证1.1.2 手机验证码登录1.1.3 账号密码认证 1.2 小程序认证1.2.1 小程序申请1.2.2 创建客户后端工程jzo2o-customer1.2.3 开发部署前端1.2.4 小程序认证流程1.2.4.1 customer小程序认证接口设计Controller层Service层调用…

GitHub狂揽6700 Star,Python进阶必备的案例、技巧与工程实践

当下是 Python 急剧发展的时代&#xff0c;越来越多的人开始学习和使用Pyhon&#xff0c;而大家也遇到了各种问题。这份手册清晰、细致地介绍了 Python 代码应该遵循的编程风格&#xff0c;并解释了背后的原理和机制。 入门 Python 语言相对简单&#xff0c;但写出优雅的代码并…

Flutter 像素编辑器#04 | 导入导出图像

theme: cyanosis 1. 本文目的 本系列&#xff0c;将通过 Flutter 实现一个全平台的像素编辑器应用。源码见开源项目 【pix_editor】。在前三篇中&#xff0c;我们已经完成了一个简易的图像编辑器&#xff0c;并且简单引入了图层的概念&#xff0c;支持切换图层显示不同的像素画…

Qt-qrencode生成二维码

Qt-qrencode开发-生成二维码&#x1f4c0; 文章目录 Qt-qrencode开发-生成二维码&#x1f4c0;[toc]1、概述&#x1f4f8;2、实现效果&#x1f4bd;3、编译qrencode&#x1f50d;4、在QT中引入编译为静态库的QRencode5、在Qt中直接使用QRencode源码6、在Qt中使用QRencode生成二…

OceanBase v4.2 特性解析:新增三种临时表功能,更多的Oracle语句兼容

特性说明 在Oracle模式下&#xff0c;OceanBase临时表已经实现了基本的create、select、insert、delete、update等功能。为了满足更多客户的需求&#xff0c;OceanBase正在扩展临时表的功能&#xff0c;例如支持merge into和insert all操作。merge into允许用户将源表中的数据…