HTML随笔
本文主要记录一些关于 HTML 的介绍、历史与演变、标签语言、语义化、多媒体内容、响应式设计、Web Accessibility和性能优化。 供自己以后查漏补缺,也欢迎同道朋友交流学习。
引言
对于浏览器用户来说,html
就是浏览的网页,也是我们最早和最频繁接触到的内容传播形式。所以我们前端开发的贡献是非常大的,所有浏览器用户都是通过我们才能浏览多姿多彩、功能丰富的页面。
我个人接触前端和 HTML
的过程是非常有意思的,我是自动化专业,其实不学 html,也不学前端。但我老婆是计算机多媒体专业,大学时候帮她使用 dreamweaver
(简称 DW
)做网页设计时接触到的。后来毕业后在做仅 3 个月的 SEO
网站编辑时,系统的自学了前端 JS
和 JQ
去面试成功了。
HTML简介
HTML(全称HyperText Markup Language
)是一种用于创建网页和网上信息的超文本标记语言
,是构建网页的基础技术。
HTML 由一系列的元素组成,这些元素告诉浏览器如何展示内容。每个元素由一个起始标签
和一个结束标签
组成,例如 <p>
和 </p>
用于定义一个段落。
HTML5
引入的语义化标签(如 <header>
, <footer>
, <article>
)不仅增强了内容的可读性和可维护性,还提高了网页的可访问性和搜索引擎优化(SEO
)效果。
此外,HTML 支持跨平台
兼容性,确保内容在各种设备和浏览器上一致显示。HTML 还提供了基本的交互功能,如表单元素,以及多媒体支持,使得嵌入音频和视频变得简单。
HTML历史与演变
HTML 自 1991
年由蒂姆·伯纳斯-李
提出以来,经历了多次重大更新和发展。最初,HTML 1.0
是一个简单的标记语言
,主要用于学术和科研领域的信息共享
。
1995
年,HTML 2.0
发布,引入了表格
和图像
支持,标志着网页内容的丰富化。
1997
年,HTML 3.2
成为首个由 W3C
(万维网联盟)发布的正式标准,增加了框架
和样式表
的支持。
随后,HTML 4.01
于 1999
年发布,引入了更多结构化和国际化特性,奠定了现代网页的基础。然而,随着互联网的快速发展,HTML 4.01 逐渐显现出局限性。
2000
年,W3C 推出了 XHTML
,试图将 HTML 与 XML 结合,但并未广泛普及。
2008
年,HTML5
正式推出,成为 HTML 发展的重要里程碑。HTML5 引入了大量新特性,如语义化标签(<header>
, <footer>
, <article>
)、多媒体支持(<audio>
, <video>
)、本地存储
和离线应用
。这些特性极大地丰富了网页的功能和用户体验,推动了 Web 应用的发展。
至今,HTML5 仍在不断演进,W3C
和 WHATWG
持续发布新的规范和标准,满足不断变化的网络需求。
HTML 基础
HTML 是一种标签语言,通过使用标签来描述网页的各种元素,一个典型的 HTML 文档结构如下所示:
html
<!-- 文档类型声明 -->
<!DOCTYPE html>
<!-- 文档根元素 -->
<html lang="en">
<head>
<!-- 描述网页字符编码 -->
<meta charset="UTF-8">
<!-- 描述窗口属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 描述网页标题 -->
<title>文档标题</title>
</head>
<!-- 文档内容元素 -->
<body>
<!-- 描述网页头部 -->
<header>
<!-- 描述网站标题 -->
<h1>网站标题</h1>
<!-- 描述网站导航 -->
<nav>
<ul>
<li><a href="#section1">首页</a></li>
<li><a href="#section2">关于我们</a></li>
<li><a href="#section3">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 描述网站内容 -->
<main>
<section id="section1">
<h2>首页</h2>
<p>欢迎来到我们的网站!</p>
</section>
<section id="section2">
<h2>关于我们</h2>
<p>我们是一家专注于技术创新的公司。</p>
</section>
<section id="section3">
<h2>联系我们</h2>
<p>邮箱: contact@example.com</p>
</section>
</main>
<!-- 描述网站底部 -->
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
从上面可以看到 HTML
有很多基础但非常重要的元素,也是我们用的比较多的:
- 文档类型声明 :
<!DOCTYPE html>
声明文档类型,告诉浏览器这是一个HTML5
文档。 - 根元素 :
<html>
文档的根元素,包含整个 HTML 文档的内容,lang
属性指定文档的主要语言。 - 头部信息 :
<head>
、<meta>
、<title>
包含文档的元数据,如字符集声明、视口设置、标题等。 - 主体内容 :
<body>
包含文档的所有可见内容,如文本、图像、链接等。 - 标题 :
<h1>
到<h6>
定义标题,<h1>
是最高级别的标题,<h6>
是最低级别的标题。 - 段落 :
<p>
定义段落,用于组织和格式化文本。 - 链接 :
<a>
定义超链接,href
属性指定链接的目标地址。 - 图像 :
<img>
嵌入图像,src
属性指定图像的路径,alt
属性提供替代文本。 - 列表 :
<ul>
和<ol>
分别定义无序列表和有序列表。<li>
定义列表项。 - 容器 :
<div>
块级元素,通常用于较大的内容块,<span>
内联元素,通常用于较小的内容片段。 - 语义化标签 :
<header>
定义页面或区域的头部,<nav>
定义导航链接,<main>
定义文档的主要内容,<section>
定义文档中的独立部分,<article>
定义独立的内容,如博客文章或新闻报道。<aside>
定义侧边栏或与主要内容相关的辅助信息。<footer>
定义页面或区域的底部。
语义化标签
语义化标签通过提供更具描述性的标签来增强网页的结构和意义。使用语义化标签可以使代码更加清晰、易于维护,并且对搜索引擎和辅助技术(如屏幕阅读器)更加友好。以下是一些常见的语义化标签及其用途:
- header:定义文档或节的头部,通常包含导航链接、标志、搜索框等。
- nav:定义导航链接的集合,通常用于页面的主要导航菜单。
- main:定义文档的主要内容,该内容与文档的其他部分(如侧边栏、页脚等)不同,是页面的核心内容。
- section:定义文档中的独立部分,通常用于将内容分成多个逻辑部分。
- article:定义独立的内容,如博客文章、新闻报道等,可以独立于文档的其他部分存在。
- aside:通常用于侧边栏或注释。
- footer:定义文档或节的底部,通常包含版权信息、联系方式等。
- figure和figcaption :
<figure>
用于包含图像、图表、视频等内容,<figcaption>
用于为这些内容提供标题或说明。
语义化标签的优势
-
可读性和可维护性:使用语义化标签可以使代码更易于理解和维护,因为每个标签都有明确的含义。
-
搜索引擎优化(SEO):搜索引擎可以更好地理解页面的结构和内容,从而提高搜索排名。
-
可访问性:屏幕阅读器和其他辅助技术可以更准确地解析和呈现内容,提高残障用户的访问体验。
-
未来兼容性:语义化标签遵循标准,更容易适应未来的浏览器和技术发展。
表单与用户交互
网页中用户交互行为最多的就是表单、按钮了,一般就是输入些账号密码做登录、输入表单项内容,点击按钮发送事件。
- form:定义一个表单,包含用户可以填写和提交的控件。
- input:定义输入控件,有多种类型。
- textarea:定义多行文本输入框。
- button:定义一个按钮。
多媒体内容
HTML5 引入了 <audio>
和 <video>
标签,使得嵌入音频和视频内容变得更加简单和直接。
audio
audio
标签用于嵌入音频文件,支持多种音频格式,如 MP3
、WAV
和 OGG
。
基本语法:
html
<audio src="path/to/audio.mp3" controls>
您的浏览器不支持 audio 元素。
</audio>
常用属性:
- src:指定音频文件的路径。
- controls:显示播放器控件(播放、暂停、音量等)。
- autoplay:音频文件加载完成后自动播放。
- loop:音频文件播放结束后重新开始播放。
- muted:静音播放音频。
- preload:指定音频文件的预加载行为(auto、metadata、none)。
多源文件:为了提高兼容性,可以提供多个源文件,浏览器会选择第一个支持的格式。
html
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持 audio 元素。
</audio>
video
video
标签用于嵌入视频文件,支持多种视频格式,如 MP4、WebM 和 OGG。
基本语法:
html
<video src="path/to/video.mp4" controls>
您的浏览器不支持 video 元素。
</video>
常用属性:
- src:指定视频文件的路径。
- controls:显示播放器控件(播放、暂停、音量等)。
- autoplay:视频文件加载完成后自动播放。
- loop:视频文件播放结束后重新开始播放。
- muted:静音播放视频。
- preload:指定视频文件的预加载行为(auto、metadata、none)。
- poster:指定视频播放前显示的图像。
多源文件:为了提高兼容性,可以提供多个源文件,浏览器会选择第一个支持的格式。
html
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 元素。
</video>
track
<track>
标签用于为 <audio>
和 <video>
提供外部文本轨道,如字幕、描述和章节。
基本语法:
html
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
常用属性:
- src:指定文本轨道文件的路径。
- kind :指定轨道的类型(
subtitles
、captions
、descriptions
、chapters
、metadata
)。 - srclang:指定轨道的语言。
- label:指定轨道的标签,用于用户选择。
响应式设计
通过使用响应式设计,网页可以根据用户的设备(如桌面、平板电脑、手机)自动调整布局和内容,确保在任何设备上都能流畅地显示和操作。
响应式设计的基本原理
- 流式布局(Fluid Layouts):使用百分比而不是固定像素来定义元素的宽度,使布局能够根据屏幕尺寸动态调整。
- 媒体查询(Media Queries):使用 CSS 媒体查询来针对不同的屏幕尺寸应用不同的样式规则。
- 弹性图片(Flexible Images):通过设置图片的最大宽度为 100%,使其在不同屏幕尺寸下自动缩放。
Web Accessibility
Web Accessibility
指的是确保网站和应用程序可以被所有人访问,无论他们是否有残疾。这包括视觉障碍、听觉障碍、运动障碍和认知障碍等。通过实施无障碍设计,可以提高网站的可用性和用户体验,扩大潜在用户群体。
实现 Web Accessibility 的基本原则
感知性:
信息和用户界面组件必须以用户可以感知的方式呈现。
- 文本替代:为图像、视频和音频提供替代文本(如 alt 属性)。
- 颜色对比:确保文本和背景之间的颜色对比度足够高。
可操作性:
用户界面组件和导航必须可以用多种方式操作,而不仅仅是鼠标。
- 键盘导航:确保所有功能都可以通过键盘操作。
- 时间限制:避免或提供延长时间限制的选项。
可理解性:
信息和操作必须易于理解。
- 简洁语言:使用简单明了的语言。
- 一致的导航:保持导航结构的一致性。
健壮性:
内容必须能够被各种用户代理(包括辅助技术)可靠地解析。
- 语义化 HTML:使用语义化的 HTML 标签。
- ARIA 属性 :使用
ARIA
(Accessible Rich Internet Applications)属性增强可访问性。
性能优化
HTML 性能优化是提高网页加载速度和用户体验的关键步骤。
减少 HTTP 请求
- 合并文件:将多个 CSS 文件和 JavaScript 文件合并成一个文件,减少 HTTP 请求次数。
- 使用 Sprites:将多个小图标合并成一张大的图像,通过 CSS 背景定位来显示不同的图标。
- 内联小资源:对于非常小的资源(如小图标或 CSS),可以直接将其内联到 HTML 中,减少额外的请求。
压缩文件
- 压缩 HTML:去除不必要的空格、注释和换行,减小文件大小。
- 压缩 CSS 和 JavaScript :使用工具(如
UglifyJS
、CSSNano
)压缩 CSS 和 JavaScript 文件,减小文件大小。 - 启用 Gzip 压缩 :在服务器端启用
Gzip
压缩,进一步减小传输文件的大小。
优化图片
- 选择合适的格式:根据图片的特性选择合适的格式(如 JPEG、PNG、WebP)。
- 压缩图片 :使用工具(如
TinyPNG
、ImageOptim
)压缩图片,减小文件大小。 - 使用懒加载:延迟加载非关键图片,直到用户滚动到它们的位置。
- 使用响应式图片 :使用
srcset
和sizes
属性,根据设备的屏幕尺寸加载适当大小的图片。
优化 CSS
- 避免使用 @import :@import 会阻塞并延迟 CSS 的加载,使用
<link>
标签代替。 - 使用媒体查询:将媒体查询放在 CSS 文件的顶部,以便浏览器尽早解析。
- 避免使用通配符选择器:通配符选择器(如 *)会导致浏览器执行大量的样式计算,影响性能。
优化 JavaScript
- 异步加载:使用 async 或 defer 属性异步加载 JavaScript 文件,避免阻塞页面渲染。
- 减少 DOM 操作:尽量减少对 DOM 的频繁操作,使用批量更新和事件委托。
- 使用模块化:将 JavaScript 代码模块化,按需加载必要的模块。
优化 HTML 结构
- 使用语义化标签:使用语义化的 HTML 标签,有助于浏览器和搜索引擎更好地理解页面结构。
- 减少嵌套层级:尽量减少 HTML 的嵌套层级,简化 DOM 结构。
- 避免使用内联样式:将样式放在外部 CSS 文件中,避免内联样式导致的重复和冗余。
缓存策略
- 设置缓存头:在服务器端设置适当的缓存头(如 Cache-Control 和 Expires),使浏览器缓存静态资源。
- 使用版本控制:在文件名中包含版本号,确保用户在更新文件时能够获取最新版本。
优化第三方资源
- 减少第三方脚本:尽量减少第三方脚本的数量,特别是那些可能阻塞页面加载的脚本。
- 使用 CDN:使用内容分发网络(CDN)加载第三方资源,提高加载速度。
使用现代 Web 技术
- 使用 WebP 图片格式 :
WebP
格式提供了更好的压缩率和质量,适用于现代浏览器。 - 使用 Service Workers :使用
Service Workers
缓存静态资源,实现离线访问和快速加载。 - 使用 HTTP/2 :
HTTP/2
提供了多路复用和头部压缩等特性,显著提高性能。