-
【HTML专栏1】语法规范、基础结构标签
本文属于HTML/CSS专栏文章，适合WEB前端开发入门学习，详细介绍HTML/CSS如果使用，如果对你有所帮助请一键三连支持，对博主系列文章感兴趣点击下方专栏了解详细。
- 博客主页：Duck Bro 博客主页
- 系列专栏：HTML/CSS专栏
- 关注博主，后期持续更新系列文章
- 如果有错误感谢大家批评指出，一定及时修改
- 感谢大家点赞👍收藏⭐评论✍
【HTML专栏1】语法规范、基础结构标签
本文关键字：语法规范、基本结构标签
一、HTML语法规范
1. 基本语法概述
HTML是一种标记语言，用于定义网页结构和内容。以下是HTML的基本语法：
-
HTML文档以
声明开头，告诉浏览器使用哪个HTML版本。 -
HTML文档由
标签包围，所有的元素都在这个标签之间。 -
一个HTML元素通常由一个起始标签
、内容和一个结束标签组成。起始标签和结束标签通常成对出现，内容则位于它们之间。 -
HTML元素可以有属性，这些属性提供了元素更多的信息，包括样式、链接和其他特性。
-
HTML元素可以嵌套，即一个元素可以包含另一个元素。
-
HTML标记对大小写不敏感，但建议使用小写标记。
-
有些特殊的标签必须是单个标签（极少情况），例如
示例：
DOCTYPE html> <html> <head> <title>My Titletitle> head> <body> <h1>My Headingh1> <p>My paragraph.p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在这个例子中，声明了HTML版本，
开始了文档，包含页面的标题信息和其他元数据，则包含页面的主要内容。和是两个基本的HTML元素，分别用于定义标题和段落。2. 标签结构关系
双标签关系可以分为两类：包含关系和并列关系
包含关系:
</code>被包含在<code><head></code>标签中，称为包含关系</p> <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/04/08/35391a71794ddc97.webp" alt="在这里插入图片描述" ></p> <p><strong>并列关系:</strong><br> <code><head></code>和<code><body></code>并列，称为并列关系</p> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/04/08/6f215867894938bc.jpeg" alt="在这里插入图片描述" ></p> <hr> <h3><a name="t5"></a><a id="_87"></a>二、基础结构标签</h3> <h4><a name="t6"></a><a id="1_HTML_88"></a>1. 第一个HTML网页</h4> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>第一个HTML网页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <h4><a name="t7"></a><a id="2__104"></a>2. 结构标签（骨架标签）</h4> <div class="table-box"><table><thead><tr><th>标签名</th><th align="left">定义</th><th align="left">说明</th></tr></thead><tbody><tr><td><code><html></code> <code></html></code></td><td align="left">HTML标签</td><td align="left">页面中最大的标签，我们 称为 根标签</td></tr><tr><td><code><head></code> <code></head></code></td><td align="left">文档的头部</td><td align="left">注意在head标签中我们必须要设置的标签是title</td></tr><tr><td><code><title></code> <code> 文档的标题 让页面拥有一个属于自己的网页标题 文档的主体 元素包含文档的所有内容，页面内容 基本都是放到body里面的 HTML 文档的的后缀名必须是
.html或.htm，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。3. 基本结构组成（总结）
Python基础之综合练习一
activiti7 报错Couldn‘t resolve collection expression nor variable reference
drawio特性
python+pytest接口自动化(1)-接口测试基础
Kotlin笔记(三):扩展函数,运算符重载
2024年，计算机相关专业还值得选择吗？
LoadImage cannot find a suitable reader for file运用MONAI框架导入数据时存在的问题
【C++】多态/虚函数/虚表指针，虚表
linux 安装Docker