HTML学习总结

saidailuo

已于 2023-07-01 14:41:56 修改

阅读量170

点赞数

文章标签： html 学习前端

于 2023-06-30 21:39:35 首次发布

本文链接：https://blog.csdn.net/saidailuo/article/details/130994193

版权

本文介绍了HTML的基础结构，如HTML元素、属性、DOCTYPE声明和元数据，强调了文本格式化、链接、图像、列表、表格和表单等基础知识。此外，还讨论了HTML的难点，如嵌套结构、CSS样式、表单处理和语义化。最后提到了一些不常见的知识点，如自定义数据属性、内联框架和隐藏显示元素等。

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

一、HTML简介

HTML（超文本标记语言）是一种用于创建网页结构和内容的标记语言。它是构建互联网上的超文本文档的基础。通过使用HTML，开发者可以定义网页的结构、排版、链接和多媒体等内容。
HTML使用一系列的标签（或元素）来标记和组织网页中的不同部分。每个HTML标签由尖括号<>包围，通常以开始标签和结束标签的形式表示，中间包含标签的内容。例如，<h1>标签用于定义一个一级标题，</h1>标签用于结束该标题的定义。
HTML的主要作用是描述和组织网页的结构。它提供了一种标准化的方式来定义标题、段落、列表、图像、链接和表格等内容。通过适当的使用标签和属性，可以使网页具有良好的语义结构，提高可访问性和搜索引擎优化（SEO）。
除了标记内容，HTML还支持通过超链接（<a>标签）将不同的网页相互连接起来。超链接可以指向其他网页、页面内的位置、文件、电子邮件地址等。
HTML还可以与其他技术和语言结合使用，如CSS用于样式化网页的外观，JavaScript用于实现交互和动态效果。
总之，HTML是构建网页结构和内容的基础性语言，通过使用标签和属性，开发者可以定义网页的结构、内容和互动方式。HTML文档可以在浏览器中解析和渲染，呈现给用户浏览和交互。

二、 HTML基础结构

一个基本的 HTML 文档包含声明，然后是标签作为根元素，内部有和标签。标签用于指定文档的元信息，如标题、样式表和脚本；标签包含实际的网页内容。
一个简单的例子：

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>页面标题</title>
   </head>
   <body>
       <h1>我的第一个Web页</h1>
       <p>这是我的第一个段落</p>
   </body>
   </html>

分析：

<!DOCTYPE html> 声明文档类型；
<html></html>元素是 HTML 页面的根元素包含整个页面；
<head></head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

三、 HTML基础知识重点

标签和元素：

标签是HTML的基本构建块，用于定义元素的开头和结尾。标签由尖括号包围，如<tag>。
元素由标签、内容和属性组成，如<tag>Content</tag>。元素的内容是放置在标签之间的文本或其他标签。

标签的属性：

属性为标签提供附加信息。常见的属性包括id、class、style、src、href等。
属性位于标签的开始标签中，通过键值对的形式定义，如<tag attribute="value">。

DOCTYPE声明：

DOCTYPE声明指定HTML文档的类型和版本。它位于HTML文档的开头，告诉浏览器如何解析文档。

元数据（Metadata）:

<head>标签用于包含文档的元数据，如标题、字符编码、样式表等。
<title>标签用于定义文档的标题，显示在浏览器的标题栏或书签处。

文本格式化：

<strong>标签用于表示重要的文本，会加粗显示。
<em>标签用于强调文本，会以斜体显示。
<mark>标签用于突出显示文本。
<del>标签用于表示删除的文本，会加上删除线。
<ins>标签用于表示插入的文本，会带下划线。

链接和导航：

<a>标签用于创建超链接，可以指向其他页面、文档、位置或资源。
<nav>标签用于定义导航链接，通常包含导航菜单或导航栏。

图像：

<img>标签用于插入图像到HTML页面。
alt属性用于为图像提供替代文本，当图像无法加载时显示。
width和height属性可用于指定图像的宽度和高度。

列表：

<ul>标签用于创建无序列表。
<ol>标签用于创建有序列表。
<li>标签用于定义列表项。

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

表格：

<table>标签用于创建表格。
<tr>标签用于定义表格行。
<th>标签用于定义表头单元格。
<td>标签用于定义普通单元格。
<thead>、<tbody>和<tfoot>标签可用于组织表格的头部、主体和页脚。

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

表单：

