HTML知识概述学习关于html的基础知识，了解和发现新的标签及其作用，枚举html所有的标签及其常见属性，巩固基础知识

HTML 基础概念

THML名称

HyperText Markup Language 超文本标记语言,简称HTML。

认识 html

<!DOCTYPE html> //声明html5文档
<html> //根元素
  <head>  //文档声明
    <meta charset="utf-8" /> //使用utf-8字符集    
    <title>页面标题</title> //浏览器标签名，搜索引擎搜索的主要依赖<html>
        <head>
        0.指定页面页面关键字有助于seo 优化，指定页面宽度和缩放比例<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        1.可以存放的是编码方式，如  <meta charset="utf-8">
        2.可以存放网页标题，如 <title>hello world</title>，书写这段代码有助于浏览器的seo抓取
        3.可以写CSS样式代码，如<style type="text/css"> css代码 </style>
        4.还可以链接外部的的css文件，如<link rel="stylesheet" href="css/css01.css">
        5.可以写JavaScript代码，如<script type="text/javascript"> javascript代码 </script>
        6.还可以链接外部的JavaScript文件，如<script type="text/javascript" src="js/js01.js"></script>
        </head>
        <body>
        这里是HTML页面的主体部分。可以存放文字段落、视频、音频文件、表格、表单等主要内容。
        前端程序员主要书写的html代码也就是这部分代码，内部含有多种多样的标签
        </body>
    </html>
    以上这些代码组成了一个HTML页面文件，即.html文件。

字符集

字符集	说明
UTF-8	字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312	字少，只用中文和少数外语和符号，但是尺寸小，文件小巧

seo优化

搜索引擎优化（SEO）是一项通过优化网站内容和结构，以提高在搜索引擎结果页中的排名和可见性的过程。它旨在通过针对特定关键词和搜索查询进行优化，吸引更多的有机（非付费）流量，并提高网站的可信度和权威性

HTML基础语法

语法形式

大多数标签是以双标签的形式成对出现，少数标签以单标签的形式出现，各种字符(如空格，table缩进等等)在html中需要被特殊形式字符所替换，每个标签的样式是由内部的属性来控制

分类和归纳

特殊字符集

&lt; - &amp;lt; - 小于号
&gt; - &amp;gt; - 大于号
&amp; - &amp;amp; - 和号
&quot; - &amp;quot; - 双引号
&apos; - &amp;apos; - 单引号 (在 XML 中使用)
&copy; - 版权符号
&reg; - 注册商标符号
&trade; - 商标符号
&deg; - 度符号
&times; - 乘号
&divide; - 除号
&hearts; - 心形符号
&copy; - 版权符号
&copy; - 版权符号
&copy; - 版权符号

{xmind我已经放置下文，自行下载}

块元素

块级（block）元素的特点：

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的 100%，除非设定一个宽度；
它可以容纳内联元素和其他块元素

块元素

块级（block）元素的特点：

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的 100%，除非设定一个宽度；
它可以容纳内联元素和其他块元素

可变元素

根据上下文确定块状元素和内联元素：

标签枚举

