温馨提示：

本文中可能包含表格，在手机屏幕上竖屏显示时，一行内可显示中文字符数量为20个左右，因部分表格单元格内容过长会导致自动换行，从而使得排版不太美观。

另外，本文中可能包含高清图片，在手机屏幕上预览时，我们需要频繁的进行放大缩小操作，这是相当麻烦的一件事情。

因此，如果条件允许，建议您坐在舒适的办公桌前，冲泡一杯咖啡或者茶，在电脑上阅读以获得更好的体验。

1、Hello World!

按照编程界悠久的传统，同时为了测试相关软件系统输出，在初次使用HTML5编程时，先用其基本的特性写一个Hello World!

向C语言和UNIX之父丹尼斯·里奇致敬！

向万维网之父蒂姆·伯纳斯·李致敬！

向苹果公司联合创始人史蒂夫·乔布斯致敬！

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="AT阿宝哥" />
		<meta name="Keywords" content="万维网,www,HTML,AT阿宝哥" />
		<meta name="Description" content="这是AT阿宝哥的第一张网页。" />

		<title>Hello World</title>
	</head>

	<body bgcolor="deepskyblue">

		<p>
			Hello World...
		</p>

		<p>
			你好，世界...
		</p>

	</body>

</html>

效果：

Hello World!

温馨提示：

如果是初学者，可使用记事本、Notepad++或者Hbulider中的任何一个纯文本编辑器创建名为hello-world.html的文件，复制上述代码并保存，然后用浏览器打开该文件即可预览代码效果。

其中，hello-world为您的文档自定义名称，.html为HTML文档的后缀名，也可以是.htm。而且，我们期望自定义名称应该为英文小写，如果该名称由多个词组成，词与词之间最好使用连字符-分割，这样将减少一些维护代码时不必要的麻烦。

2、核心语法

HTML（HyperText Markup Language ，超文本标记语言），是通过“标记”将说明文字，图形、动画、声音、表格、链接等分散的资源或者信息组织成一个文件，我们将其称之为HTML文档，俗称“网页”，也是构成网站的基础单位。

2.1 、标记

“标记”，也叫标签或元素，由左尖括号<、标记名称、和右尖括号>组成。大多数标记必须成对使用，以表示作用的起始和结束，结束标记需要在标记名称前加斜杠/，这类标记，被称之为实体标记或开标记。如：

<element>   </element>

少数标记，是单个出现的，我们需要在右尖括号>前加入斜杠/以表示结束。这类标记，被称之为空标记或闭标记。而且，W3C建议我们应该在标记名称后和斜杆/前加入至少一个空格以凸显语法。同时，斜杆/和右尖括号>之间不能有任何字符。如：

<element    />

2.2、属性和值

标记拥有诸多属性说明，用于描述标记的特征和强化其功效，可用参数值对元素作进一步的限定。而且，W3C建议我们应该将值包含在一对双引号""内。语法如下：

<element   property=“value”>   </element>

标记的属性值可能有多个，次序不限，其间用空格分隔即可；如：

<element   property1=“value1”    property2=“value2”>   </element>

2.3 、注意事项

标记忽略大小写，即其作用相同，但是，我们一般期望采用全小写形式。

标记，包括尖括号、标记名称、斜杆、属性项等必须使用半角的西文字符，而不能使用全角字符。

#3、文档基本结构

#3.1、简单结构

一个HTML文档应具备如下基本要求：

文档开头第一行使用<!DOCTYPE>定义文档类型，该标记告知浏览器文档所使用的 HTML 规范。值html声明该文档采用HTML5规范。
<html>和</html>这组标记告知浏览器这是一个 HTML 文档。且文档以<html>开始，以</html>结束。
HTML文档由两部分组成：头部和主体。

头部用于定义文档的元信息，以<head>开始，以</head>结束。该部分不作为内容来显示，但影响网页显示的效果。
主体用于定义文档的内容，以<body>开始，以</body>结束。

<meta>标记可提供有关页面的元信息，用于告知浏览器和搜索引擎文档的关键信息。

charset属性描述文档所采用的字符集，其值如GB2312代表简体汉字，Big5代表繁体汉字，utf-8是Unicode字符集，即万国码。建议使用utf-8，这样，对全球多种语言均支持，否则，页面内容可能会出现乱码。
name属性描述文档的可选关键信息，如作者，关键字列表和页面描述等。

<title>标记定义文档的标题，且以<title>开始，以<title>结束，该组标记只能在文档头部出现一次。标题内容会显示在浏览器的标题栏或者标签栏，也可能出现在被用户在搜索引擎检索到的结果列表中。
<body>标记内可写入您期望用户看到的正文内容。如文字，图片，音频视频和表单等等，具体看场景需要。

