html的基础知识和常见的语法简单归纳

HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。它是一种用于创建网页的标记语言，用于描述网页的结构和内容。HTML通过一系列的标签（tag）来定义文档的各个部分，例如标题、段落、链接、图像等。浏览器读取HTML文档，并按照标记的指示将其呈现成可视化的网页。HTML通常与CSS（层叠样式表）和JavaScript一起使用，用于实现网页的样式和交互功能。

HTML包括以下几个重要部分：

文档声明（Document Declaration）：
用于指定文档类型和版本。通常以 <!DOCTYPE> 开始，例如：

<!DOCTYPE html>

HTML 标签（HTML Tag）：
HTML文档的根元素，包含了整个文档的内容。通常以 html开始，以 /html结束。例如：

<html><!-- 文档内容 -->
</html>

头部（Head）：
包含了文档的元信息和引用，如标题、样式表和脚本等。通常以 head 开始，以 /head 结束。例如：

<head><title>网页标题</title><link rel="stylesheet" href="styles.css">
</head>

主体（Body）：
包含了文档的主要内容，如文本、图像、链接等。通常以 body 开始，以 /body 结束。例如：

<body><h1>主标题</h1><p>这是一个段落。</p><img src="image.jpg" alt="图片">
</body>

标签（Tags）：
HTML使用一系列标签来定义文档的结构和内容。标签通常是成对出现的，包括开始标签和结束标签，如 tag和 tag。有些标签是自闭合的，如 img和 br。例如：

<p>这是一个段落。</p>
<img src="image.jpg" alt="图片">

注释
（Comments）：用于向代码中添加注释，提高代码可读性。注释以< !-- 开始，以 --> 结束。例如：

<!-- 这是一个注释 -->

超链接（Hyperlinks）
用于在文档之间创建链接，让用户能够跳转到其他页面或资源。使用 a 标签来创建超链接，href 属性指定链接的目标地址。例如：

<a href="https://www.example.com">点击这里访问示例网站</a>

点击这里访问菜鸟教程
比如上面的链接，就是菜鸟教程的html的链接

列表（Lists）
用于展示项目的有序或无序列表。使用 ul 创建无序列表，使用 ol 创建有序列表，使用 li 创建列表项。例如：

<ul><li>项目1</li><li>项目2</li><li>项目3</li>
</ul><ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>

表格（Tables）：
用于以表格形式展示数据。使用 table创建表格，tr 创建表格行，td 创建单元格。例如：

<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>

表单（Forms）：
用于收集用户输入的数据。使用创建表单，各种输入元素如文本框、单选框、复选框等由不同的标签表示，如、、等。例如：

<form action="/submit" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username"><input type="submit" value="提交">
</form>

多媒体（Multimedia）：
用于在网页中嵌入多媒体内容，如图像、音频和视频。使用 img>标签嵌入图像，audio 和 video 标签嵌入音频和视频。例如：

<img src="image.jpg" alt="图片">
<audio controls><source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls><source src="video.mp4" type="video/mp4">
</video>

元数据（Metadata）：
包含了关于文档的信息，如字符集、作者、描述等。通常在 head标签中使用 meta标签来定义。例如：

<meta charset="UTF-8">
<meta name="description" content="网页描述">
<meta name="author" content="作者名">

标题（Headings）：
用于定义文档的标题或各个部分的标题。HTML提供了 h1 到 h6六个级别的标题标签。例如：

<h1>主标题</h1>
<h2>副标题</h2>

样式（Styles）：
用于设置文档的外观和布局。可以通过内联样式、嵌入式样式和外部样式表来实现。例如：

<!-- 内联样式 -->
<p style="color: red; font-size: 16px;">这是一个段落。</p><!-- 嵌入式样式 -->
<style>p {color: blue;font-size: 14px;}
</style><!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

HTML实体（HTML Entities）：
用于在HTML文档中表示特殊字符，如小于号（<）、大于号（>）等。例如：

&lt; 表示小于号（<）
&gt; 表示大于号（>）

嵌入式内容（Embedded Content）：
除了多媒体内容外，HTML还支持通过 iframe 标签嵌入其他网页或内容。例如：

<!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><h1>嵌入式内容示例页面</h1><p>这是一个被嵌入的页面。</p>
</body>
</html>

默认上面的为1.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><h1>主页面</h1><p>下面是被嵌入的页面：</p><iframe src="1.html" width="500" height="300" title="嵌入式内容示例"></iframe><p>这是主页面的其他内容。</p>
</body>
</html>

元素属性（Element Attributes）：
HTML元素可以包含一些属性，用于提供额外的信息或控制元素的行为。常见的属性包括 id、class、src、href 等。例如：

<img src="image.jpg" alt="图片">
<a href="https://www.example.com" target="_blank">点击这里访问示例网站</a>

语义化标签（Semantic Tags）：HTML5引入了一些语义化标签，用于更清晰地描述文档的结构和内容，例如 header、footer、nav、article、section等。这些标签有助于提高网页的可访问性和搜索引擎优化（SEO）。例如：

<header><h1>网页标题</h1>
</header>
<nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul>
</nav>
<article><h2>文章标题</h2><p>文章内容...</p>
</article>
<footer><p>版权信息</p>
</footer>

全局属性（Global Attributes）：
HTML5引入了一些全局属性，可用于几乎所有的HTML元素，如 class、id、style 等。这些属性可以应用于大多数元素，提供了一种通用的属性设置方式。例如：

<div class="container" id="main" style="background-color: #f0f0f0;">内容区域</div>

`表单控件（Form Controls）：
除了表单元素外，HTML还提供了一系列表单控件，如按钮、复选框、单选按钮等，用于用户输入和交互。例如：

<input type="text" placeholder="请输入文本">
<button type="submit">提交</button>
<input type="checkbox" name="agree" id="agree">
<label for="agree">同意条款</label>