HTML基础知识【一篇就够】

成茂峰

已于 2024-01-03 18:08:13 修改

阅读量972

点赞数 22

分类专栏： # 前端-基础合集文章标签： html 前端

于 2024-01-03 18:05:40 首次发布

本文链接：https://blog.csdn.net/u012551928/article/details/135369874

版权

前端-基础合集专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html是什么？

TML代表“超文本标记语言”，其中“超文本”指的是文本中包含的链接和其他媒体元素，例如图像和视频。

HTML使用标记或标签来定义文档的结构和内容，并使用属性来指定标记的特定属性和值。

html的历史

HTML的历史可以追溯到20世纪80年代早期，当时欧洲核子研究组织（CERN）的一些研究人员开始探索一种新的方式来共享文档和信息。这些研究人员中的一位，蒂姆·伯纳斯-李（Tim Berners-Lee），最终开发出了HTML和其他相关技术，如HTTP和URL，以创建Web。

HTML最初的版本非常简单，只包含一些基本的标记和属性。随着Web的发展，HTML也不断发展和演变，新的标记和属性被添加到语言中，以支持更复杂的Web应用程序和功能。目前，最新版本的HTML是HTML5，它包含许多新的功能和API，如视频和音频支持、本地存储、Web Workers和Web Sockets等。

总之，HTML是Web开发的基础，它使用标记和属性来定义文档的结构和内容。HTML的历史可以追溯到20世纪80年代早期，当时欧洲核子研究组织的一些研究人员开始探索一种新的方式来共享文档和信息。随着Web的发展，HTML也不断发展和演变，新的标记和属性被添加到语言中，以支持更复杂的Web应用程序和功能。

html的版本

HTML有许多版本，最新版本是HTML5。HTML最初的版本非常简单，只包含一些基本的标记和属性。

随着Web的发展，HTML也不断发展和演变，新的标记和属性被添加到语言中，以支持更复杂的Web应用程序和功能

html的基本结构

一个HTML文档由以下几部分组成：

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

<!DOCTYPE html> 声明文档类型为HTML5。
<html> 元素是整个文档的根元素。
<head> 元素包含了文档的元数据，如页面标题、关键字等信息。
<meta> 元素定义了文档的字符编码、显示方式等信息。
<title> 元素定义了页面标题，将会显示在浏览器的标题栏上。
<body> 元素包含了页面的主要内容。

常用的html标签

- <h1>到6>：用于表示标题。1>是最高级别的标题，6>是最低级别的标题。
- <p>：用于表示段落。
- <a>：用于表示链接。>标签需要一个href属性，该属性指定链接的URL。
- <img>：用于表示图像。>标签需要一个src属性，该属性指定图像的URL。
- <ul>和<ol>：用于表示无序列表和有序列表。
- <li>：用于表示列表项。
- <table>：用于表示表格。
- <tr>：用于表示表格行。
- <td>：用于表示表格单元格。

常用属性

以下是一些常用的HTML属性：

- class：用于指定元素的类。类通常用于指定元素的样式。
- id：用于指定元素的唯一标识符。ID通常用于JavaScript和CSS中。
- href：用于指定链接的URL。
- src：用于指定图像的URL。
- alt：用于指定图像的替代文本。如果图像无法加载，替代文本将显示在其位置上。

html中的注释

使用注释可以在代码中添加一些解释性的文字，而这些文字不会被浏览器渲染。
在HTML中，注释的语法如下：

<!-- 注释内容 -->

html元素和标签的区别

HTML元素和标签是两个不同的概念。

HTML元素是指从开始标签到结束标签之间的所有内容，包括标签本身、标签属性和标签内容

HTML标签则是用于定义HTML元素的名称，通常由尖括号包围< >

html文本格式化

标题和段落

HTML提供了六个级别的标题，从<h1>到<h6>。

<h1>标记用于页面上最重要的标题，而<h6>标记用于最不重要的标题。
以下是如何使用<h1>标记创建顶级标题的示例：

<h1>This is a top-level heading.</h1>

