【HTML】知识点整理

最新推荐文章于 2024-05-21 18:11:13 发布
最新推荐文章于 2024-05-21 18:11:13 发布
阅读量182 收藏
点赞数
分类专栏： HTML 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Msy_yyy/article/details/106140730
版权

知识点目录

1. HTML5上一个版本是HTML4.01

2. HTML文件类型声明（Doctype）定义+作用

  • 定义
<!DOCTYPE html>
  • 作用
    声明位于文档中的最前面，处于标签之前。用于告知浏览器的解析器，用什么文档类型规范来解析这个文档。
  • 严格模式 & 混杂模式
    严格模式（标准模式）：浏览器按W3C标准解析执行代码。它的排版和JS运行是以浏览器支持的最高标准去运行。
    混杂模式：是一种向后兼容的解析方式。模拟老式浏览器，以防止站点无法工作。

3. HTML语义化

在这里插入图片描述

  • 语义化：正确的标签包含了正确的内容，结构良好，便于阅读。
  • 语义化便签
<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>

（1）<hgroup>：用于对网页或区段（section）的标题进行组合

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

（2）<figure>：添加插图和图题
使用<figure>标签添加插图，并设置浮动，相关的文本可以在其附近围绕。
<figure>标签内部还可以添加<figcaption>图题，其包含了对图片的完整说明。（添加图题后，alt文本就显得多余，可以去除）。

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
  • 语义化优点
    （1）易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
    （2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
    （3）方便其他设备解析，如盲人阅读器根据语义渲染网页。
    （4）有利于开发和维护，语义化更具有维护性，代码更好维护，与CSS3关系更加和谐。

4. 废除标签

废除一些网页美化方面的标签，使样式与结构分离更加彻底。

<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>

5. 增加了表单（input）属性

<!-- 此类型要求输入格式正确的email地址 -->
<input type=email >
<!-- 要求输入格式正确的URL地址  -->
<input type=url >
<!-- 要求输入格式数字，默认会有上下两个按钮 -->
<input type=number >
<!-- 时间系列，但目前只有 Opera和Chrome支持 -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<!-- 默认占位文字 -->
<input type=text placeholder="your message" >
<!-- 默认聚焦属性 -->
<input type=text autofacus="true" >

6. meta标签

  • charset属性
<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />
  • 移动端常用视口设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- 
  viewport参数详解：
  width：宽度（数值 / device-width）（默认为980 像素）
  height：高度（数值 / device-height）
  initial-scale：初始的缩放比例 （范围从>0 到10）
  minimum-scale：允许用户缩放到的最小比例
  maximum-scale：允许用户缩放到的最大比例
  user-scalable：用户是否可以手动缩 (no,yes)
 -->
  • http-equiv属性
<!-- expires指定网页的过期时间。一旦网页过期，必须从服务器上下载。 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<!-- 禁止浏览器从本地缓存中读取网页，即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 -->
<meta http-equiv="pragma" content="no-cache"/>
<!-- 也是设置cookie的一种方式，并且可以指定过期时间 -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<!-- 使用浏览器版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色，content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

7. src & href 区别

  • 定义
    （1）href：表示超文本引用，指向网络资源所在位置。
    （2）src：要把文件下载到html页面中去
  • 作用结果
    （1）href ：用于在当前文档和引用资源之间确立联系
    （2）src ：用于替换当前内容
  • 浏览器解析方式
    （1）当浏览器遇到href：会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
    （2）当浏览器解析到src ：会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

8. 常见浏览器的内核

浏览器内核
IEtrident
Firefoxgecko
SafariWebkit
Opera / ChromeBlink

9. WEB标准 & W3C的理解

  • WEB标准：
    网页主要有三部分组成： HTML（结构）+ CSS（表现）+JavaScript（行为）
  • W3C的理解：
    （1）标签闭合、标签小写、标签不随便嵌套
    （2）使用外链CSS和JS脚本，实现结构表现行为的分离。
    （3）文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问。
    （4）容易维护、改版方便。
    （5）提高网站易用性。

10. WebGL的理解

WebGL（ Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起。
优点：通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，无需任何浏览器插件支持。

11. SVG

基于XML，由W3C制定的可缩放的矢量图形。

  • 特点：
    (1)任意放缩：用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
    (2)文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
    (3)较小文件：总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
    (4)超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
    (5)超级颜色控制：SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
    (6)交互 X 和智能化： SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
  • 浏览器支持：
    Internet Explorer9，Firefox，Chrome ， Opera 和 Safari 都支持 SVG 。

12. 超链接target的取值 + 作用

