入门与了解
什么是html
网页是信息的一种载体，网页中不仅有不同形式的文字，还会有声音、图片、动画和链接等元素，我们可以通过浏览网页获得想要的信息，也可以通过制作网页保存信息。
就像用中文语言将想法用文字记录在纸上那样，用 html（超文本标记语言 HyperText Markup Language）可以将信息记载到网页中。
简单的网页制作
在软件HBuilderX中，用html语言写代码，最终生成一个html文件，在浏览器中运行并展示。
软件的下载与安装
下载链接：
安装过程：略
创建空的html文件
安装完成后，打开界面，点击左上角的“文件”，新建项目。
在弹出的对话框中，输入空项目的名称，选择位置，点击创建。
新项目其实是一个新文件夹，右击该项目名称，新建一个html文件。
在弹出的对话框中，对该html文件命名，点击创建，即可进入默认的空模板页面。
如果此时，在菜单栏中点击运行，选择合适的浏览器后，
浏览器会显示一个空白页面，说明该网页不含任何内容。
添加文字元素
文字是网页中最基本的元素，添加过程也很简单，只需要在代码 < body>与< /body>之间输入文字即可。此时保存并浏览器运行，网页中便会出行相同的文字，此时的文字大小和位置都是默认的。
举例：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
遇见你真好，SDM。
</body>
</html>
加上有关文字的标签
在代码中输入文字后，通常还需要对文字添加标签。一般来说，网页中的文字具有一定的大小和位置。
下面以在网页上制作文章《谈读书》为例，详细解释标签是如何使用的。
在 < body>与< /body>之间输入文字元素
<body>
《谈读书》
</body>
此时保存并运行至浏览器，网页上便出现默认大小的文字。
每次更新代码并保存后，浏览器会自动刷新网页。
标题标签
在文字元素前，输入< h 1 >，在文字元素后输入< /h 1 >，这样就给文字元素加入了标题标签。
标题标签成对使用，< h 1 >表示标签开始生效，< /h 1 >表示标签结束
<body>
<h1>《谈读书》</h1>
</body>
保存后可以在浏览器中看到，网页上的文字元素不仅加粗，而且还变大。
html5中有6个标题标签，分别是< h1 >< /h1 >、< h1 >< /h1 >，合理使用标题标签，能让网页中的文字标题有层次感。
斜体标签
在下一行，输入文字元素“王佐良译”后，对这些文字元素加入斜体标签，如下所示：
也可以先输入标签，再在内部输入文字。
<body>
<h1>《谈读书》</h1>
<i>王佐良译</i>
</body>
保存后，保存后可以在浏览器中看到，网页上下一行出现了斜体文字元素。
分割线标签
为了让标题与正文分开，在代码下一行添加斜体标签。
这是一个单标签
<body>
<h1>《谈读书》</h1>
<i>王佐良译</i>
<hr>
</body>
保存后可以在浏览器中看到，
段落标签
通过回车，在下面三行内添加第一段的文字，
过多的文字在一行显示会一直向右延伸，会造成不便。
<body>
<h1>《谈读书》</h1>
<i>王佐良译</i>
<hr>
读书足以怡情，足以博彩，足以长才。其怡情也，最见于独处幽居之时；
其博彩也，最见于高谈阔论之中；其长才也，最见于处世判事之际。
练达之士虽能分别处理细事或一一判别枝节，然纵观统筹、全局策划，则舍好学深思者莫属。
</body>
保存后可以在浏览器中看到，文字并不会像源代码那样换行，而是一直到网页页面边界才换行。若想在指定位置换行，需要添加段落标签。
输入其余的段落，并在每一段文字的首尾处添加段落标签。
<body>
<h1>《谈读书》</h1>
<i>王佐良译</i>
<hr>
<p>读书足以怡情，足以博彩，足以长才。其怡情也，最见于独处幽居之时；
其博彩也，最见于高谈阔论之中；其长才也，最见于处世判事之际。
练达之士虽能分别处理细事或一一判别枝节，然纵观统筹、全局策划，则舍好学深思者莫属。</p>
<p>读书费时过多易惰，文采藻饰太盛则矫，全凭条文断事乃学究故态。
读书补天然之不足，经验又补读书之不足，盖天生才干犹如自然花草，读书然后知如何修剪移接；而书中所示，如不以经验范之，则又大而无当。</p>
<p>有一技之长鄙读书，无知者慕读书，唯明智之士用读书，然读书并不以用处告人，用书之智不在书中，而在书外，全凭观察得之。
读书时不可存心诘难作者，不可尽信书上所言，亦不可只为寻章摘句，而应推敲细思。</p>
<p>书有可浅尝者，有可吞食者，少数则须咀嚼消化。换言之，有只须读其部分者，有只须大体涉猎者，少数则须全读，读时须全神贯注，孜孜不倦。
书亦可请人代读，取其所作摘要，但只限题材较次或价值不高者，否则书经提炼犹如水经蒸馏，淡而五味矣。</p>
<p>读书使人充实，讨论使人机智，笔记使人准确。因此不常做笔记者须记忆特强，不常讨论者须天生聪颖，不常读书者须欺世有术，始能无知而显有知。</p>
<p>读史使人明智，读诗使人灵秀，数学使人周密，科学使人深刻，论理学使人庄重，逻辑修辞之学使人善辩：凡有所学，皆成性格。
人之才智但有滞碍，无不可读适当之书使之顺畅，一如身体百病，皆可借相宜之运动除之。滚球利睾肾，射箭利胸肺，慢步利肠胃，骑术利头脑，诸如此类。
如智力不集中，可令读数学，盖演算须全神贯注，稍有分散即须重演；如不能辨异，可令读经院哲学，盖是辈皆吹毛求疵之人；如不善求同，不善以一物阐证另一物，可令读律师之案卷。
如此头脑中凡有缺陷，皆有特药可医。</p>
</body>
保存后可以在浏览器中看到，网页中的正文出现了段落。
更多
为了突出其中一句话，添加加粗标签。
从这里可以看出，标签可以嵌套。
<b>凡有所学，皆成性格。</b>
为了改变字间距，可以添加 ，在网页中显示一个空格。
在源代码的文字元素内加入空格，网页上的文字内只会出现一个空格。
 