要用HTML创建一个段落，可以使用<p>标记。
段落的实际内容将被放置在开始和结束<p>标签之间，如下所示：

<p>This is a paragraph of text.</p>

粗体和斜体

要使HTML中的文本加粗，可以使用<strong>标记或<b>标记。

这两个标记都用于指示所包含的文本应以粗体显示。

这两个标签的区别在于，<strong>用于表示文本非常重要，而<b>用于表示出于风格目的，文本只是粗体。

以下是如何使用<strong>标记将文本加粗的示例：

<p><strong>This text is bold.</strong></p>

要使HTML中的文本变为斜体，可以使用<em>标记或<i>标记。
这两个标记都用于指示所包含的文本应以斜体显示。

这两个标签之间的差异类似于<strong>和<b>之间的差异<em>用于表示文本是强调的，而<i>用于表示出于风格目的，文本只是斜体。

以下是如何使用<em>标记使文本变为斜体的示例：

<p><em>This text is italic.</em></p>

下划线和删除线

要在HTML中给文本加下划线，可以使用值为underline的CSS文本装饰属性。下面是一个例子：

<p style="text-decoration: underline;">This text is underlined.</p>

要在HTML中创建删除线文本，可以使用值为line-through的CSS文本装饰属性。下面是一个例子：

<p style="text-decoration: line-through;">This text has a strikethrough.</p>

超链接

您可以使用<a>标记在HTML中创建超链接。href属性指定链接应指向的URL。以下是一个示例：

<a href="https://www.example.com">This is a hyperlink.</a>

图像标签

对于图像，可以使用<img>标记。src属性指定图像文件的URL，alt属性为看不到图像的用户提供替代文本。下面是一个例子：

<img src="path/to/image.jpg" alt="This is an image.">

列表标签

对于列表，HTML提供了几个标记，包括用于无序列表的<ul>和用于有序列表的<ol>。下面是一个无序列表的例子：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

下面是一个有序列表的例子：

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

表格标签

您可以使用<table>标记。在表中，可以使用<tr>标记定义行，使用<td>标记定义每行中的单元格。下面是一个例子：

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

html表单

表单标签

HTML提供了几个用于创建表单的标签，包括<form>、<input>、<label>、<select>、<option>、<textarea>和<button>。

<form>标记用于创建表单元素，该元素可以包含一个或多个表单控件，如文本输入、复选框、单选按钮等。

action属性指定表单数据应提交到的URL，method属性指定用于提交的HTTP方法（通常为“GET”或“POST”）。

下面是一个带有文本输入和提交按钮的简单表单示例：

<form action="submit-form.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

在本例中，<label>标记用于使用for属性和id属性将文本输入与其标签相关联。输入的name属性指定将与表单数据一起提交的表单字段的名称。

<select>标记用于创建选项的下拉列表，<option＞标记用于定义每个选项。下面是一个例子：

<label for="color">Favorite color:</label>
<select id="color" name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

在本例中，每个选项的value属性指定将与表单数据一起提交的值。

<textarea>标记用于创建多行文本输入。下面是一个例子：

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

＜button＞标记用于创建一个按钮，该按钮可用于提交表单或执行其他操作。
下面是一个例子：

<button type="submit">Submit</button>

文本框、密码框和多行文本框

HTML中，文本框、密码框和多行文本框分别使用input元素的不同type属性值来实现。

文本框：使用<input type="text">标签实现；
密码框：使用<input type="password">标签实现；
多行文本框：使用<textarea></textarea>标签实现。

文本框、密码框和多行文本框是用来接收用户输入的常见表单元素。它们分别使用不同的标签和属性来实现。

文本框

文本框（text box）是用于接受单行文本输入的表单元素。可以通过设置<input>标签的type属性为"text"来创建文本框。例如：

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

上面的示例代码中，id属性定义了文本框的唯一标识符，name属性定义了提交表单时该文本框的名称。

密码框

密码框（password field）是用于接受密码等敏感信息的表单元素，并且会将用户输入的字符隐藏起来。可以通过设置<input>标签的type属性为"password"来创建密码框。例如：

