第一章
1、学会构建HTML文件；
2、学会使用HTML编程软件；
3、了解HTML基础架构相关标签的含义；
1、理解HTML文件；
2、理解所有标签都是有属性的，并且可以被定义的；
1、使用记事本构建一个HTML文件；
2、构建第一个HTML文件并运行；
3、使用HBuilderX进行HTML编程；
4、构建一个文本网页，并运行。
1、Windows10操作系统专业版；
2、HBuilderX编程工具；
3、Chrome浏览器。
1、HTML简介
HTML 指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的语言。HTML语言的结果文件被称为HTML文档，即后缀为“html”的文件。HTML文档就是我们所说的网页。HTML文档中包含标签和纯文本。这里纯文本就是没有任何修饰符号。修饰是指粗体，下划线，斜体，图形，符号或特殊字符等。符号就是指最基本的二进制编码表是ASCII码所确定的字符，例如：a、B、1、@等。
HTML文档中的标签就是指用来说明内容具体含义的声明标志。例如：<html>标签就是指，这个标签中所有的内容都是超文本标记语言，符合超文本标记语言的所有规则和标准，需要按照超文本标记语言的规则和标准来运行和读取信息。
2、记事本新建HTML文件
因为HTML文件是由标签和纯文本构成的后缀为“html”的文件，因此就可以通过Windows操作系统自带的纯文本工具“记事本”构建HTML文件，即使用记事本工具开发网页。
右键新建记事本，重新命名，并修改文件后缀。新建文件的后缀为“txt”，我们直接在小数点后面修改为html。保存后就是变成HTML文档，即网页。
下一步是用右键用记事本打开这个文件，进行HTML文件的开发。
注意：如果你的文件没有显示后缀，请打开我的电脑，点击顶部菜单栏中查看标签，选择右侧“显示/隐藏”栏中的“文件扩展名”标签，前部有对号即可。然后再观察文件，重命名，就可修改文件后缀。
3、构建HTML基础架构
现在我们开始超文本标记语言，即HTML语言的编程工作。
第一步：告诉浏览器我们编写的HTML文档；
<!DOCTYPE html>
注意：
A、<!DOCTYPEhtml>的含义是告诉浏览器，这是一个HTML5的文档。HTML5中的“5”是超文本标记语言HTML的版本号，HTML5是互联网的下一代标准；
B、为了区别不同语言，所以首先要告诉浏览器，我们编写的是HTML语言。DOC表示文档、TYPE表示类型，html表示语言类型。标签用尖括号包围，“!”的意思是强调；
C、标签输入时、要求输入法为英文、半角，纯文本输入时可为中文；
D、<!DOCTYPEhtml>语句在HTML文档中不是必须的，但没有这句话，很容易出现乱码的情况。
第二步：用<html>标签确定超文本标记语言HTML的适用范围
<!DOCTYPE html>
<html>
</html>
注意：
A、<html>标签成对出现，即<html></html>，后面一个标签前有一个斜杠，表示结尾；
B、HTML中的大部分标签是成对出现，结尾标签前有一个“/”；
C、<html></html>中的内容是HTML的编程内容，在超文本标记语言的标准下运行；
D、<html></html>以外的内容，不受超文本标记语言的标准约束。
第三步：<html>标签中包含两个部分，即<head>标签和<body>标签
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
注意：
A、<head>标签表示头标签，成对出现，包含内容是网页的题目、纯文本运行的标准、标签的样式，以及引用的外部文件等；
B、<head>标签的内容一般不在网页的内部显示；
C、<body>标签表示体标签，成对出现，包含网页所要表现出的格式和内容。
D、大部分HTML的标签都在<body>标签中编写和运行。
第四步：在<head>标签确定元信息，即编写<meta>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
注意：
A、<meta>标签是<head>标签内第一行要写的标签；
B、<meta>标签被称作“元标签”，即确定HTML信息的信息和标准。“元”的意思是信息的信息。
C、<meta>标签是单独出现的，没有结尾标签；
D、<meta>标签中包含“charset="utf-8"语句。“charset="utf-8"”语句是一个表达式，“charset”是<meta>标签的属性，表示网页中信息的编码标准的设定。"utf-8"表示网页信息的一种编码标准。“=”表示设置。即将"utf-8"编码标准赋值给<meta>标签的“charset”属性。
E、在编程中“char”通常表示字符、“set”表示设置或者写入；
F、UTF-8（8位元，UniversalCharacter Set/Unicode Transformation Format，通用字符集的设置或Unicode编码转换的格式）是针对Unicode的一种可变长度字符编码。所有汉字和符号都可以用此编码标准表达。
第五步：设置<title>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
注意：
A、<title>标签表示网页标题标签，成对出现，是浏览器中网页标签所显示的内容；
B、<title>标签是<head>标签内最重要的标签之一，尽可能必须设置；
C、<title>标签通常在<meta>标签后面，首先设置。
D、<title>标签中可以是中文。
第六步在<body>标签中输入一句话，“你好世界”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
你好世界！
</body>
</html>
第七步保存并关闭写字板。
4、运行
右键点击HTML文件，选一种浏览器进行打开运行。观察浏览器标签是否和<title>标签一致。观察网页左上角是否出现“你好世界”。如果出现表示网页正常运行。
5、认识HTML编程工具
HTML是现有可见未来IT技术的主流标准和编程语言，因此现有的软件编程工具基本都支持HTML语言的编写。但是很多软件根据公司底蕴、发展目标和是否收费等标准，为HTML编程所提供的便捷程度是不同的。但初学者所适合的软件包括：Dreamweaver和HBuilder等。我们课程主要使用HBuilder中的一个便捷通用版本，HBuilderX来进行。
HBuilderX编辑器是DCloud全新推出的一款HTML5的Web开发工具，作为HBuilder下一代的全新编辑器。
6、下载并安装HBuilderX软件
搜索HBuilderX或者DCloud，访问DCloud官网网站，打开HBuilderX下载地址，下载最新的HBuilderX软件，Windows标准本，文件大小约为20M。直接解压，运行“HBuilderX.exe”文件。选择一种界面主题即可开始使用HBuilderX编程软件。
现有网站地址为：https://www.dcloud.io/
下载界面为：
图1-1-1 HBuilderX下载页面
7、新建第一个HTML文件
第一步点击菜单栏，文件（F）菜单，选择“新建”，选择“html文件”；
图1-1-2新建html文件
第二步键入文件名称和要保存的位置，在“模板选择”中选择“default”，然后点击创建（N）；
图1-1-3 创建文件
第三步，点击保存，完成HTML文件的创建工作。
8、构建一个文本网页并运行
第一步打开一个新闻网页，选择新闻题目，将其复制到<title>标签中。选择网页内容的文字部分，将其粘贴到<body>标签中，保存。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>《太空一日》入选语文课本</title>
</head>
<body>
“快看啊，他眨眼了，利伟还活着！”这篇文章，入选语文课本了！
《太空一日》入选语文课本。
2003年10月15日
杨利伟搭乘神五载人飞船，成功出征太空，成为首位叩访太空的中国航天员
2021年6月17日，航天员聂海胜、刘伯明、汤洪波先后进入天和核心舱，志着中国人首次进入自己的空间站，这个“家”大得连杨利伟都羡慕了！
</body>
</html>
注意：纯文字，尽可能不带任何格式。
第二步，点击菜单栏的运行（R）中的“运行到浏览器（B）”，选择一个浏览器。我们这里选择Chrome。浏览器标签显示新闻题目，网页中显示内容，即完成实验。
图1-1-4 运行HTML文件
图1-1-5 运行结果
1、新建记事本
2、编写基础框架并运行
3、下载HBuilderX并运行
4、新建HTML网页
5、构建文本网页并运行
1、HTML文件的后缀是html；
2、主要标签的含义；
标签
功能
<html>
表示标签内部为HTML语言
<head>
头部标签，定义网页运行标准，网页题目，设置样式，链接外部文件，以及引用外部语言等。
<body>
体标签，内部定义和显示网页内容。
<meta>
元信息标签，定义网页信息标准的标签。
<title>
题标签，定义浏览器标签中显示的内容。
1、利用记事本手动编写HTML网页并运行？
2、使用HBuilderX构建网页？
发表评论 取消回复