<form>标签用于创建表单。
<input>标签用于创建各种输入字段，如文本框、密码框、复选框等。
<textarea>标签用于创建多行文本输入框。
<select>和<option>标签用于创建下拉列表框。
<button>标签用于创建按钮。
表单元素可以具有各种属性，例如name、type、value等。用户填写表单后，可以使用浏览器的默认提交行为或JavaScript来处理表单数据。

嵌入内容：

<iframe>标签用于嵌入其他网页或文档。
<embed>和<object>标签也可用于嵌入多媒体内容。

<video> 标签：用于嵌入视频内容。

src 属性：指定视频文件的URL。
controls 属性：显示视频播放器的控制面板（播放/暂停、音量控制等）。
autoplay 属性：指定视频在加载完成后自动播放。
loop 属性：指定视频循环播放。
poster 属性：指定视频封面图片的URL，当视频未加载或播放时显示。

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

<audio> 标签：用于嵌入音频内容。

src 属性：指定音频文件的URL。
controls 属性：显示音频播放器的控制面板（播放/暂停、音量控制等）。
autoplay 属性：指定音频在加载完成后自动播放。
loop 属性：指定音频循环播放。

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

需要注意的是，不同浏览器支持的视频和音频格式可能有所不同。为了确保在不同的浏览器中都能正常播放，可以提供多个格式的视频或音频文件，并使用<source> 标签来指定不同的文件格式。

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

分区和布局：

使用块级元素：HTML提供了一些块级元素（例如 <div>、<section>、<article>等），它们可以用来创建独立的布局块。通过给这些元素添加样式或使用CSS框架，可以控制它们的尺寸、位置和样式，从而实现整体布局。

使用表格：虽然在现代网页设计中不再推荐过度使用表格进行布局，但表格仍然可以用于特定的布局需求。通过<table>标签和相关的<tr>（行）和<td>（单元格）标签，可以创建具有复杂布局的网页结构。

注释：

用于在HTML代码中添加注释，注释内容不会在网页中显示。

HTML 实体:

在HTML中，有一些特殊字符和符号具有特殊的含义，例如小于号（<）、大于号（>）、引号（"）、和符号（&）等。为了在HTML中正确显示这些字符，我们可以使用HTML实体（HTML entities）进行转义。

HTML实体是以&开头，以分号;结尾的特殊编码。以下是一些常用的HTML实体及其对应的字符：

<：小于号（<）
>：大于号（>）
&quot;：双引号（"）
'：单引号（'）
&：和符号（&）
&nbsp;：空格
&copy;：版权符号（©）
®：注册商标符号（®）
€：欧元符号（€）

通过使用HTML实体，我们可以确保特殊字符和符号在HTML中正确显示，而不会被解释为标记或其他含义。例如，如果我们要在HTML中显示一个小于号，可以使用<实体替代<字符，这样浏览器就会正确地显示小于号。

除了常用的HTML实体，还有许多其他实体用于表示各种特殊字符，并且可以在需要时进行查找和应用。使用HTML实体可以保证在HTML文档中正确呈现特殊字符，以提高可读性和兼容性。

四、 HTML难点

当学习和使用HTML时，可能会遇到以下一些较难的方面：

嵌套和层次结构

HTML的标签可以嵌套在其他标签中，形成层次结构。嵌套的标签必须按照正确的顺序关闭，否则可能导致错误的渲染结果或者无效的
HTML代码。例如，正确的嵌套是 <div><p>Some text</p></div>，而错误的嵌套是 <div><p>Some text</div></p>。合理管理标签的嵌套关系和结构对于确保页面的正确渲染非常重要。

CSS样式和布局

HTML用于定义页面的结构和内容，而CSS用于样式和布局。CSS包含着大量的样式属性和值，掌握这些属性和值的用法可能会有一定的挑战。此外，CSS布局涉及到盒模型、定位和浮动等概念。了解这些概念以及如何使用CSS选择器来选择元素并应用样式是至关重要的。

表单处理：

HTML表单允许用户输入数据并将其提交到服务器进行处理。处理表单输入、验证数据以及处理提交的数据可能会比较复杂。了解各种表单元素（如文本框、复选框、下拉列表等）的类型以及它们的属性和值，以及如何使用JavaScript进行表单验证和处理，都是需要掌握的关键概念。

语义化：

语义化是指使用具有明确含义的HTML标签来描述页面结构和内容。使用适当的语义标签可以提高页面的可访问性、可维护性和搜索引擎优化。例如，使用 <header> 标签表示页面的页眉，使用 <nav> 标签表示导航菜单，使用 <article> 标签表示独立的文章内容等。理解这些语义标签的含义以及如何正确使用它们对于编写高质量的HTML非常重要。