<label for="password">密码：</label>
<input type="password" id="password" name="password">

多行文本框

多行文本框（text area）可用于接收包含多个行的文本输入，例如评论或留言等。可以通过使用<textarea>标签来创建多行文本框，然后使用它的rows和cols属性来指定它的尺寸。例如：

<label for="message">留言：</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea>

上面的示例代码中，rows属性定义了多行文本框的行数，cols属性定义了多行文本框每一行的字符数。

单选框和复选框

HTML中，单选框和复选框是常见的表单元素，用于让用户选择不同选项。它们分别使用<input>标签的不同type属性值来实现。

单选框

单选框（radio button）允许用户在一组选项中选择一个。可以使用相同的name属性来将多个单选框关联起来。当用户勾选其中一个单选框时，其他单选框将自动取消选中状态。可以通过设置<input>标签的type属性为"radio"来创建单选框。例如：

<form>
  <p>请选择性别：</p>
  <label><input type="radio" name="gender" value="M">男士</label>
  <label><input type="radio" name="gender" value="F">女士</label>
  <label><input type="radio" name="gender" value="O">其他</label>
</form>

上面的示例代码中，三个单选框使用相同的name属性，以便将它们关联起来。当用户勾选其中一个单选框时，另外两个单选框将自动取消选中状态。

复选框

复选框（checkbox）允许用户选择多个选项。可以使用相同的name属性来将多个复选框关联起来。当用户勾选其中一个复选框时，其他复选框保持不变。可以通过设置<input>标签的type属性为"checkbox"来创建复选框。例如：

<form>
  <p>请选择语言：</p>
  <label><input type="checkbox" name="lang" value="js">JavaScript</label>
  <label><input type="checkbox" name="lang" value="py">Python</label>
  <label><input type="checkbox" name="lang" value="java">Java</label>
</form>

上面的示例代码中，三个复选框使用相同的name属性，以便将它们关联起来。用户可以勾选多个复选框。

单选框和复选框的值可以通过value属性进行指定，当表单提交时，浏览器会将被选中的单选框或复选框的值作为表单数据提交到服务器并进行处理。

下拉列表框和列表框

HTML中，下拉列表框和列表框是用来显示多个选项的表单元素。它们分别使用不同的标签和属性来实现。

下拉列表框

下拉列表框（dropdown list）可以让用户从多个选项中选择一个选项。可以使用<select>标签来创建下拉列表框，然后使用<option>标签定义每一个选项。例如：

<form>
  <p>请选择城市：</p>
  <select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
  </select>
</form>

上面的示例代码中，四个<option>标签定义了四个选项。其中"value"属性指定每个选项的值，"text"节点指定每个选项的文本内容。当用户点击下拉框时，会出现一个下拉菜单列出所有可用选项，用户可以从中选择一个选项。

列表框

列表框（list box）是另一种显示多个选项的表单元素，与下拉列表框不同的是，列表框可以同时显示多个选项。可以使用<select>标签来创建列表框，然后使用<option>标签定义每一个选项并设置multiple属性为"multiple"来启用多选模式。例如：

<form>
  <p>请选择兴趣爱好：</p>
  <select name="interests" multiple>
    <option value="reading">阅读</option>
    <option value="music">音乐</option>
    <option value="painting">绘画</option>
    <option value="sports">运动</option>
  </select>
</form>

上面的示例代码中，multiple属性指定该列表框启用多选模式。当用户选择一个或多个选项时，这些选项将被高亮显示。

总之，在HTML中可以使用下拉列表框和列表框来为用户提供多个选项让用户选择，并在表单提交时将选择的结果作为表单数据提交到服务器。

按钮和图像按钮

HTML中，按钮和图像按钮是用来触发事件或提交表单的表单元素。它们分别使用<button>标签和<input>标签的不同type属性值来实现。

普通按钮

普通按钮（button）通常用于触发一些事件，例如刷新页面、清空表单等。可以使用<button>标签来创建普通按钮。例如：