del标签可以给文字增加删除线，格式如下：
<del> </del>
sup标签可以把文字变成上标，格式如下：
<sup> </sup>
u标签可以给文字加下划线，格式如下：
<u> </u>
center标签可以使文字居中显示，格式如下：
<center> </center>
总结
这一部分讲述了如何制作一个简单的文字网页：首先， 建立书写代码的环境，创建一个项目，新建一个默认有基本结构的html文件，在body标签内部输入文字元素，为了网页的美观，还需要加入更多的标签。每个标签对应不同的功能。
从上述可以看出，Html5是一种标签语言，而不是编程语言。
网页代码基本结构分析
这是网页代码的基本结构，下面对这个基本结构进行简单分析。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
<!DOCTYPE html>
这是一个声明，告诉浏览器使用HTML5的标准解析这个网页。
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
head标签里的信息都是对网页的整体说明。
title标签里可以写上网页的标题。
<body>
</body>
网页上的主要内容在body标签内部。
写代码的注意事项
- 缩进
当一个标签嵌套在另一个标签内，为了美观与查看方便，需要对内部的标签用Tab键缩进。
使用软件的注意事项
-
及时保存
写完的代码只有在保存后才能运行。摁住Ctrl+或者点击左上角保存图标即可。 -
自动刷新
代码保存后，选择在浏览器中运行，HBuilderX会内置一台服务器到浏览器中。此后，更新代码并保存后，浏览器会自动刷新这个网页，无需再手动刷新。
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