有时候，文档的内容可能过于冗长，我们往往需要使用<h1>到<h6>标记创建文档的多级标题，效果类似MS Word中的大纲，这将有利于我们构建文档内容清晰的语义结构。

有时候，文档内容在浏览器的呈现效果过于信息密集，不利于在视觉上区分内容的逻辑界限，我们则可以使用<hr />标记添加水平分割线，以缓和用户在查看时的焦虑感，从而提升用户体验。

有时候，我们期望在页面内实现换行效果，可以使用<br />标记，因为代码中的换行是被浏览器直接忽略的。

代码示例：


<!DOCTYPE html>
<html>
	<head>
		
		<!-- 字符集：utf-8,GB2312 ，Big5-->
		<meta charset="utf-8">
		
		<!-- 作者：可选-->
		<meta name="author" content="AT阿宝哥" />
		
		<!-- 关键字列表：可选-->
		<meta name="Keywords" content="HTML,XML,WWW,超文本标记语言,可扩展标记语言,万维网"/>
		
		<!-- 页面描述：可选-->
		<meta name="Description" content="该文档演示了HTML文档的基本结构。"/>

		<!-- 文档标题-->
		<title>文档结构</title>
		
	</head>
	<body bgcolor="deepskyblue">
		
		<!-- 多级标题：可选-->
		<h1>一级标题</h1>
		
		<h2>二级标题</h2>
		
		<h3>三级标题</h3>
		
		<h4>四级标题</h4>
		
		<h5>五级标题</h5>
		
		<h6>六级标题</h6>
		
		<!-- 水平线：可选-->
		<hr />
	
		<!-- 文档正文：可选-->
		<p>文档正文...</p>
		
		<p>
			用于换行的标记 <br /> 也是可选的...
		</p>
		
	</body>
</html>

效果：

图片.png

#3.2、复杂结构

大多数主流站点，如百度、阿里、腾讯、网易、新浪和京东等等，其页面布局均为“上中下”结构，故我们可以使用<div>标记将页面主体body划分为多个物理区域，这将有利于我们设计清晰的文档布局。这好比我们将房子分割为走廊、卫生间、厨房、客厅、卧室和阳台一样，每个房间都有其主要的功用。

页面顶部一般是导航区域，罗列出该网站有哪些信息和功能的分类链接。如：

页面顶部

页面正文部分一般是期望用户看到和可操作的内容。如：

页面正文

页面底部一般是关于网站所有者的版权声明和非重要内容的链接，如：

页面底部

另外，如今复杂的网页中可不单单有HTML代码，于是，设计者们约定HTML仅仅描述文档的结构，CSS用于美化元素，JavaScript用于增强页面的交互性。

代码示例：


<!DOCTYPE html>
<html>
	<head>
		
		<!-- 字符集：utf-8,GB2312 ，Big5-->
		<meta charset="utf-8">
		
		<!-- 作者：可选-->
		<meta name="author" content="AT阿宝哥" />
		
		<!-- 关键字列表：可选-->
		<meta name="Keywords" content="HTML,XML,WWW,超文本标记语言,可扩展标记语言,万维网"/>
		
		<!-- 页面描述：可选-->
		<meta name="Description" content="该文档演示了HTML文档的基本结构。"/>

		<!-- 文档标题-->
		<title>文档结构</title>
		
		<!-- 内部样式块：可选-->
		<style>
			/* 注意：style标记内均为CSS注释及选择器相关的代码 */
			
			body{
				text-align: center;
			}
			
			/*页面顶部样式*/
			#header{
				background-color: gray;
				height: 60px; 
				
			}
			
			/*页面正文样式*/
			#content{
				background-color: lightgreen;
				height: 300px; 
			}
			
			/*页面底部样式*/
			#footer{
				background-color: lightgray;
				height: 90px; 
			}
		</style>
		
		<!-- 头部脚本块：可选-->
		<script type="text/javascript">
			//JS
		</script>
	</head>
	<body bgcolor="deepskyblue">
	
		<!-- 页面顶部：此处仅作参考-->
		<div id="header">
			<div>
				<a href="">栏目1</a>
				<a href="">栏目2</a>
				<a href="">栏目2</a>
			</div>
		</div>
		
		<!-- 页面正文：此处仅作参考-->
		<div id="content">
		正文部分
		</div>
		
		<!-- 页面底部：此处仅作参考-->
		<div  id="footer">
			<div>
				<p>公司：Company</p>
				<p>电话：8888888</p>
			</div>
		</div>
		
	</body>
</html>

效果：

图片.png