<button>点击我</button>

上面的示例代码中，创建了一个简单的按钮，点击按钮会触发一些事件。

提交按钮

提交按钮（submit button）用于将表单数据提交到服务器进行处理。可以使用<input>标签，并将其type属性设置为"submit"来创建提交按钮，例如：

<input type="submit" value="提交">

上面的示例代码中，设置了一个提交按钮，当用户点击该按钮时，浏览器会将表单数据提交到服务器并进行处理。

图像按钮

图像按钮（image button）与普通按钮类似，但它使用图片而不是文本作为按钮的标识。可以使用<input>标签，并将其type属性设置为"image"来创建图像按钮，例如：

<input type="image" src="submit.png" alt="提交">

上面的示例代码中，创建了一个带有图片的图像按钮。当用户单击图像按钮时，浏览器会将表单数据提交到服务器并进行处理。

html高级特性

html语义化

html语义化是指在编写html代码时，使用具有语义意义的元素来描述网页内容的结构、属性和功能等。

这种做法不仅可以使页面结构更加清晰，易于维护，
而且能够让搜索引擎更好地理解页面内容，提高页面的可访问性。

以下是一些常用的html元素和它们的语义含义：

<header>：表示网页或文章的标题、导航栏等主要内容。
<nav>：表示导航菜单栏。
<main>：表示页面主体部分的内容，通常是一个单独的区块。
<section>：表示文档中一个**的区域，通常包含一个头部和一个相关内容的块级元素。
<article>：表示即便被拆开阅读，也能单独存在或者被嵌入其他文档的内容。
<aside>：表示页面内容的附属信息或服务，通常作为侧边栏。
<footer>：表示网页尾部信息，如版权声明、联系方式等。

除此之外，还有一些表达特定意义的html元素，例如：

<h1>-<h6>：表示标题，编号从1到6，其中<h1>是最高等级的标题。
<p>：表示段落
<em>：表示强调文本，将文本以斜体的形式展示。
<strong>：表示重要性文本，将文本以加粗的形式展示。
<time>：表示日期或时间
<figure>：表示一组相关联的多媒体内容和它们的标题。
通过合理利用这些具有语义含义的html元素，我们可以更清楚地表达网页内容的结构和意义。

html语义化的优点

有利于seo：搜索引擎爬虫可以更好地理解页面结构，提高网站的排名。
提高可读性：标签的含义更清晰，能够更容易地理解网页结构。
方便开发维护：更具有可读性和

框架和iframe

HTML中，框架和iframe都是用于在一个页面中嵌入另一个页面的方式。它们具有不同的使用方法和特点，请参考以下详细介绍。

框架（frameset）

框架是一种比较古老的技术，它可以将一个网页分割为多个窗口（frame），每个窗口可以独立加载不同的HTML文件。框架通常使用<frameset>和<frame>标签来实现。例如：

<!DOCTYPE html>
<html>
<head>
  <title>框架示例</title>
</head>
<frameset rows="20%,80%">
  <frame src="header.html">
  <frame src="content.html">
</frameset>
</html>

上面的示例代码中，使用了frameset标签来定义分割窗口，并使用frame标签指定每个窗口所要显示的HTML文件。

框架的优点是能够快速刷新其中的一个局部，而不需要完整地重新加载整个页面，从而提高用户体验。但是，由于框架的缺点也显著——此技术已经过时，浏览器支持性较差，且容易造成网站的SEO问题，因此较少在现代Web开发中使用。

iframe

iframe是现代Web开发中常用的页面嵌入技术。它可以将一个页面嵌入到另一个页面中的固定位置，以实现局部更新和交互。可以使用<iframe>标签来创建iframe。例如：

<!DOCTYPE html>
<html>
<head>
  <title>iframe示例</title>
</head>
<body>
  <h1>主页</h1>
  <p>这是首页内容。</p>
  <iframe src="news.html"></iframe>
</body>
</html>

上面的示例代码中，指定了一个iframe元素并将其src属性设置为要嵌入的HTML文件链接。

