HTML 简介
HTML 简介1
HTML 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开发喵星球</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
- </strong> 元素描述了文档的标题</li>
<li><strong></strong> 元素包含了可见的页面内容</li>
<li><strong><br />
<h1></strong> 元素定义一个大标题</li>
<li><strong></strong> 元素定义一个段落</li>
</ul>
<p><strong>注：</strong>在浏览器的页面上使用键盘上的 <strong>F12</strong> 按键开启调试模式，就可以看到组成标签。</p>
<p><img decoding="async" src="https://s2.loli.net/2024/03/13/yZzPX9GF2E5Y7cq.png" alt="img" /></p>
<hr />
<h2><a id="%E4%BB%80%E4%B9%88%E6%98%AFhtml" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>什么是 HTML?</h2>
<p>HTML 是用来描述网页的一种语言。</p>
<ul>
<li>HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li>
<li>HTML 不是一种编程语言，而是一种<strong>标记</strong>语言</li>
<li>标记语言是一套<strong>标记标签</strong> (markup tag)</li>
<li>HTML 使用标记标签来<strong>描述</strong>网页</li>
<li>HTML 文档包含了HTML <strong>标签</strong>及<strong>文本</strong>内容</li>
<li>HTML文档也叫做 <strong>web 页面</strong></li>
</ul>
<hr />
<h2><a id="html%E6%A0%87%E7%AD%BE" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML 标签</h2>
<p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<ul>
<li>HTML 标签是由<em>尖括号</em>包围的关键词，比如 </li>
<li>HTML 标签通常是<em>成对出现</em>的，比如 <b> 和 </b></li>
<li>标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标签</em></li>
<li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em></li>
</ul>
<p><标签>内容</标签></p>
<hr />
<h2><a id="html%E5%85%83%E7%B4%A0" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML 元素</h2>
<p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p>
<p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:</p>
<p>HTML 元素:</p>
<pre><code class="language-html"><p>这是一个段落。</p>
</code></pre>
<hr />
<h2><a id="web%E6%B5%8F%E8%A7%88%E5%99%A8" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Web 浏览器</h2>
<p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p>
<p>浏览器并不是直接显示的HTML标签，但以使用标签来决定如何展现HTML页面的内容给用户：</p>
<p><img decoding="async" src="https://s2.loli.net/2024/03/13/1yoNiCgPAqIZVTr.png" alt="img" /></p>
<hr />
<h2><a id="html%E7%BD%91%E9%A1%B5%E7%BB%93%E6%9E%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML 网页结构</h2>
<p>下面是一个可视化的HTML页面结构：</p>
<p><img decoding="async" src="https://s2.loli.net/2024/03/13/kQu9vtEeAp5yglW.png" alt="image-20240313145041537" /></p>
<p><img decoding="async" src="https://s2.loli.net/2024/03/13/rakEOmlfqiGFCt3.png" alt="image-20240313145109474" /></p>
<h2><a id="html%E7%89%88%E6%9C%AC" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML版本</h2>
<p>从初期的网络诞生后，已经出现了许多HTML版本:</p>
<table>
<thead>
<tr>
<th style="text-align: left">版本</th>
<th style="text-align: left">发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">HTML</td>
<td style="text-align: left">1991</td>
</tr>
<tr>
<td style="text-align: left">HTML+</td>
<td style="text-align: left">1993</td>
</tr>
<tr>
<td style="text-align: left">HTML 2.0</td>
<td style="text-align: left">1995</td>
</tr>
<tr>
<td style="text-align: left">HTML 3.2</td>
<td style="text-align: left">1997</td>
</tr>
<tr>
<td style="text-align: left">HTML 4.01</td>
<td style="text-align: left">1999</td>
</tr>
<tr>
<td style="text-align: left">XHTML 1.0</td>
<td style="text-align: left">2000</td>
</tr>
<tr>
<td style="text-align: left">HTML5</td>
<td style="text-align: left">2012</td>
</tr>
<tr>
<td style="text-align: left">XHTML5</td>
<td style="text-align: left">2013</td>
</tr>
</tbody>
</table>
<hr />
<h2><a id="doctype%E5%A3%B0%E6%98%8E" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a><!DOCTYPE> 声明</h2>
<p>声明有助于浏览器中正确显示网页。<br />
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。</p>
<p>doctype 声明是不区分大小写的，以下方式均可：</p>
<pre><code class="language-html"><!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
</code></pre>
<hr />
<h2><a id="%E9%80%9A%E7%94%A8%E5%A3%B0%E6%98%8E" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>通用声明</h2>
<h3><a id="html5" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML5</h3>
<pre><code class="language-html"><!DOCTYPE html>
</code></pre>
<h3><a id="html-4-01" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML 4.01</h3>
<pre><code class="language-html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
</code></pre>
<h3><a id="xhtml-1-0" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>XHTML 1.0</h3>
<pre><code class="language-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</code></pre>
<p>查看完整网页声明类型请自行上网搜索</p>
<hr />
<h2><a id="%E4%B8%AD%E6%96%87%E7%BC%96%E7%A0%81" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>中文编码</h2>
<p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。</p>
<h2><a id="html%E5%AE%9E%E4%BE%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>HTML 实例</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
</code></pre>
<div style="display:none;" id="content">
</div>
</div>
</div>
<span class="post-category">分类：<a href="https://kaifamiao.dev/?cat=14" rel="category">前端工程师</a></span>
<span class="post-author">作者：<a href=/?author=5>荡荡, 浩浩</a></span>
<span class="post-date">发表于：2024-03-13 14:57:07</span>
<span class="post-views">阅读量：94</span>
<style>
.align-left-right {
display: flex;
justify-content: space-between;
}
</style>
<div class="align-left-right">
<span><< <a href="https://kaifamiao.dev/?p=7795" rel="next">HTML 编辑器</a></span>
<span> <a href="https://kaifamiao.dev/?p=7101" rel="prev">HTML动态表格</a> >></span>
</div>
<hr>
<hr/>
<nav>
<h3>类别及文章数量：</h3>
<ul>
<li><a href="https://kaifamiao.dev/?cat=241">1</a> (1)</li><li><a href="https://kaifamiao.dev/?cat=220">Business</a> (3)</li><li><a href="https://kaifamiao.dev/?cat=178">C/C++</a> (11)</li><li><a href="https://kaifamiao.dev/?cat=25">Go语言</a> (6)</li><li><a href="https://kaifamiao.dev/?cat=10">Java/OOP</a> (427)</li><li><a href="https://kaifamiao.dev/?cat=26">Linux</a> (4)</li><li><a href="https://kaifamiao.dev/?cat=221">News</a> (3)</li><li><a href="https://kaifamiao.dev/?cat=29">Node.js</a> (10)</li><li><a href="https://kaifamiao.dev/?cat=30">Python</a> (8)</li><li><a href="https://kaifamiao.dev/?cat=239">Wordpress</a> (3)</li><li><a href="https://kaifamiao.dev/?cat=20">云创动力</a> (36)</li><li><a href="https://kaifamiao.dev/?cat=14">前端工程师</a> (66)</li><li><a href="https://kaifamiao.dev/?cat=171">喵星人</a> (3)</li><li><a href="https://kaifamiao.dev/?cat=16">喵星人成长</a> (32)</li><li><a href="https://kaifamiao.dev/?cat=15">学习资料</a> (19)</li><li><a href="https://kaifamiao.dev/?cat=185">学员日志</a> (5)</li><li><a href="https://kaifamiao.dev/?cat=182">学长分享</a> (380)</li><li><a href="https://kaifamiao.dev/?cat=18">小程序</a> (1)</li><li><a href="https://kaifamiao.dev/?cat=21">技术栈</a> (27)</li><li><a href="https://kaifamiao.dev/?cat=170">数据技术</a> (2)</li><li><a href="https://kaifamiao.dev/?cat=11">数据结构和算法</a> (15)</li><li><a href="https://kaifamiao.dev/?cat=1">未分类</a> (57)</li><li><a href="https://kaifamiao.dev/?cat=13">江湖传言</a> (15)</li><li><a href="https://kaifamiao.dev/?cat=172">玩技术</a> (175)</li><li><a href="https://kaifamiao.dev/?cat=23">管理文档</a> (4)</li><li><a href="https://kaifamiao.dev/?cat=169">语言开发</a> (1)</li><li><a href="https://kaifamiao.dev/?cat=24">金斗云</a> (152)</li></ul>
</nav>
<p>
powered by <a href="
https://kaifamiao.dev">
kaifamiao </a>
</p>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/jQuery/jquery.min.js?ver=10.2.1" id="jQuery-CDN-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/KaTeX/katex.min.js?ver=10.2.1" id="Katex-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Emojify.js/js/emojify.min.js?ver=10.2.1" id="Emojify.js-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/ClipBoard/clipboard.min.js?ver=2.0.1" id="copy-clipboard-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/components/prism-core.min.js?ver=1.15.0" id="prism-core-js-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/autoloader/prism-autoloader.min.js?ver=1.15.0" id="prism-plugin-autoloader-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/toolbar/prism-toolbar.min.js?ver=1.15.0" id="prism-plugin-toolbar-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/line-numbers/prism-line-numbers.min.js?ver=1.15.0" id="prism-plugin-line-numbers-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/show-language/prism-show-language.min.js?ver=1.15.0" id="prism-plugin-show-language-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.15.0" id="prism-plugin-copy-to-clipboard-js"></script>
<script type="text/javascript" id="Front_Style-js-extra">
/* <![CDATA[ */
var FrontStyle = {"openLinkInNewTab":"on"};
/* ]]> */
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/FrontStyle/frontstyle.min.js?ver=10.2.1" id="Front_Style-js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$(".katex.math.inline").each(function () {
var parent = $(this).parent()[0];
if (parent.localName !== "code") {
var texTxt = $(this).text();
var el = $(this).get(0);
try {
katex.render(texTxt, el);
} catch (err) {
$(this).html("<span class=\"err\">" + err);
}
} else {
$(this).parent().text($(this).parent().text());
}
});
$(".katex.math.multi-line").each(function () {
var texTxt = $(this).text();
var el = $(this).get(0);
try {
katex.render(texTxt, el, {displayMode: true})
} catch (err) {
$(this).html("<span class=\"err\">" + err)
}
});
})
})(jQuery);
</script>
<script type="text/javascript">
window.onload = function () {
emojify.setConfig({
img_dir: "https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Emojify.js/images/basic",//前端emoji资源地址
blacklist: {
"ids": [],
"classes": ["no-emojify"],
"elements": ["^script$", "^textarea$", "^pre$", "^code$"]
}
});
emojify.run();
}
</script>
<script type="text/javascript">
Prism.plugins.autoloader.languages_path = "https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/components/";
</script>