HTML基础
HTML--- 超文本标记语言
HTML即超文本标记语言，是一种用于创建网页的标准标记语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签，HTML使用标签来描述网页。HTML文档包含了HTML标签及文本内容。可以使用HTML来建立自己的web站点，HTNL运行在浏览器上，由浏览器来解析。
HTML实例
注意：对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器（如360 浏览器）会设置GBK为默认编码，则需设置为。
实例
第一个实例
我的第一个标题
我的第一个段落
运行结果：
HTML后缀名
.html
.htm
以上两种后缀名没有区别，都可以使用！
HTML简介
实例解析：
声明为HTML5文档------>
头部元素:
第一个实例<title> </head></code></pre> </blockquote> <h5><span style="color:#956fe7;"><strong>可见页面的内容：</strong></span></h5> <blockquote> <pre><code class="language-html"><body> <h1>我的第一个标题</h1> <p>我的第一个段落</p> </body></code></pre> </blockquote> <h5>详解</h5> <table border="1" style="width:500px;"> <tbody> <tr> <td><!DOCTYPE html></td> <td>声明为HTML5文档</td> </tr> <tr> <td><html></td> <td>元素是HTML页面的根元素</td> </tr> <tr> <td><head></td> <td> <p>包含了文档的元（Meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8</p> <p></p> </td> </tr> <tr> <td><title></td> <td>描述了文档的标题</td> </tr> <tr> <td><body></td> <td>包含了可见的页面内容</td> </tr> <tr> <td><h1></td> <td>定义一个大标题</td> </tr> <tr> <td><p></td> <td>定义一个段落</td> </tr> </tbody> </table> <h5> HTML标签</h5> <blockquote> <ol> <li>HTML标记标签通常被称为HTML标签（HTML tag）</li> <li>HTML标签是由尖括号包围的关键词，例如<html></li> <li>HTML标签通常都是成对出现的，比如<b></b></li> <li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li> <li>开始和结束标签也被成为开放标签和闭合标签</li> </ol> <p><strong><span style="background-color:#f3f3f4;"><标签>内容</标签></span></strong></p> </blockquote> <h5>HTML元素</h5> <p>"HTML"标签和"HTML元素"通常都是描述同样的意思，但一个HTML元素包含了开始与结束标签。如下实例：</p> <pre><code class="language-html"><p>这是一个段落</p></code></pre> <h5>WEB浏览器</h5> <p>Web浏览器（如谷歌浏览器、Safari、Firefox）是用与读取HTML文件，并将其作为网页显示。浏览器并不是直接显示HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：</p> <p><a href="http://img.e-com-net.com/image/info8/79ebb2cc09a04ea4a51b543b57686e6f.jpg" target="_blank"><img alt="HTML基础_第3张图片" height="213" src="http://img.e-com-net.com/image/info8/79ebb2cc09a04ea4a51b543b57686e6f.jpg" width="650" style="border:1px solid black;"></a></p> <blockquote> <p><span style="color:#fe2c24;">只有body中的内容才会在浏览器中显示。</span></p> </blockquote> <p><！DOCTYPE>声明</p> <p><!DOCTYPE>声明有助于浏览器中正确显示网页。</p> <p>网络中有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能够正确显示网页内容。</p> <p>doctype声明是不区分大小写的，以下方式均可：</p> <pre><code class="language-html"><!DOCTYPE html> <!DOCTYPE HTML> <!DOCType html> <!doctype HTML> </code></pre> <h4>HTML编辑器推荐</h4> <blockquote> <ul> <li>VS Code：Visual Studio Code - Code Editing. Redefined</li> <li>Sublime Text：http://www.sublimetext.com/</li> <li>在线编辑器：HTML/CSS/JS 在线工具 | 菜鸟工具</li> </ul> </blockquote> <h3>HTML基础</h3> <h5>HTML标题</h5> <blockquote> <p>HTML标题：是通过<h1>-<h6>标签来定义的</p> <pre><code class="language-html"><h1>这是一个标题</h1> <h2>这是第二个标题</h2> <h3>这是第三个标题</h3></code></pre> <p><a href="http://img.e-com-net.com/image/info8/6a6611c9feca41e8afebca012d769a8a.jpg" target="_blank"><img alt="HTML基础_第4张图片" height="185" src="http://img.e-com-net.com/image/info8/6a6611c9feca41e8afebca012d769a8a.jpg" width="650" style="border:1px solid black;"></a></p> </blockquote> <h5> HTML段落</h5> <blockquote> <p>HTML段落是通过标签<p>来定义的。</p> <pre><code class="language-html"><p>我的第一个段落</p> <p>我的第二个段落</p></code></pre> <p><a href="http://img.e-com-net.com/image/info8/4ed8113ecc914b3592e77885b9a9104a.jpg" target="_blank"><img alt="HTML基础_第5张图片" height="150" src="http://img.e-com-net.com/image/info8/4ed8113ecc914b3592e77885b9a9104a.jpg" width="650" style="border:1px solid black;"></a></p> </blockquote> <h5>HTML链接</h5> <blockquote> <p>HTML链接是通过标签<a>来定义的</p> <pre><code class="language-html"><a href="https://www.baidu.com">这是一个链接</a> <br> <a href="https://ys.mihoyo.com/">这是另一个链接</a></code></pre> <p><a href="http://img.e-com-net.com/image/info8/ff17ad2c5f25408ead968a44cea710df.jpg" target="_blank"><img alt="" height="83" src="http://img.e-com-net.com/image/info8/ff17ad2c5f25408ead968a44cea710df.jpg" width="650"></a></p> </blockquote> <h5>HTML图像</h5> <blockquote> <p>HTML图像是通过标签<img>来定义的</p> <pre><code class="language-html"><img src="/img/2.webp" width="258" height="100"/></code></pre> <p><a href="http://img.e-com-net.com/image/info8/2f31094506af4a4d8156431f75ceddba.jpg" target="_blank"><img alt="" height="87" src="http://img.e-com-net.com/image/info8/2f31094506af4a4d8156431f75ceddba.jpg" width="650"></a></p> </blockquote> <h3>HTML元素 </h3> <hr> <table border="1" style="width:500px;"> <caption> HTML元素 </caption> <tbody> <tr> <td>开始标签</td> <td>元素内容</td> <td>结束标签</td> </tr> <tr> <td><p></td> <td>这是一个段落</td> <td></p></td> </tr> <tr> <td><a href="default.html"></td> <td>这是一个链接</td> <td></a></td> </tr> <tr> <td><br></td> <td>换行</td> <td></td> </tr> </tbody> </table> <blockquote> <p>开始标签常被称为起始标签，结束标签常被成为闭合标签。</p> </blockquote> <h4>HTML元素语法</h4> <ul> <li>HTML元素以<strong>开始标签</strong>起始</li> <li>HTML元素以<strong>结束标签</strong>终止</li> <li><strong>元素内容</strong>是开始标签与结束标签之间的内容</li> <li>某些HTML元素具有<strong>空内容</strong></li> <li>空元素<strong>在开始标签中进行关闭</strong>（以开始标签的结束而结束）</li> <li>大多数HTML元素可拥有<strong>属性</strong></li> </ul> <h4>嵌套的HTML元素</h4> <blockquote> <p>大多数HTML元素可以嵌套（HTML元素可以包含其他HTML元素）</p> <p>HTML文档由相互嵌套的HTML元素构成</p> </blockquote> <h4>HTML文档实例</h4> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <p>这是第一个段落。</p> </body> </html></code></pre> <p>以上实例包含了三个HTML元素</p> <hr> <h4>HTML实例解析</h4> <p><strong><p>元素</strong></p> <pre><code class="language-html"><p>这是第一个段落。</p> </code></pre> <p>这个<p>元素定义了HTML文档中的一个段落。</p> <p>这个元素拥有一个开始标签<p>及一个结束标签</p>.</p> <p>元素内容是：这是一个段落。</p> <p><strong><body>元素：</strong></p> <pre><code class="language-html"><body> <p>这是第一个段落。</p> </body> </code></pre> <p><body>元素定义了HTML文档的主体。</p> <p>这个元素拥有一个开始标签<body>以及一个结束标签</body>.</p> <p>元素内容另一个HTML元素（p元素）。</p> <p><strong><html>元素：</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <p>这是第一个段落。</p> </body> </html></code></pre> <p><html>元素定义了整个HTML文档。</p> <p>这个元素拥有一个开始标签<html>,以及一个结束标签</html></p> <p>元素内容是另一个HTML元素（body元素）。</p> <blockquote> <p><strong><span style="color:#fe2c24;">注意：不要忘记结束标签。</span></strong><span style="color:#fe2c24;">部分代码缺失结束标签，浏览器也会正确显示，但不可依赖此做法，忘记使用结束标签会产生不可预料的结果或错误。</span></p> </blockquote> <h4>HTML空元素</h4> <p>没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。</p> <p><br> 就是没有关闭标签的空元素（<br> 标签定义换行）。</p> <p>在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。</p> <p>在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。</p> <p>即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。</p> <h4>HTML提示：使用小写标签</h4> <p>HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。</p> <p>菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中<strong>推荐</strong>使用小写，而在未来 (X)HTML 版本中<strong>强制</strong>使用小写。</p> <h3>HTML属性</h3> <ul> <li>HTML元素可以设置属性</li> <li>属性可以在元素中添加附加信息</li> <li>属性一般描述于开始标签</li> <li>属性总是以名称/值对的形式出现，比如：name="value"</li> </ul> <h4>属性实例</h4> <p>HTML链接由<a>标签定义。链接的地址在<strong>href属性</strong>中指定：</p> <pre><code class="language-html"><a href="http://www.baidu.com">这是一个链接</a></code></pre> <h4>HTML属性常用引用属性值</h4> <p>属性值应该始终包括在引号内。</p> <p>双引号是最常用的，不过使用单引号也没问题</p> <blockquote> <p>提示：在某些个别情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：</p> <pre><code class="language-html">name='John "ShotGun" Nelson'</code></pre> </blockquote> <h4>HTML属性参考手册</h4> <p>下面列表列出了适用于大多数HTML元素的属性：</p> <table border="1" style="width:500px;"> <tbody> <tr> <td>属性</td> <td>描述</td> </tr> <tr> <td>class</td> <td>为html元素定义一个或多个类名(classname)（类名从样式文件引入）</td> </tr> <tr> <td>id</td> <td>定义元素唯一的Id</td> </tr> <tr> <td>style</td> <td>规定元素的行内样式（inline style）</td> </tr> <tr> <td>title</td> <td>描了元素额外的信息（作为工具条使用</td> </tr> </tbody> </table> <h3>HTML标题</h3> <blockquote> <p>标题是通过<h1>-<h6>标签进行定义的。</p> <p><h1>定义最大的标题。<h6>定义最小的标题。</p> <pre><code class="language-html"><h1>这是一个标题。</h1> <h2>这是一个标题。</h2> <h3>这是一个标题。</h3></code></pre> <p><a href="http://img.e-com-net.com/image/info8/59c89cbd95704ba799d7d71a378a6803.jpg" target="_blank"><img alt="HTML基础_第6张图片" height="159" src="http://img.e-com-net.com/image/info8/59c89cbd95704ba799d7d71a378a6803.jpg" width="650" style="border:1px solid black;"></a></p> <p><span style="color:#fe2c24;"><strong>注：浏览器会自动在标题的前后添加空行。</strong></span></p> </blockquote> <h4>HTML水平线</h4> <p><hr>标签在HTML页面中创建水平线。</p> <p>hr元素可用来分割内容。</p> <blockquote> <p>实例</p> <pre><code class="language-html"><h1>这是一个标题。</h1> <hr> <h2>这是一个标题。</h2> <hr> <h3>这是一个标题。</h3></code></pre> <p><a href="http://img.e-com-net.com/image/info8/4eb4f64017bc4f34bcb044e944fa10fb.jpg" target="_blank"><img alt="HTML基础_第7张图片" height="131" src="http://img.e-com-net.com/image/info8/4eb4f64017bc4f34bcb044e944fa10fb.jpg" width="650" style="border:1px solid black;"></a></p> </blockquote> <h4>HTML注释</h4> <blockquote> <p>可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示他们。注释写法如下：</p> <pre><code class="language-html"><!--这是一个注释--></code></pre> <p><strong>注释：</strong>开始括号之后（左边的括号）需要紧跟一个叹号！（英文的标点符号），结束括号之前（右边的括号）不需要，合理使用注释可以对未来的代码编辑工作产生帮助。</p> <p><strong>对比上图：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/7e70b819876b43259281c4f7800a7b7a.jpg" target="_blank"><img alt="HTML基础_第8张图片" height="121" src="http://img.e-com-net.com/image/info8/7e70b819876b43259281c4f7800a7b7a.jpg" width="650" style="border:1px solid black;"></a></p> <p><strong>注释也可通过键盘ctrl+?，快捷打出。</strong></p> </blockquote> <h3><strong>HTML段落</strong></h3> <blockquote> <p>HTML可以将文档分割为若干段落。</p> <p>实例：</p> <p>注意：浏览器会自动地在段落的前后添加空行。(</p>是块级元素)。</p> <pre><code class="language-html"><p>这是一个段落</p> <p>这是另一个段落</p></code></pre> </blockquote> <h4>HTML折行</h4> <blockquote> <p>实例</p> <pre><code class="language-html"><p>这个<br>段落<br>演示了分行效果</p></code></pre> <p><a href="http://img.e-com-net.com/image/info8/0107056cc81c481b9346d61e545d44e2.jpg" target="_blank"><img alt="HTML基础_第9张图片" height="125" src="http://img.e-com-net.com/image/info8/0107056cc81c481b9346d61e545d44e2.jpg" width="650" style="border:1px solid black;"></a></p> </blockquote> <h4>HTML实例</h4> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>春晓 春晓
春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。
注意：浏览器忽略了源代码中的排版 （省略了多余的空格和换行）。