取值作用
_blank在新窗口中打开链接
_self默认值，在同一框架/窗口中打开
_top在整个窗口中打开，因而会清除所有框架
_parent在父级框架中打开
_framename在指定框架中打开

13. 'data-'属性

data-为H5新增的为前端开发者提供自定义的属性，能够存储页面或 App 的私有的自定义数据。
这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取
注意：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。

14. 浏览器内核

分为渲染引擎 + JS引擎

  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
  • JS引擎：解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

15. Label的作用

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>

注意:label的for属性值要与后面对应的input标签id属性值相同

16. Canvas

是H5新增的一个标签，用于图形的绘制。
<canvas>：只是一个图形容器，必须使用脚本（如，JS）来实现绘制图形。

17. 表单提交中Get & Post方式的区别

(1) get 是从服务器上获取数据， post 是向服务器传送数据。
(2) get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
(3)对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
(4) get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。
(5) get 安全性低， post 安全性较高。

18. HTML5 应用程序缓存 & 浏览器缓存的区别

  • HTML5 引入了应用程序缓存。
<!doctype html>
<html manifest="example.appcache">
...
</html>
  • 优势：
    （1）离线浏览 - 用户可在应用离线时使用它们
    （2）速度 - 已缓存资源加载得更快
    （3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
  • 区别：与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

19. H5媒体标签

  • <audio>：定义音频内容
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>
  • <video>：定义视频内容
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<source> ：定义多媒体资源<video> 和 <audio>
<embed>：定义嵌入的内容，比如插件。
<track>：为诸如<video> 和<audio>元素之类的媒介规定外部文本轨道。

20. H5存储类型

H5新增了客户端存储数据的两个对象，分别为：

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。【持久化的本地存储】
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。【会话级别的存储】

21. cookie、session、localStorage、sessionStorage的区别

  • cookie & session区别：
    （1）cookie存放于客户端，session存放于服务端。
    （2）cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。
    考虑到安全应当使用session。
    （3） session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。
    考虑到减轻服务器性能方面，应当使用cookie。
    （4） 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
  • cookie、localStorage、sessionStorage区别：
    （1）都是在浏览器端/客户端存储的数据。
    （2）生命周期：
    Cookie：可设置失效时间，否则默认为关闭浏览器后失效
    Localstorage:除非被手动清除，否则永久保存
    Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
    （3）存放数据：
    Cookie：4k左右
    Localstorage和sessionstorage：可以保存5M的信息
    （4）http请求：
    cookie每次都会携带在http报文头中，会发送到服务器端。（即两边来回传送）
    Localstorage和sessionstorage：仅在客户端中保存，不参与和服务器的通信。
    （5）易用性：
    Cookie：需要程序员自己封装，原生的cookie接口不友好。
    Localstorage和sessionstorage：可采用原生接口，或者自己再次封装