响应式设计：

响应式设计是指通过使用CSS和媒体查询来创建适应不同屏幕尺寸和设备的页面布局。了解响应式设计的技术和原则以及如何使用弹性布局和媒体查询来适应不同屏幕大小和设备类型是一个挑战。同时，需要考虑加载速度、图像优化和设备兼容性等因素。

跨浏览器兼容性：

不同的浏览器对HTML的解析和渲染可能会略有差异，这可能导致页面显示不一致或出现错误。了解常见的浏览器兼容性问题，并掌握解决方案，例如使用CSS的浏览器前缀、特定的JavaScript库或者进行功能检测和优雅降级等技术，可以帮助确保页面在不同浏览器上的一致性和稳定性。

语义网（Semantic Web）和元数据：

HTML的新标准（如HTML5）引入了语义元素和元数据，用于更好地描述和解释页面内容。了解如何使用语义元素（例如 <main>、<section>、<aside> 等）和元数据标签（例如 <meta>）来提供更多关于页面的信息，可以提升网站的质量、可发现性和可维护性。

五、 HTML一些不常见的知识点

自定义数据属性：
HTML 允许您在元素上添加自定义数据属性，以存储与元素相关的自定义数据。这些属性以 data- 前缀开始，并可以使用
JavaScript 来访问和操作。

<div data-user-id="123" data-user-name="John"></div>

嵌入内容：
除了文本和图像，HTML 也支持嵌入其他类型的内容，例如音频、视频和嵌入式内容（如嵌入的地图或社交媒体帖子）。这些内容可以使用 <audio>、<video> 和 <iframe> 等标签来实现。
语义化标签：
HTML5 引入了许多语义化标签，这些标签用于描述内容的含义，而不只是其外观。例如，<article>
标签用于定义独立的文章内容，<section> 标签用于划分页面的不同部分，<nav> 标签用于定义导航链接等。
内联框架：
使用 <iframe> 标签可以在网页中嵌入其他网页或文档。这在需要显示嵌入的内容或展示来自其他网站的内容时很有用。
元素的隐藏和显示：
HTML 提供了一些属性和伪类，可以控制元素的显示和隐藏。例如，hidden 属性可以将元素隐藏，:hover
伪类可以在鼠标悬停时显示元素。
自动焦点：
可以使用 autofocus 属性使页面加载时自动为特定元素设置焦点。这对于表单中的第一个输入字段或搜索框等元素很有用。

<input type="text" autofocus>

自关闭标签的斜杠：
根据 HTML5 规范，自关闭标签（如
<br>、<img>）可以在结束标签中使用斜杠，也可以省略斜杠。这两种写法都是有效的。

<br>
<img src="image.jpg">

这些是一些不太常见的 HTML 知识点，它们可能在特定情况下或某些特殊需求中使用。尽管它们不是常见的用法，了解它们可以帮助您更好地理解和处理 HTML 内容

六、学习总结

学习HTML是一个非常有意义和有趣的过程。HTML是超文本标记语言（Hypertext Markup Language）的缩写，是用于创建网页结构和内容的标准标记语言。通过学习HTML，我获得了许多对网页设计和开发非常有用的技能和知识。
首先，学习HTML使我能够理解和创建基本的网页结构。我学会了使用标签（例如 <html>,<head>,<body>），属性（例如 class，id，href），以及各种元素标签（例如 <h1>，<p>，<img>）来组织和展示网页内容。我可以使用这些标签和元素创建标题、段落、图像、链接等，从而构建一个完整的网页。
其次，学习HTML使我能够了解网页的语义结构。HTML提供了许多语义化的标签，例如 <header>, <nav>, <section>, <footer>等，这些标签能够更准确地描述网页内容的结构和意义。使用这些语义化标签可以提高网页的可读性、可访问性和SEO（搜索引擎优化）效果。
另外，学习HTML也让我了解到网页的交互性和多媒体数据的展示。我学会了嵌入多媒体元素（例如图像、音频、视频），创建表单（例如文本输入框、复选框、下拉列表），以及使用链接和锚点来实现页面间的导航和跳转。这些技术让我能够创建更丰富和动态的网页内容。
总的来说，学习HTML是成为一个全面的网页设计和开发者的必要基础。通过掌握HTML，我能够创建具有良好结构、语义化和交互性的网页，提供更好的用户体验。我将继续深入学习HTML，并结合CSS和JavaScript等技术，进一步提升我的网页设计和开发能力。