从一个完整且精简的文档说起
一、小试牛刀
对于初学前端的人来说，最幸福的就是在自家电脑上运行自己亲手制作的网页，一来是对自己学习的肯定，二来就是能在自己小伙伴们中展示一下自己的能力，这三来就是也说明自己向前端的职业迈进了一步。好废话不多说，直接多行代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Note that it is "h" + "1", not "h" + the letter "one" -->
<p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>
copy上面的代码到文本编辑器中，另存为myfirstweb.html，然后用浏览器打开它，需要注意的是，你要确保你使用了utf-8的编码格式保存了这份HTML示例文档。 打开后就可以看到你自己写的页面啦！！！虽然我们并没有对我们的页面的内容做过多的修饰，但这总归是一个不错的开始嘛！
二、庖丁解牛
上述的代码，对于刚入门的小伙伴来说会有点小疑问，下面我们就来逐一解释：
关于
是文档类型声明，即声明为HTML文档类型。其中DOCTYPE可以理解为*document type* 即文档类型。
可以告诉浏览器需要一个doctype来触发标准模式。文档类型声明的演变有着复杂深长的历史，但今天的我们只需知道上方的文档类型声明告诉了浏览器需要遵循[W3C标准](https://www.w3.org/)来解析HTML和CSS代码。
关于文档结构
HMTL文件的结构
graph TB
A(html)-->|head|B[meta..title..link..ect.]
A(html)-->|body|C[h1..p..div..ect.]
HMTL文件中有两个重要的部分，一个是head（头部），一个是body（主体部分）
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。 由两个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都可能会被认为是无效的。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML 元素
<head> 元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML 元素</h4>
<title> 标签定义文档的标题。
<p>title 元素在所有 HTML/XHTML 文档中都是必需的。</p>
<p>title 元素能够：</p>
<ul>
<li>定义浏览器工具栏中的标题</li>
<li>提供页面被添加到收藏夹时显示的标题</li>
<li>显示在搜索引擎结果中的页面标题</li>
</ul>
<h4 id="html--元素-2">HTML <base> 元素</h4>
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）:
```
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
```
<h3 id="关于-1">关于<meta charset="utf-8" /></h3>
<p>说明文档的字符串编码，否则浏览器就不能正确解析，导致安全隐患</p>
<h3 id="文本格式标签">文本格式标签</h3>
<p>这些标签主要用来标识文本区块，并可以显示到以页面中。</p>
<ul>
<li>
<title>...</title> :网页的标题标签，内容可以在网页的标题中显示。
</li>
<li><hx>...</hx> :标题标签，其中n可取1,2,3,4,5,6，分别表示一级，二级，三级等六级标题。</li>
<li>
<p>...</p> ：段落标签，标识段落
</li>
<li>
<blockquote>...<blockquote>: 标签定义块引用。
</li>
</ul>
<h3 id="字符格式标签">字符格式标签</h3>
<p>字符格式标签主要标识文本字符的语义，在页面上也有一定的表现形式。</p>
<ul>
<li><b>...</b>:标签规定粗体文本。</li>
</ul>
<blockquote>
<p>注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。</p>
</blockquote>
<ul>
<li><i>...</i>:标签显示斜体文本效果。</li>
</ul>
<blockquote>
<p><i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。</p>
</blockquote>
<ul>
<li><small>...</small>: 标签呈现小号字体效果。</li>
<li><sup>...</sup>:标签可定义上标文本。</li>
</ul>
<blockquote>
<p>包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。</p>
</blockquote>
<ul>
<li><sub>...</sub>:标签可定义下标文本。</li>
<li><cite>...</cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。</li>
</ul>
<p>想了解跟多标签请<a href="http://www.w3school.com.cn/tags/tag_doctype.asp" target="_blank">点击查看</a></p>
<p>声明：本人前端小白一枚，本文有介绍得不对的地方请各位大神批评指出，文章内容参考<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction" target="_blank">HTML 入门</a>和<a href="http://www.w3school.com.cn/tags/tag_doctype.asp" target="_blank">w3school</a></p>
浙公网安备 33010602011771号