洁净脆皮肠 發表於 2020-6-29 22:56:00

python-HTML（HTML5级别）

<p>简介：</p>
<p>　　超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。</p>
<p>查看网页的HTML</p>
<p>　　打开右上角菜单，选择工具 -&gt; 开发人员工具（F12）</p>
<p><img src="https://img2020.cnblogs.com/blog/1966867/202005/1966867-20200513161004648-825564651.png"></p>
<p>&nbsp;</p>
<p>一、创建方法（以VS code 为例）：</p>
<p>　　法1，如图新建文件，命名后缀 .htm 或.html (两种命名方法无区别），输入源代码并保存</p>
<p><img src="https://img2020.cnblogs.com/blog/1966867/202005/1966867-20200513141152727-515764463.png"></p>
<p>　　法2，"文件 -&gt; 新建文件" -&gt; 输入源代码 -&gt;"文件 -&gt;另存为(以.htm 或.html为扩展名)"</p>
<p>&nbsp;</p>
<p>二、在浏览器中运行这个HTML文件</p>
<p>　　法1，（VS code）鼠标右键点击文件名，复制路径，在浏览器中打开</p>
<p><img src="https://img2020.cnblogs.com/blog/1966867/202005/1966867-20200513142537173-600246578.png"></p>
<p>　　法2，在电脑中找到需要打开的HTML文件，单击右键，用浏览器打开</p>
<p>&nbsp;</p>
<p>三、最简单的实例</p>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;我的网页&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;我的第一个标题&lt;/h1&gt;
&lt;h2&gt;我的第二个标题&lt;/h2&gt;

&lt;p&gt;我的第一个段落。&lt;/p&gt;
&lt;p&gt;我的另一个段落。&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
</div>
<p>解析：　</p>
<p>　　<strong>&lt;!DOCTYPE html&gt;</strong>&nbsp; &nbsp; &nbsp; &nbsp;声明（不区分大小写）为 HTML5 文档</p>
<p>HTML元素/HTML标签&nbsp; &nbsp;</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;——&nbsp; &nbsp;成对出现&nbsp; &nbsp; &nbsp;&lt;标签&gt; 内容 &lt;/标签&gt;</p>
<p><strong>&nbsp; &nbsp; &nbsp;&lt;html&gt;</strong>&nbsp; &nbsp; &nbsp; &nbsp;HTML 页面的根元素&nbsp; &nbsp; &nbsp;</p>
<p><strong>&nbsp; &nbsp; &nbsp;&lt;head&gt;</strong>&nbsp; &nbsp; &nbsp; 包含了文档的元（meta）数据，如&nbsp;<span class="marked">&lt;meta charset="utf-8"&gt;&nbsp;定义网页编码格式为&nbsp;<strong>utf-8</strong>（360默认编码格式为<strong>gbk</strong>）。</span></p>
<p><strong>&nbsp; &nbsp; &nbsp;&lt;title&gt;</strong>&nbsp; &nbsp; &nbsp; &nbsp; 描述文档的标题</p>
<p><strong>&nbsp; &nbsp; &nbsp;&lt;body&gt;&nbsp; &nbsp; &nbsp;&nbsp;</strong>包含可见的页面内容</p>
<p><strong>&nbsp; &nbsp; &nbsp;&lt;h1&gt;</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 定义一个大标题</p>
<p><strong>&nbsp; &nbsp; &nbsp;&lt;p&gt;</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 定义一个段落&nbsp;</p>
<p>&nbsp;</p>
</div>
<p>四、文本格式化</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">&lt;b&gt;          定义粗体文本
&lt;em&gt;         定义着重文字
&lt;i&gt;          定义斜体字
&lt;small&gt;      定义小号字
&lt;strong&gt;   定义加重语气
&lt;sub&gt;      定义下标字
&lt;sup&gt;      定义上标字
&lt;ins&gt;      定义插入字
&lt;del&gt;      定义删除字</pre>
</div>
<p>实例：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">&lt;b&gt;加粗文本&lt;/b&gt;&lt;br&gt;&lt;br&gt;
&lt;i&gt;斜体文本&lt;/i&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;电脑自动输出&lt;/code&gt;&lt;br&gt;&lt;br&gt;
这是 &lt;sub&gt; 下标&lt;/sub&gt; 和 &lt;sup&gt; 上标&lt;/sup&gt;
</pre>
</div>
<p>输出：</p>
<p>　<img src="https://img2020.cnblogs.com/blog/1966867/202006/1966867-20200629222340476-679347598.png">&nbsp;</p>
<p>&nbsp;</p>
<p>五、链接</p>
<div class="code">
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">&lt;a href="url"&gt;链接文本&lt;/a&gt;
</pre>
</div>
<p>实例:</p>
<p><img src="https://img2020.cnblogs.com/blog/1966867/202006/1966867-20200629224039914-1322334612.png"></p>
<p>&nbsp;</p>
</div>
</div><br><br>
来源：https://www.cnblogs.com/Anjoras-bk/p/12882304.html
頁: [1]
查看完整版本: python-HTML（HTML5级别）