HTML学习笔记

最新推荐文章于 2024-09-10 11:20:27 发布

Bangly01

最新推荐文章于 2024-09-10 11:20:27 发布

阅读量171

点赞数

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/Bangly01/article/details/131314141

版权

本文介绍了HTML的基础知识，包括HTML的发展历史、基本结构和常用标签。重点讲解了HTML5的新特性，如语义化标签、音视频支持和本地存储，并提出了HTML优化技巧，如减少HTTP请求、压缩代码和使用CDN。

摘要由CSDN通过智能技术生成

HTML学习笔记

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标记语言。HTML文件包含了网页的内容和结构，并通过标签和属性来定义文本、图片、链接、表格等元素在网页上的显示方式，下面我在学习HTML过程中的一些学习笔记。

一、HTML 基础

（一）HTML 的发展历史
HTML 最初由 Tim Berners-Lee 在 1989 年发明，用于创建在不同计算机之间共享文档的方式。HTML 的发展经历了多个版本，包括 HTML 2.0、HTML 3.2、HTML 4.01、XHTML 1.0 和 HTML5。
（二）HTML 的基本结构
HTML 文件由标签、属性和文本组成，其中标签用于定义元素的类型，属性用于定义元素的属性，文本用于定义元素的内容。HTML 文件的基本结构如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>网页标题</title>
</head>
<body>
	网页内容
</body>
</html>

其中，<!DOCTYPE html> 用于指定当前文档的类型为 HTML5，<html> 标签是 HTML 文档的根元素，<head> 标签用于定义文档的元数据，如字符集、标题等，<body> 标签用于定义文档的主要内容。
（三）在HTML 中有很多标签，下面是一些常用的标签及其用法：

<h1> - <h6>：用于定义标题，依次为一级标题到六级标题。
<p>：用于定义段落。
<a>：用于定义链接，href 属性指定链接目标。
<img>：用于定义图像，src 属性指定图像地址。
<ul> 和 <li>：用于定义无序列表，其中 <ul> 定义列表，<li> 定义列表项。
<ol> 和 <li>：用于定义有序列表，其中 <ol> 定义有序列表，<li> 定义列表项。
<table>、<tr>、<th> 和 <td>：用于定义表格，其中 <table> 定义表格，<tr> 定义表格行，<th> 定义表头单元格，<td> 定义表格数据单元格。
<form>、<input> 和 <button>：用于创建表单，其中 <form> 定义表单，<input> 定义表单元素，<button> 定义按钮。
<div> 和 <span>：用于定义块级元素和行内元素的容器。

除了上文中提到的常见基础标签，HTML 中还有很多其他的标签，下面是一些常用的标签及其用法：
1、<select> 和 <option>
标签用于创建下拉列表，标签用于定义下拉列表中的选项。例如：

<select>
	<option value="apple">苹果</option>
	<option value="banana">香蕉</option>
	<option value="orange">橙子</option>
</select>

其中，value 属性用于指定选项的值，<option> 标签中的文本内容是选项的显示文本。
2、<label> 和 <input>
<label> 标签用于为表单元素定义标签，<input> 标签用于定义表单元素，例如文本框、复选框、单选按钮等。例如：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">

其中，for 属性用于指定与表单元素关联的 <label> 元素的 id 属性值，这样用户在点击 <label> 元素时，就会自动将焦点设置到对应的表单元素上。
3、<textarea>
<textarea> 标签用于创建多行文本输入框，例如：

<textarea rows="4" cols="50">
在这里输入文本...
</textarea>

其中，rows 和 cols 属性分别用于指定文本框的行数和列数。
4、<iframe>
<iframe> 标签用于在网页中嵌入另一个网页或文档，例如：

<iframe src="http://www.example.com"></iframe>

其中，src 属性用于指定嵌入的网页地址。
5、<canvas>
<canvas> 标签用于创建绘图区域，可以使用 JavaScript 在该区域中绘制图形。例如：

<canvas id="myCanvas" width="200" height="100"></canvas>

其中，id 属性用于指定 <canvas> 元素的标识符，width 和 height 属性用于指定绘图区域的宽度和高度。
6、<audio> 和 <source>
<audio> 标签用于在网页中嵌入音频，<source> 标签用于指定不同格式的音频文件。例如：

<audio controls>
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
	Your browser does not support the audio element.
</audio>

其中，controls 属性用于显示媒体控制条，<source> 标签用于指定不同格式的音频文件，最后一个文本内容是当浏览器不支持 <audio> 标签时显示的提示信息。
7、<video> 和 <source>
<video> 标签用于在网页中嵌入视频，<source> 标签用于指定不同格式的视频文件。例如：

<video controls>
	<source src="video.mp4" type="video/mp4">
	<source src="video.webm" type="video/webm">
	<source src="video.ogg" type="video/ogg">
	Your browser does not support the video element.
</video>

其中，controls 属性用于显示媒体控制条，<source> 标签用于指定不同格式的视频文件，最后一个文本内容是当浏览器不支持 <video> 标签时显示的提示信息。
8、<progress>
<progress> 标签用于显示进度条，例如：

<progress value="50" max="100"></progress>

其中，value 属性用于指定当前进度值，max 属性用于指定最大进度值。
9、<meter>
<meter> 标签用于显示度量值，例如：