与框架相比，iframe具有更强大的可定制性、灵活性和兼容性，而且也不会对SEO造成负面影响。但是，可能存在与同源策略相关的安全问题，需要开发者进行考虑和防范。

总之，在HTML中可使用框架和iframe用于在一个页面中嵌入另一个页面。但是，由于框架技术已经过时，较少使用；iframe则常见于现代Web开发中。需要根据实际需求进行选择和应用。

音频和视频

HTML中，音频和视频是用来在网页中嵌入音频或视频文件的标签。它们分别使用<audio>标签和<video>标签来实现。

音频（Audio）

音频可以用来播放音乐、语音等各种音频效果。可以使用<audio>标签来创建音频播放器，并通过src属性指定要播放的音频文件链接。例如：

<audio src="music.mp3" controls></audio>

上面的示例代码中，定义了一个音频播放器，通过src属性指定了要播放的音频文件名为"music.mp3"。controls属性可以让浏览器自动添加播放控件，包括播放/暂停、音量调节、快进/快退等。

视频（Video）

视频可以用于播放各种视频内容，例如电影、短片、教学视频等。可以使用<video>标签来创建视频播放器，并通过src属性指定要播放的视频文件链接。例如：

<video src="movie.mp4" controls></video>

上面的示例代码中，定义了一个视频播放器，通过src属性指定了要播放的视频文件名为"movie.mp4"。同样，设置了controls属性可以让浏览器自动添加播放控件。

在使用音频和视频时，可以设置多个属性，包括：autoplay（自动播放）、loop（循环播放）、preload（预加载）、muted（关闭声音），等等。要实现更复杂的功能，可以通过JavaScript来操作音频和视频标签提供的API。

总之，在HTML中可使用音频和视频标签来嵌入音频或视频文件，并在网页中进行播放、暂停等操作。具体使用方式和属性设置根据需要进行选择和调整。

canvas绘图

HTML中，可以使用Canvas来绘制各种图形。Canvas是一个HTML5标签，它提供了一个由JavaScript控制的画布，可以在其中创建和操作各种图形，例如线条、矩形、圆形、文本等。以下是详细介绍。

创建Canvas元素

在HTML页面中，可以使用<canvas>标签来创建画布。例如：

<canvas id="myCanvas"></canvas>

上面的示例代码中，定义了一个id属性为"myCanvas"的Canvas元素。然后可以使用JavaScript获取这个元素，并进行操作。

绘制基本图形

使用Canvas中的API可以绘制各种基本图形，例如线条、矩形、圆形、椭圆等。以下是一些常用的API：

绘制直线：ctx.moveTo(x,y)和ctx.lineTo(x,y)，其中moveTo()用于设定起点位置，lineTo()用于连接终点位置。
绘制矩形：ctx.fillStyle=color用于设置填充颜色，ctx.fillRect(x,y,width,height)用于绘制实心矩形。
绘制圆形：ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)，其中(x,y)表示圆心坐标，radius表示半径，startAngle和endAngle表示起始角度和结束角度（以弧度为单位），anticlockwise表示是否为逆时针方向绘制。
绘制文本：ctx.font=font用于设置字体，ctx.fillText(text,x,y)用于绘制实心文本，ctx.strokeText(text,x,y)用于绘制空心文本。

为图形添加样式

可以使用Canvas中的API来为绘制的图形添加颜色、样式等特性。以下是一些常用的API：

填充颜色：ctx.fillStyle=color，其中color为字符串类型的颜色值（例如"#ff0000"表示红色）。
描边颜色：ctx.strokeStyle=color，其中color为字符串类型的颜色值。
描边宽度：ctx.lineWidth=width，其中width为数字类型的描边宽度。
文本对齐方式：ctx.textAlign=align，其中align为字符串类型的文本对齐方式（例如"center"表示居中对齐）。

绘制复杂图形

使用Canvas的API可以进行各种复杂的绘制操作，例如模拟动画、实现游戏等。可以通过不断更新Canvas中的图形内容，实现各种有趣的图形效果。

