html重点知识总结

embedded/2025/3/18 21:34:29/

html_0">html重点知识

一直在网上看过许多不同的前端资料,但是总觉的只是单单的阅读和记忆不能够真正的加深自己的知识理解,所以开始尝试自己在不查看其他一切资料的情况下对自己了解的知识做一个总结(顺序或许有点乱),如果之后发现有不足再来补充,我相信输出才是最好的输入!!!

H5新增内容

语义化标签:

  • h5新增了一系列语义化标签,他们本质上和一般的div标签没有区别,但是在语义上有不同。
    • header:专门指页面的顶部区域
    • footer:专门指页面的底部区域
    • sidebar:指页面的侧边
    • nav:指页面的导航栏
    • article:指文章的内容
    • section:指文档的一部分
  • 语义化的优点:
    • 对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于 SEO。除此之外,语义类还支持读屏软件,根据文章可以自动生成目录;
    • 对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护。

媒体化标签:

  • 音频标签audio
  • 视频标签video

表单标签:

  • form标签:用于用户要向服务器提交内容
  • 有很多不同的表单类型:类似于email,data,color,number。
  • 表单属性:用于控制用户上传东西的限制,例如require表示该元素必须提交,placeholder表示一些用于提示的填充词

进度条(progress)&度量器

  • h5新增的用于展示进度的标签
  • value:规定当前度量值
  • max:表示当前任务的总进度

DOM查询操作

doucment.querySelect()
doucment.querySelectAll()
//二者都是用来通过标签或类来实现DOM元素的查找

Web存储操作

  • localStorge:本地存储,不会因浏览器关闭而删除
  • sessionStorge:会话存储,会因浏览器关闭而删除
  • 二者的存储容量都不会太大,大约5MB左右

Drag api

  • 用来处理拖动相关(比如实现文件拖动上传)
  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

html_81">从上至下对html元素进行一些简单介绍

一个完整的html页面
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础 HTML 页面</title><style>body {font-family: Arial, sans-serif;margin: 20px;padding: 20px;text-align: center;}</style><script>...<script/>
</head>
<body><h1>欢迎来到我的网页</h1><p>这是一个基础的 HTML 页面示例。</p>
</body>
</html>

html_112">

  • 所有html页面的标准开头
  • 用于告知浏览器该以一种怎样的文档定义类型来解析该文档
  • 一般是使用标准模式来解析,标准模式一般指W3C定义的h5格式
  • 如果没有这行代码,浏览器会使用混杂模式来解析文档
  • 混杂模式依旧保留在浏览器的目的是为了兼容一些在W3C标准制定前就已经存在的网页。

html__122">< html >

  • 包裹整个文件的标签,可以表示该页面是使用什么语言的,en-英语,zh-Cn-中文

< head >

  • 用来存放一些css或js资源以及meta标签
  • title标签是head里唯一一个必须的标签

< meta >

  • meta标签由name和 content 属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等。
  • 常见的meta标签
    • charset:用来描述文档的编码类型
    • keyword:页面关键词
    • description:页面描述
    • refresh:页面重定向和刷新
    • viewpoint:移动端适配

< title >

  • 该页面的标题
  • seo优化(浏览器检索优化)中比较重要的三个标签(tdk)
    • title
    • keyword
    • description

< style >

  • 用于引进css样式资源
  • 可以在标签内写,也可以直接从外部引进

< script >

  • 引进js脚本资源
  • 由于引进脚本资源一般会阻碍页面的加载,所以该标签一般也可以放在< body >标签后面
  • 该资源可以使用两种常见的异步引进方式(不会影响页面的加载)
    • async:下载的时候不会阻塞,执行的时候会阻塞,下载完立刻执行,顺序不定
    • defer:下载和执行都不会阻塞,执行部分再 HTML 解析完成后开始,按代码顺序执行

< body >

  • 加载页面,该代码同时可以被用户在浏览器上看到

http://www.ppmy.cn/embedded/173682.html

相关文章

python拉取大视频导入deepseek大模型解决方案

使用Python拉取大视频并导入大模型&#xff0c;需要综合考虑数据获取、存储、处理和资源管理&#xff0c;确保高效稳定地处理大视频数据&#xff0c;同时充分利用大模型的性能&#xff0c;以下是分步方案及代码示例&#xff1a; --- 1. 分块下载大视频&#xff08;避免内存溢出…

深度学习中学习率调整策略

学习率衰减策略是深度学习优化过程中的一个关键因素&#xff0c;它决定了训练过程中学习率的调整方式&#xff0c;从而影响模型收敛的速度和效果。不同的衰减策略在不同的任务和模型上可能有不同的表现&#xff0c;下面从我用到过的几个衰减策略进行记录&#xff0c;后续慢慢跟…

Vue Date 今天的开始时间与结束时间

在 Vue 项目里&#xff0c;要获取今天的开始时间与结束时间&#xff0c;可借助 JavaScript 的 Date 对象来实现。 在 JavaScript 里&#xff0c;date.getFullYear() 是 Date 对象的一个方法&#xff0c;主要用于获取 Date 对象所表示日期的年份&#xff0c;返回值是一个四位数…

mysql数据库中多张表导出成excel方式

需求&#xff1a; 用于将mysql数据库中的几百张表导出成excel方式 表中有些字段的值是含有双引号和逗号值&#xff0c;比如json值 表中有些字段是汉字内容 导出的excel要求有表的列名 shell对于含有逗号和双引号的值会错乱分割 数据库中某些字段值是化学符号 import pymysql,o…

浅谈AI落地之-加速训练

前言 曾在游戏世界挥洒创意&#xff0c;也曾在前端和后端的浪潮间穿梭&#xff0c;如今&#xff0c;而立的我仰望AI的璀璨星空&#xff0c;心潮澎湃&#xff0c;步履不停&#xff01;愿你我皆乘风破浪&#xff0c;逐梦星辰&#xff01; 混合精度&#xff1a; FL32是目前模型存…

低空经济安全保障体系构建方案

一、源头安全设计与认证 飞行器安全冗余设计 动力系统双备份:电动垂直起降(eVTOL)飞行器配备双电机、多电池组,单组故障仍可安全返航。轻量化结构材料:采用碳纤维复合材料+蜂窝夹层设计,抗坠毁强度提升30%。适航认证分级:参照民航标准,对载人/载货飞行器实施分级认证(…

Rust + WebAssembly 开发环境搭建指南

一、安装 Rust 工具链 要开始 Rust WebAssembly 开发&#xff0c;你需要安装标准 Rust 工具链&#xff0c;包括 rustup、rustc 和 cargo。 1. 安装 Rust 工具链 Rust 官方提供 rustup 工具来管理 Rust 版本。你可以使用以下命令安装 Rust&#xff1a; curl --proto https -…

游戏引擎学习第163天

我们可以在资源处理器中使用库 因为我们的资源处理器并不是游戏的一部分&#xff0c;所以它可以使用库。我说过我不介意让它使用库&#xff0c;而我提到这个的原因是&#xff0c;今天我们确实有一个选择——可以使用库。 生成字体位图的两种方式&#xff1a;求助于 Windows 或…