<meter value="70" min="0" max="100"></meter>

其中，value 属性用于指定当前度量值，min 和 max 属性用于指定最小值和最大值。
10、<time>
<time> 标签用于显示日期和时间，例如：

<time datetime="2023-06-01T09:00:00">2023年6月1日上午9点</time>

其中，datetime 属性用于指定日期和时间的 ISO 格式，可以用 JavaScript 来解析和格式化。
总之，HTML 中有很多不同的标签，每个标签都有自己的用途和属性，除了上述所提到的标签，还有许多其他的标签，如 <header>、<footer>、<nav>、<article>、<section>、<aside> 等等，这些标签可以用于创建语义化的网页结构，提高网页的可访问性和可读性。同时，还有一些新的 HTML5 标签和属性，如 <main>、<figure>、<figcaption>、<video>、<audio>、<datalist>、<details>、<summary> 等等，这些标签和属性可以用于实现更复杂的功能和效果，让网页更加丰富和生动。
（四）HTML 的常用属性
HTML 中的标签可以使用属性来控制其行为和样式，下面是一些常用的属性及其用法：
1、id：用于为元素定义唯一的标识符。
2、class：用于为元素定义一个或多个类名。
3、style：用于为元素定义内联样式。
4、src：用于定义图像或脚本的地址。
5、href：用于定义链接的目标地址。
6、title：用于为元素定义标题，当鼠标悬停在元素上时显示。
7、alt：用于定义图像的替代文本。

二、HTML5 新特性

HTML5 是 HTML 的最新版本，引入了一些新特性，包括语义化标签、音视频支持、本地存储等。下面是 HTML5 的一些新特性：
（一）语义化标签
HTML5 引入了一些语义化标签，用于更好地描述文档的结构和内容。例如：
<header>：定义页面或区域的头部。
<nav>：定义页面的导航链接。
<article>：定义独立的文章或内容块。
<section>：定义文档的章节或区域。
<aside>：定义页面的侧边栏内容。
<footer>：定义页面或区域的底部。
使用这些语义化标签能够使代码更加清晰和易于理解。

（二）音视频支持

HTML5 引入了 <audio> 和 <video> 标签，用于在网页中嵌入音频和视频。使用这些标签能够使嵌入音视频更加简单和方便，而且能够在不同浏览器和平台下获得更好的兼容性。
例如，下面是一个使用 <video> 标签嵌入视频的例子：

<video controls>
	<source src="video.mp4" type="video/mp4">
	<source src="video.webm" type="video/webm">
	<source src="video.ogg" type="video/ogg">
	Your browser does not support the video tag.
</video>

其中，controls 属性用于显示媒体控制条，<source> 标签用于指定媒体文件的地址和类型，最后一个文本内容是当浏览器不支持 <video> 标签时显示的提示信息。
（三）本地存储
HTML5 引入了 Web 存储 API，包括本地存储和会话存储。本地存储是指将数据存储在客户端浏览器中，而不是传到服务器上。使用本地存储能够使网页更加快速和响应，同时也能够减少服务器的负担。
下面是一个使用本地存储的例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>本地存储示例</title>
	<script>// 存储数据
		localStorage.setItem("name", "Tom");// 获取数据
		var name = localStorage.getItem("name");// 显示数据
		document.write("姓名：" + name);
</script>
</head>
<body>
</body>
</html>

这个例子中，localStorage 对象用于存储和获取数据，setItem() 方法用于存储数据，getItem() 方法用于获取数据。在这个例子中，我们将名字存储在客户端浏览器中，并在页面上显示出来。

三、HTML 的优化技巧

除了掌握 HTML 的基本知识和语法外，还需要注意一些优化技巧，以提高网页的性能和用户体验。下面是一些 HTML 的优化技巧：
（一）减少 HTTP 请求
HTTP 请求是影响网页加载速度的主要因素之一，因此需要尽可能减少 HTTP 请求。可以使用 CSS Sprites 技术将多个小图片合并成一张大图片，也可以使用 Data URI 技术将图片转换为 Base64 编码并嵌入到 HTML 中，从而减少图片的 HTTP 请求。
（二）压缩 HTML 代码
压缩 HTML 代码可以减小文件大小，从而加快页面加载速度。可以使用在线工具或者构建工具（如 Gulp、Webpack 等）来压缩 HTML 代码。
（三）使用 CDN
使用 CDN（内容分发网络）可以加速静态资源的加载速度，减少服务器的负担，提高网页的响应速度和用户体验。
（四）使用异步加载脚本
将 JavaScript 脚本放在页面底部或者使用异步加载脚本可以减少页面的加载时间，提高用户体验。可以使用 defer 和 async 属性来实现异步加载脚本。

Bangly01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML文件包含了网页的内容和结构，并通过标签和属性来定义文本、图片、链接、表格等元素在网页上的显示方式，下面我在学习HTML过程中的一些学习笔记。HTML 文件由标签、属性和文本组成，其中标签用于定义元素的类型，属性用于定义元素的属性，文本用于定义元素的内容。总之，HTML 中有很多不同的标签，每个标签都有自己的用途和属性，除了上述所提到的标签，还有许多其他的标签，如。使用 CDN（内容分发网络）可以加速静态资源的加载速度，减少服务器的负担，提高网页的响应速度和用户体验。
复制链接

扫一扫