HTML讲义

LZ77记号词汇(英文:HyperText Markup Language,全称:HTML)是一类用作创建页面的国际标准记号词汇。

您能采用 HTML 来创建他们的 WEB 公交站点,HTML 运转在应用程序上,由应用程序来导出。

在本讲义中,您将自学怎样采用 HTML 来创建公交站点。

HTML 很难自学!坚信您能迅速专业委员会它!

本讲义包涵了数十个 HTML 示例。

采用该站的GUI,您能随心所欲同时实现网易网修正 HTML,并查阅示例运转结论。

html><html><head><metacharset="utf-8"><title>孙叫兽的网志title>head><body><h1>我的第一个标题h1><p>我的第一个段落。p>body>html>

HTML 文档的后缀名

.html

.htm

都能。

  • HTML 简介

示例:

html><html><header><metacharset="utf-8"><title>孙叫兽的网志title>header><body><h1>这是我的标题h1><p>这是我的段落p>body>html>

示例导出

  • 声明为 HTML5 文档
  • 元素是 HTML 页面的根元素
  • 元素包涵了文档的元(meta)数据,如 定义页面编码格式为 utf-8。
  • 元素描述了文档的标题</li><li id="1fb3276d-efd5-4d75-a2da-850184023f49" style="font-size:18px;margin:20px 0px;text-align:left;"><body> 元素包涵了可见的页面内容</li><li id="b37f2b4f-ff1b-441a-b1ce-7bed46a15b44" style="font-size:18px;margin:20px 0px;text-align:left;"><h1> 元素定义一个大标题</li><li id="c2952e52-d155-415c-8bbd-1873f3a290c4" style="font-size:18px;margin:20px 0px;text-align:left;"><p> 元素定义一个段落</li></ul><p id="41aa78d5-57ea-45fa-9079-e9b0454f8001" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">什么是HTML?</p><ul id="e25b3545-7a1e-45eb-8e0e-535c4f3d61f6" style="font-size:18px;margin:20px 0px;text-align:left;"><li id="153d769e-ad65-419f-ad51-43830ba9584c" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 是用来描述页面的一类词汇。</li><li id="c0a08767-942a-4693-a51c-955173dc72a9" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 指的是LZ77记号词汇: HyperText Markup Language</li><li id="c9c09296-fdb7-422d-aabb-65cb6911edff" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 不是一类编程词汇,而是一类记号词汇</li><li id="9ca3d9c8-0167-4b8f-be11-8bd19419002d" style="font-size:18px;margin:20px 0px;text-align:left;">记号词汇是一套记号标签 (markup tag)</li><li id="44933ec5-fbd5-4216-8398-46bb438dd800" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 采用记号标签来描述页面</li><li id="46ef83f9-881e-4146-8f41-69ca41ce4e00" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 文档包涵了HTML 标签及文本内容</li><li id="9666756a-ac9a-43e0-82bc-823d1b9717b5" style="font-size:18px;margin:20px 0px;text-align:left;">HTML文档也叫做 web 页面</li><li id="856d74d2-dd01-4c40-a6e1-81bbcda5a871" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 标签</li><li id="13e82b71-928a-4b62-8b03-65197953b9cd" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 记号标签通常被称为 HTML</li></ul><p id="dd5a29f8-8fb8-4403-b226-ea313a0ff14b" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">标签</p><li id="35c950f6-9889-4da5-915a-29662c80f4fd" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 标签是由尖括号包围的关键词,比如 <html></li><li id="a821c15d-d1e2-4843-a685-5c6300f19d9c" style="font-size:18px;margin:20px 0px;text-align:left;">HTML 标签通常是成对出现的,比如 <b> 和 </b></li><li id="6cf4733b-54a2-486e-9aca-56f79ef1355f" style="font-size:18px;margin:20px 0px;text-align:left;">标签对中的第一个标签是开始标签,第二个标签是结束标签</li><li id="e5a0040d-fea4-47ba-9511-863c48981967" style="font-size:18px;margin:20px 0px;text-align:left;">开始和结束标签也被称为开放标签和闭合标签</li><pre id="6092a8cd-35a2-4fae-819a-3baf84d35fa1" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="c5a2d14c-458f-46d9-98b3-24ed00b5c5a6" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="b6bbfd49-bc8d-4a65-8a55-f353ad05996d" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="c93163ad-5cb6-4ee6-8715-67ebce5f4325" style="font-size:18px;margin:20px 0px;text-align:left;">标签</span>></span>内容<span id="2d3748a3-e395-4ef8-aa46-41a8248df16d" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="e5a17b07-6275-4aa3-a94d-f9b852293a80" style="font-size:18px;margin:20px 0px;text-align:left;">标签</span>></span></code></pre><p id="63c7a8a3-0a3c-4412-a3be-1d6bcc2a9999" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">html元素</p><p id="dcba2f00-d4fa-4537-99f9-fa8c8709a9cb" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">HTML 标签 和 HTML 元素 通常都是描述同样的意思.</p><p id="7e21982e-6156-49ff-9401-62ea69089261" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">但是严格来讲, 一个 HTML 元素包涵了开始标签与结束标签,如下示例:</p><p id="c3429403-5ec6-43d2-a5dc-9af6561463fe" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">HTML 元素:</p><pre id="acba734b-e5e4-418c-a45a-326a8d483128" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="82a4dee0-aad9-4850-9b96-848d0d1fe368" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="f9f8532e-6aa9-4890-9761-8748b347ac5a" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="bc82be9a-76a4-4948-809f-47796de02304" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span>这是一个段落<span id="295e4bfc-343a-4119-bd62-24cd3418d227" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="d4092b76-9745-4dd2-b13d-312ca01b5951" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span></code></pre><p id="58073f58-6216-407b-9269-b98bfe186b7d" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">web应用程序</p><p id="56479719-d9f3-49c8-8a99-8445329a3606" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">Web应用程序(如谷歌应用程序,Internet Explorer,Firefox,Safari)是用作读取HTML文件,并将其作为页面显示。</p><p id="4c7408d8-7901-460c-a7c7-4511afc219c4" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">应用程序并不是直接显示的HTML标签,但能采用标签来决定怎样展现HTML页面的内容给用户</p><p id="b4c42e53-b8bc-4564-b35e-97c850fa9fc3" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">html页面结构</p><pre id="c9017d17-310d-4688-9a2c-9454a046fdfa" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="c6bf973f-7da1-4b87-9b02-50b2628e0c30" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="8a3c942b-e8b5-4536-b55d-d17b079afa28" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="fba2073b-55d1-4b2e-bde7-0917faac88ab" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span><span id="16b02e9d-bd51-440c-84ba-866703b8833e" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="44e57d67-099d-476d-8a88-c7e369fff757" style="font-size:18px;margin:20px 0px;text-align:left;">head</span>></span><span id="7d033a47-d1bc-4826-908c-caa567428136" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="cf93ae83-f5d0-4361-b64b-9c103514ed95" style="font-size:18px;margin:20px 0px;text-align:left;">title</span>></span>页面标题<span id="0218eb81-86a0-413d-81cd-f662e774d719" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="fc6598f9-0d4b-42f7-a21d-d92e8c3c3b64" style="font-size:18px;margin:20px 0px;text-align:left;">title</span>></span><span id="a48c3bed-eb02-42a4-984a-3f2d9d60f285" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="cd85bf51-b946-43cd-beea-e2d07c5f29c0" style="font-size:18px;margin:20px 0px;text-align:left;">head</span>></span><span id="6e124e8d-ea5d-4884-b88b-01f8eeb7b19f" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="0a17f1a4-0a4a-47ad-a7e9-6db0ecf62e13" style="font-size:18px;margin:20px 0px;text-align:left;">body</span>></span><span id="8cab3203-f874-4022-8647-129d4f436ca1" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="e9466141-cf4d-4979-b925-3c13254c83af" style="font-size:18px;margin:20px 0px;text-align:left;">h1</span>></span>这是一个标题<span id="2e75346e-9613-491b-aa6c-48dc28b9d63b" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="f002b027-efc8-4e62-a1f3-6e840b7c58d2" style="font-size:18px;margin:20px 0px;text-align:left;">h1</span>></span><span id="0ac1481c-8a7a-44f9-954f-285d616d59bc" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="ad1d603a-acdf-48a2-99e7-74b635a02ca3" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span>这是一个段落。<span id="d7eaa516-5a03-4c3a-876f-2f934d4f3ec4" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="e0259e5e-2805-460e-9690-729377e14de7" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span><span id="a5bbbb6d-1fb2-4d58-b244-d3ab28a4f68a" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="adef8a2c-c21a-4c61-a8dd-3443d1701b6c" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span>这是另外一个段落。<span id="02397cfc-db75-4174-abe8-603c8be57974" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="11bad910-6118-491b-b92c-73f7faec82d6" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span><span id="9c5b4853-335e-4f6a-abf5-7dbdbf0764e9" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="7827b7f2-9ad7-4a4e-8ab7-7e4c08b27afd" style="font-size:18px;margin:20px 0px;text-align:left;">body</span>></span><span id="fcb9c10e-74e5-4987-a284-029d809fcbab" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="02dae4d0-4808-434b-b42a-e9f4f81f7729" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span></code></pre><p id="b24bc89f-e8d2-4bba-8b7b-2995aa06f4f9" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">html的版本:</p><div id="5e384cd3-f8aa-41da-b1e1-3eee872479d8" style="font-size:18px;margin:20px 0px;text-align:left;"><img src="https://p6.toutiaoimg.com/origin/pgc-image/85195f54cd6a4800ba2e12069e673131?from=pc" style="width:100%;" /></div><p id="11cb67cc-ecda-4a50-a777-21a26aebb976" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"><!DOCTYPE>声明</p><p id="9364d9bc-1102-40dd-a24b-48626b7533df" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;"><!DOCTYPE>声明有助于应用程序中正确显示页面。</p><p id="886eca30-ba1c-43ee-b584-fad35337f438" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">网络上有很多不同的文件,如果能够正确声明HTML的版本,应用程序就能正确显示页面内容。</p><p id="434fe0fb-15b1-4704-9a73-4068bbb4a581" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">doctype 声明是不区分大小写的,以下方式均可:</p><pre id="0f32a384-53af-42ed-b8c2-fcca2b4586d4" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="0456ba8a-aada-4c78-8994-2fbe1e68bba4" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="0cccccda-1120-44e7-b2b7-0fa55bd178b2" style="font-size:18px;margin:20px 0px;text-align:left;"><!DOCTYPE<span id="4e25c628-b775-4de3-a989-d56fbc544b9b" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span><span id="9cba6d4a-155c-4cd2-bd13-7d65e4cdb6d9" style="font-size:18px;margin:20px 0px;text-align:left;"><!DOCTYPE<span id="90b28005-1e21-4dbf-87c1-7f8e22d3e4f9" style="font-size:18px;margin:20px 0px;text-align:left;">HTML</span>></span><span id="7cc6a34b-782b-44c6-9149-8d48402c1cd6" style="font-size:18px;margin:20px 0px;text-align:left;"><!doctype<span id="4a77e670-3268-4720-9e3f-5f59e59c40b9" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span><span id="452ac860-3530-4c5d-b1f2-26fdfdbdb094" style="font-size:18px;margin:20px 0px;text-align:left;"><!Doctype<span id="fc953936-89b0-4bc9-b122-fd0ea1fc75a5" style="font-size:18px;margin:20px 0px;text-align:left;">Html</span>></span></code></pre><p id="24731810-ddf2-43f3-80c0-4db43e4d3ef2" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">html5</p><pre id="4aa2dc6c-a5f2-4767-8709-02ff837d259e" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="5a9bc926-db15-4b0c-b690-7b30da7e020d" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="3d6b2e76-0bda-44d9-b53f-acf7c2b37bc6" style="font-size:18px;margin:20px 0px;text-align:left;"><!DOCTYPE<span id="1489e234-8784-42d7-8161-b8ad638b38a0" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span></code></pre><p id="2a0d38ab-7ece-47ea-b550-f205264d273b" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">html4</p><pre id="afc4bfda-082a-44dc-bcae-b78b08519cc5" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="b3ad8dd7-0443-4b29-941e-6d10caf103c3" style="font-size:18px;margin:20px 0px;text-align:left;"><!DOCTYPE HTML<span id="e3b1d78b-32e8-4e81-8704-b21090929a8e" style="font-size:18px;margin:20px 0px;text-align:left;">PUBLIC</span><span id="efe182ab-b89c-412e-8da8-0a60457522b6" style="font-size:18px;margin:20px 0px;text-align:left;">"-//W3C//DTD HTML4 Transitional//EN"</span><span id="aa548d16-302b-4b25-9635-e56ac2855e37" style="font-size:18px;margin:20px 0px;text-align:left;">" http://www.w3.org/TR/html4/loose.dtd"</span>></code></pre><p id="b4247937-e764-4b24-8d4f-8b73f5f465fd" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">xhtml1.0</p><pre id="710e6b7b-bcb0-4f6a-9932-de3b2f0ed797" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="9a0c5c60-2033-45d7-b266-bb638c39a4ae" style="font-size:18px;margin:20px 0px;text-align:left;"><!DOCTYPE html<span id="95f17c40-917c-41b8-a44d-190373c2ef0d" style="font-size:18px;margin:20px 0px;text-align:left;">PUBLIC</span><span id="0a4e9d0d-9c8d-4e43-8592-9b3d360aface" style="font-size:18px;margin:20px 0px;text-align:left;">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span><span id="eef9949a-d48c-4881-9fe5-fed9f6c4a113" style="font-size:18px;margin:20px 0px;text-align:left;">" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></code></pre><p id="7001c690-59bc-4bb2-bea7-3a7271d24c2c" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">中文编码</p><p id="85c747dc-4653-4ceb-873a-dd430c31bfab" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">目前在大部分应用程序中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。</p><pre id="61adbbe6-534e-4851-a12f-c0a0c81efc6a" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="43661f24-c4d5-4ba8-9684-f16dcbe08b90" style="font-size:18px;margin:20px 0px;text-align:left;"><span id="e7a0f90e-87d6-433b-8fb1-1f4b762e6e53" style="font-size:18px;margin:20px 0px;text-align:left;"><!DOCTYPE<span id="f242cb56-7294-4e9b-9894-3fd8086502dd" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span><span id="98d591c7-d145-4db9-85b8-f055a0820198" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="82361c3e-eac0-480c-a943-6877d2cc48f2" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span><span id="28d2e4fb-904e-4043-8364-f02894cc613c" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="e32587db-87e9-42ba-899d-135869d8208c" style="font-size:18px;margin:20px 0px;text-align:left;">head</span>></span><span id="0584bdb7-ee09-4b2d-9f41-d68f6f8302bb" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="8153c0d4-9ae9-46be-a822-4f0a9c2ece3a" style="font-size:18px;margin:20px 0px;text-align:left;">meta</span><span id="8de5338a-323a-452b-a50b-4375e812095d" style="font-size:18px;margin:20px 0px;text-align:left;">charset</span>=<span id="ee5b8b6f-de5e-417f-9418-6dcc4540fd8d" style="font-size:18px;margin:20px 0px;text-align:left;">"UTF-8"</span>></span><span id="294cc979-216c-4d0d-975f-f49832960fc6" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="393b42da-b0bc-4b19-925c-013af12440af" style="font-size:18px;margin:20px 0px;text-align:left;">title</span>></span>孙叫兽的网志<span id="001da1e4-17b4-4807-8de9-73e03e3f204a" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="45dd7099-1fc4-4950-ba17-a5441b372bc7" style="font-size:18px;margin:20px 0px;text-align:left;">title</span>></span><span id="bc0e6f6a-9eed-46b1-aa27-b960c68a5427" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="766e711d-95b2-4a87-ba10-c8e063f3dc4a" style="font-size:18px;margin:20px 0px;text-align:left;">head</span>></span><span id="d10bbd18-759b-4543-b59b-028b6226d6b6" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="0437535d-8c1c-4f76-bca1-12d540656bd8" style="font-size:18px;margin:20px 0px;text-align:left;">body</span>></span><span id="66c37921-146c-4676-a1fb-52f8ea1eb61d" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="edf7bf5d-93fa-4c2b-a149-f309a2bb501f" style="font-size:18px;margin:20px 0px;text-align:left;">h1</span>></span>我的第一个标题<span id="d93c3522-3695-4c4c-b5eb-411717c46712" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="dc3dd49e-83f8-4e57-9db3-09d031ba2ea5" style="font-size:18px;margin:20px 0px;text-align:left;">h1</span>></span><span id="801a5000-052c-46d9-89b5-2c8de05231ee" style="font-size:18px;margin:20px 0px;text-align:left;"><<span id="046a83db-af09-4fc0-b337-3419284ab309" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span>我的第一个段落。<span id="7b2f008a-2f6f-48cf-97d2-88b12b5f4806" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="4e2df9f9-a9f4-49da-a20f-96e042d8a282" style="font-size:18px;margin:20px 0px;text-align:left;">p</span>></span><span id="18d44616-4235-44a0-ba35-6df2e884ea3a" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="f1bccedb-d216-4ad6-8aa6-9c4908ff1e95" style="font-size:18px;margin:20px 0px;text-align:left;">body</span>></span><span id="4c63718c-a2cd-4246-b35f-dfc5a32e8913" style="font-size:18px;margin:20px 0px;text-align:left;"></<span id="b0e522b4-c736-424d-afc7-a537a229610f" style="font-size:18px;margin:20px 0px;text-align:left;">html</span>></span></code></pre><div id="f517f9c9-3436-4529-ab38-03cf9ad408c0" style="font-size:18px;margin:20px 0px;text-align:left;"><img src="https://p6.toutiaoimg.com/origin/pgc-image/d059405e856f484e8783225b9e4988ac?from=pc" style="width:100%;" /></div></body></html>