<a>:
- 作用：定义超链接。
- 内部属性：href（目标 URL）、target（打开方式）、title（鼠标悬停提示）等。
<abbr>:
- 作用：定义缩写。
- 内部属性：title（完整的含义）。
<address>:
- 作用：定义地址信息。
- 无内部属性。
<area>:
- 作用：定义图像映射区域。
- 内部属性：shape（形状）、coords（坐标）、href（目标 URL）等。
<article>:
- 作用：定义文章。
- 无内部属性。
<aside>:
- 作用：定义侧边栏内容。
- 无内部属性。
<audio>:
- 作用：定义音频。
- 内部属性：src（音频文件 URL）、controls（控件显示）等。
<b>:
- 作用：加粗文本。
- 无内部属性。
<base>:
- 作用：定义基准 URL，用于相对链接。
- 内部属性：href（基准 URL）。
<bdi>:
- 作用：定义文本方向。
- 无内部属性。
<bdo>:
- 作用：定义文本方向。
- 内部属性：dir（方向）。
<blockquote>:
- 作用：定义引用块。
- 内部属性：cite（引用来源 URL）。
<body>:
- 作用：文档主体。
- 无内部属性。
<br>:
- 作用：换行。
- 无内部属性。
<button>:
- 作用：定义按钮。
- 内部属性：type（按钮类型）、value（按钮值）等。
<canvas>:
- 作用：绘制图形。
- 内部属性：width、height（画布尺寸）。
<caption>:
- 作用：定义表格标题。
- 无内部属性。
<cite>:
- 作用：引用作品标题。
- 无内部属性。
<code>:
- 作用：定义计算机代码。
- 无内部属性。
<col>:
- 作用：定义表格列的属性。
- 内部属性：span（列数）、width（列宽）等。
<colgroup>:
- 作用：定义一组表格列的属性。
- 内部属性：span（列数）、width（列宽）等。
<data>:
- 作用：定义机器可读的数据。
- 内部属性：value（数据值）。
<datalist>:
- 作用：定义输入字段的选项列表。
- 无内部属性。
<dd>:
- 作用：定义定义列表中的描述。
- 无内部属性。
<del>:
- 作用：定义删除的文本。
- 内部属性：cite（删除原因 URL）、datetime（删除时间）。
<details>:
- 作用：定义详细信息。
- 内部属性：open（默认是否展开）。
<dfn>:
- 作用：定义术语。
- 无内部属性。
<dialog>:
- 作用：定义对话框或对话框容器。
- 无内部属性。
<div>:
- 作用：通用容器。
- 无内部属性。
<dl>:
- 作用：定义定义列表。
- 无内部属性。
<dt>:
- 作用：定义定义列表中的术语。
- 无内部属性。
<em>:
- 作用：强调文本。
- 无内部属性。
<embed>:
- 作用：嵌入外部资源。
- 内部属性：src（资源 URL）、type（资源类型）、width、height 等。
<fieldset>:
- 作用：定义表单字段集。
- 无内部属性。
<figcaption>:
- 作用：定义图表或表格标题。
- 无内部属性。
<figure>:
- 作用：定义图表
- 或表格容器。无内部属性。
<footer>:
- 作用：定义页脚。
- 无内部属性。
<form>:
- 作用：定义表单。
- 内部属性：action（表单提交 URL）、method（提交方法）、enctype（编码类型）等。
<h1>:
- 作用：定义标题 1。
- 无内部属性。
<h2>:
- 作用：定义标题 2。
- 无内部属性。
<h3>:
- 作用：定义标题 3。
- 无内部属性。
<h4>:
- 作用：定义标题 4。
- 无内部属性。
<h5>:
- 作用：定义标题 5。
- 无内部属性。
<h6>:
- 作用：定义标题 6。
- 无内部属性。
<header>:
- 作用：定义页眉。
- 无内部属性。
<hr>:
- 作用：水平线。
- 无内部属性。
<i>:
- 作用：斜体文本。
- 无内部属性。
<iframe>:
- 作用：内联框架。
- 内部属性：src（框架内容 URL）、width、height 等。
<img>:
- 作用：插入图像。
- 内部属性：src（图像 URL）、alt（替代文本）、width、height 等。
<input>:
- 作用：定义输入字段。
- 内部属性：type（字段类型，如文本、复选框、单选按钮等）、name（字段名称）、value（字段值）等。
<ins>:
- 作用：定义插入的文本。
- 内部属性：cite（插入原因 URL）、datetime（插入时间）。
<kbd>:
- 作用：定义键盘文本。
- 无内部属性。
<label>:
- 作用：定义表单标签。
- 内部属性：for（关联字段 ID）。
<legend>:
- 作用：定义表单字段集的标题。
- 无内部属性。
<li>:
- 作用：定义列表项。
- 无内部属性。
<main>:
- 作用：定义主要内容。
- 无内部属性。
<map>:
- 作用：定义图像映射。
- 内部属性：name（映射名称）。
<mark>:
- 作用：标记文本。
- 无内部属性。
<menu>:
- 作用：定义上下文菜单。
- 无内部属性。
<menuitem>:
- 作用：定义菜单项。
- 内部属性：type（类型）。
<meta>:
- 作用：提供文档元信息。
- 内部属性：charset（字符编码）、name（名称）、content（内容）等。
<meter>:
- 作用：定义度量衡。
- 内部属性：value（值）、min（最小值）、max（最大值）等。
<nav>:
- 作用：定义导航链接。
- 无内部属性。
<noscript>:
- 作用：在脚本不可用时提供替代内容。
- 无内部属性。
<object>:
- 作用：嵌入多媒体资源。
- 内部属性：data（多媒体资源 URL）、type（资源类型）等。
<ol>:
- 作用：定义有序列表。
- 内部属性：type（列表类型，如数字、字母等）、start（开始值）等。
<optgroup>:
- 作用：定义选择框选项组。
- 无内部属性。
<option>:
- 作用：定义选择框选项。
- 内部属性：value（选项值）、selected（默认选中）等。
<output>:
- 作用：定义计算结果输出。
- 无内部属性。
<p>:
- 作用：定义段落。
- 无内部属性。
<param>:
- 作用：为插入的对象定义参数。
- 内部属性：name、value 等。
<pre>:
- 作用：定义预格式化文本。
- 无内部属性。
<progress>:
- 作用：定义进度条。
- 内部属性：value、max 等。
<q>:
- 作用：定义短引用。
- 内部属性：cite（引用来源 URL）。
<rp>:
- 作用：定义 ruby 注释的起始括弧。
- 无内部属性。
<rt>:
- 作用：定义 ruby 注释的文本。
- 无内部属性。
<ruby>:
- 作用：定义 ruby 注释。
- 无内部属性。
<s>:
- 作用：不建议使用，通常表示删除的文本。
- 无内部属性。
<samp>:
- 作用：定义计算机程序输出。
- 无内部属性。
<script>:
- 作用：包含 JavaScript 代码。
- 内部属性：src（脚本文件 URL）、type（脚本类型）、async、defer 等。
<section>:
- 作用：定义章节。
- 无内部属性。
<select>:
- 作用：定义选择框。
- 内部属性：name、size、multiple 等。
<small>:
- 作用：定义小号文本。
- 无内部属性。
<source>:
- 作用：定义多媒体资源的源。
- 内部属性：src、type 等。
<span>:
- 作用：通用行内容器。
- 无内部属性。
<strong>:
- 作用：强调重要性。
- 无内部属性。
<style>:
- 作用：定义内部样式表。
- 无内部属性。
<sub>:
- 作用：定义下标文本。
- 无内部属性。
<summary>:
- 作用：定义详细内容的摘要。
- 无内部属性。
<sup>:
- 作用：定义上标文本。
- 无内部属性。
<table>:
- 作用：定义表格。
- 内部属性：border、cellpadding、cellspacing 等。
<tbody>:
- 作用：定义表格主体。
- 无内部属性。
<td>:
- 作用：定义表格数据单元格。
- 内部属性：colspan、rowspan 等。
<textarea>:
- 作用：定义文本区域。
- 内部属性：name、rows、cols 等。
<tfoot>:
- 作用：定义表格页脚。
- 无内部属性。
<th>:
- 作用：定义表格头单元格。
- 内部属性：colspan、rowspan 等。
<thead>:
- 作用：定义表格头部。
- 无内部属性。
<time>:
- 作用：表示日期和时间。
- 内部属性：datetime（日期时间值）。
<title>:
- 作用：定义文档标题，显示在浏览器标签页上。
- 无内部属性。
<tr>:
- 作用：定义表格行。
- 无内部属性。
<track>:
- 作用：为 <video> 或 <audio> 元素定义文本轨道。
- 内部属性：kind、src、srclang 等。
<u>:
- 作用：不建议使用，通常表示下划线文本。
- 无内部属性
<ul>:
- 作用：定义无序列表。
- 无内部属性。
<var>:
- 作用：定义变量。
- 无内部属性。
<video>:
- 作用：定义视频
- 内部属性：src（视频文件 URL）、controls（控件显示）、width、height 等。
<wbr>:
- 作用：定义换行机会。
- 无内部属性。

参考文章 HTML 基础知识点总结 - 掘金 (juejin.cn)