drinmy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端之HTML知识点整理汇总(推荐)
09-28
下面小编就为大家带来一篇前端之HTML知识点整理汇总(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
计算机网络知识汇总（超详细整理）
热门推荐
发光如星
07-02 41万+
为了准备期末考试，同时也是为了之后复习方便，特对计算机网络的知识进行了整理。本篇内容大部分是来源于我们老师上课的ppt。而我根据自己的理解，将老师的PPT整理成博文的形式以便大家复习查阅，同时对于一些不是很清楚的地方，我去查阅了相关资料进行补充，当然也会有部分个人看法夹带其中来帮助大家理解。
HTML知识点整理（pink老师课程的学习笔记）
ZMH的博客
02-02 1266
HTML知识点整理 HTML介绍 HTML书写规范 HTML常用标签 1.HTML介绍 Html是用来描述网页(html文件)的一种超文本标记语言。 2. HTML书写规范 (1)基本规范 双标签<> </>；单标签</> 标签间有包含和并列关系 （2）html骨架标签 3.HTML常用标签 .补充：路径知识 ...
Html基础知识点整理
m0_53157173的博客
06-15 1902
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML基础知识点整理归纳
paparuazi的博客
06-21 6101
一、 HTML的基本结构 <head> <title>网页的标题</title> <meta charset="utf-8"/> </head> <body> 写网页的主体 </body> 注意：写完代码记得将格式保存为.html（推荐） htm xhtml HTML的基本结构详解 1.<html>内容</html> 解释：HTML文档的文档标记，也称为HTML开始标记
HTML教程（常用知识点总结）
梓栋DREM
03-25 5939
认识网页 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染...
HTML基础知识点
qq_40046544的博客
07-27 8240
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
学习HTML的知识点总结
Zrf2191318455的博客
11-01 2657
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
SpringBoot知识点整理
你好啊cbw
08-29 2万+
1.对SpringBoot的认识 1.1.什么是SpringBoot springboot是spring快速开发脚手架，通过约定大于配置的方式，快速构建和启动spring项目. springboot根据我们项目中所引入的依赖，比如引入了springmvc构件，就会判断出是要进行springmvc的web开发，就会把springmvc的相关基本配置自动配置好了，不需要我们在xml中配置。 比如配置前端控制器DispatcherServlet、配置视图解析器、配置静态资源访问、处理器映射器、处理器适配
服务器面试必备-网络知识点整理
网易搬砖选手
03-08 4万+
epoll的实现知道么？在内核当中是什么样的数据结构进行存储，每个操作的时间复杂度是多少？ epoll是Linux系统中提供的一种高效的I/O多路复用机制。其基于事件驱动的模型，可以有效地管理大量的并发连接。 在内核中，epoll使用一个红黑树（RB Tree）来存储所有的事件。这个红黑树是通过一个特殊的数据结构epoll_event来表示的，每个epoll_event对应一个文件描述符和其上感兴趣的事件。 每次调用epoll_wait函数，内核都会检查红黑树中的所有事件，并返回已经就绪（满足条件）
HTML常用知识点总结笔记
果冻
07-01 5843
目录 前言 一、HTML简介 1.什么是HTML? 2.HTML 标签 (1)HTML标签 (2)head标签 (3)body标签 3.HTML 元素 二、基础知识 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、图片标签 (五)、相对路径和绝对路径 (六)、超链接标签（重点） (七)、列表标签 HTML3种列表 (1)、有序列表 (2)、无序列表 (3)、自定义列表 (八)、表格标签 (...
html知识点整理笔记
06-30
html知识点整理笔记, 包含.mm(FreeMind文件) .pdf 和 .svg三个版本, 图片预览见博客https://blog.csdn.net/weixin_43775143/article/details/118360898?spm=1001.2014.3001.5501
html知识点笔记整理
03-29
html知识点笔记整理
前端知识点整理
11-14
前端知识点整理,JavaScript +HTML+css,jquery PHP bootstrap
java学习资源知识点整理
01-22
本资源包涵盖了Java知识、Linux和Windows等多个领域的内容和知识点，旨在帮助开发者全面提升技术水平。内容涵盖了Java基础语法、面向对象编程、异常处理、集合框架等核心知识点，同时也提供了Linux、Windows系统需要...
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 606
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 698
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
前端基础入门三大核心之HTML篇 —— IndexedDB详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 792
IndexedDB是一种运行在浏览器中的非关系型数据库，它允许web应用在用户的设备上存储大量结构化数据，包括文件和 blob 数据类型。与传统的Cookie和localStorage相比，IndexedDB支持复杂的查询、索引以及事务处理，特别适合处理大量或者复杂的数据集。在事件中定义对象仓库和索引。// 创建索引IndexedDB为前端开发者提供了强大的本地数据存储能力，是构建高性能Web应用不可或缺的工具。
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 877
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
javaweb基础知识点整理
05-05
下面是一些常见的JavaWeb基础知识点整理： 1. Servlet和JSP：Servlet用于处理HTTP请求和响应，JSP用于生成动态HTML页面。 2. MVC设计模式：MVC模式将应用程序分为模型、视图和控制器三个部分。模型负责处理业务逻辑和数据存储，视图负责显示数据，控制器负责接收和处理用户请求。 3. JDBC：Java数据库连接（JDBC）是Java编程语言中的一种标准接口，用于连接数据库并执行SQL查询。 4. Session和Cookie：Session用于在客户端和服务器之间存储用户信息，Cookie用于在客户端存储用户信息。 5. JNDI：Java命名和目录接口（JNDI）是Java平台提供的一种标准接口，用于访问命名和目录服务。 6. JSP标准标签库：JSP标准标签库（JSTL）是一组标签，用于简化JSP页面的开发。 7. EL表达式：EL表达式（EL）是一种语法，用于在JSP页面中访问和操作JavaBean属性、数组、集合等。 8. Servlet过滤器：Servlet过滤器用于拦截HTTP请求和响应，并在处理它们之前或之后执行某些操作。 9. Web应用程序部署：Web应用程序可以通过WAR文件（Web应用程序归档文件）或目录形式部署到服务器上。 10. Tomcat服务器：Tomcat是一个开源的Web服务器，支持Servlet和JSP技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值