总之，在HTML中可创建Canvas元素，并使用Canvas的API进行各种绘制操作。具体方法和API根据需要进行选择和调整。可以参考官方文档或者相关教程进行学习。

svg图像

HTML中，SVG是用来创建基于矢量图形的图像的标准。与位图（例如JPEG、PNG等格式）不同，SVG使用数学公式来描述图形，因此图像可以无限缩放而不会失真。以下是详细介绍。

创建SVG元素

在HTML页面中，可以使用<svg>标签来创建SVG元素。例如：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#ff0000" />
</svg>

上面的示例代码中，定义了一个宽度为200px、高度为200px的SVG元素，并在其中绘制了一个红色圆形。

绘制基本图形

使用SVG可以绘制各种基本图形，例如线条、矩形、圆形、文本等。以下是一些常用的SVG元素：

直线：<line x1="x1" y1="y1" x2="x2" y2="y2" stroke="color" stroke-width="width" />，其中(x1,y1)为起点坐标，(x2,y2)为终点坐标，stroke用于设置颜色，stroke-width用于设置线宽。
矩形：<rect x="x" y="y" width="width" height="height" fill="color" stroke="color" stroke-width="width" />，其中(x,y)为左上角坐标，fill用于设置填充颜色，stroke用于设置边框颜色，stroke-width用于设置边框宽度。
圆形：<circle cx="cx" cy="cy" r="r" fill="color" stroke="color" stroke-width="width" />，其中(cx,cy)为圆心坐标，r为半径，fill用于设置填充颜色，stroke用于设置边框颜色，stroke-width用于设置边框宽度。
文本：<text x="x" y="y" fill="color" font-size="size">text</text>，其中(x,y)为文本起点坐标，fill用于设置字体颜色，font-size用于设置字体大小。

可以通过设置SVG元素的属性，例如<rect>标签的属性来更改图形属性。

绘制复杂图形

SVG还支持各种复杂的绘制操作，例如添加动画、实现交互效果等。可以使用CSS和JavaScript来操作SVG元素，例如使用transition来改变图例样式，或者通过鼠标事件来实现交互效果。

总之，在HTML中可以使用SVG来创建基于矢量图形的图像，并进行各种绘制操作和样式设置。具体使用方法需要根据需求选择相关API以及工具（比如Adobe Illustrator），并进行实际应用。

web存储技术

HTML中，Web存储技术是用来在浏览器本地存储数据的一组API。Web存储技术包括localStorage、sessionStorage和IndexedDB。以下是详细介绍。

localStorage

localStorage是用来在浏览器本地永久存储数据的技术。它允许开发者将数据存储在键值对的形式下，以供随时获取。localStorage的优点是能够保存大量数据，并且在用户关闭浏览器后仍能保持存在。可以使用最简单的setItem()和getItem()方法来读取/写入数据：

//写入数据
localStorage.setItem("key","value");

//读取数据
var value = localStorage.getItem("key");

localStorage还具有removeItem()和clear()等方法来删除数据或清空存储区域。

sessionStorage

sessionStorage也是用于在本地存储数据的技术。与localStorage不同的是，它仅在当前会话期间有效，并在用户关闭浏览器后自动清除。与localStorage相同，sessionStorage使用键值对来存储数据，并且具有相似的API。例如：

//写入数据
sessionStorage.setItem("key", "value");

//读取数据
var value = sessionStorage.getItem("key");

IndexedDB

IndexedDB是一种高级的本地数据库API，允许客户端应用程序存储结构化数据。它支持事务处理和索引访问等功能，并允许开发者在浏览器中存储大量数据。 IndexedDB使用基于对象式的存储模型，具体包括以下API：

// 打开数据库，返回idb实例
var request = indexedDB.open("Database Name", version);

//数据存入
var transaction = db.transaction([store_name],'readwrite');
var objectStore = transaction.objectStore(store_name);
var request = objectStore.add(data, key);

//数据读取
var transaction = db.transaction([store_name]);
var objectStore = transaction.objectStore(store_name);
var request = objectStore.get(key);