HTML+CSS趣码快乐编程

　　 1.1认识**个朋友——HTML的概念 1. 熟练掌握HTML的概念。 2. 理解HTML与其他编程语言的区别。 3. 了解HTML的发展及常用浏览器。 指点迷津 HTML的基本概念 HTML（Hyper Text Markup Language），中文翻译为“超文本标记语言”。它是用来描述网页的一种语言（如图1-1）。我们平常看到的网页就是工程师编写的HTML文件的呈现。 图1-1HTML文件 “超文本”是指页面内不仅包含文本内容，还可以包含图片、链接，甚至音乐、程序等非文字元素。不仅如此，它还可以从一个文件跳转到另一个文件，功能强大。 一个HTML文件不仅包含文本内容，还包含一些标记（即标签，在第2章进行具体介绍），标记语言要通过浏览器帮助解析才能*终实现完美的网页效果。 需要大家牢记的一点是HTML文件的后缀名是“.html”或者“.htm”。 HTML与其他编程语言的区别 常见的计算机语言主要有三大类：编译语言、标记语言和脚本语言。 编译语言：例如C、C++、Java等，它们在程序执行之前需要一个专门的编译过程，运行时直接使用编译结果即可。编译语言的优点是程序执行效率高，缺点是非常依赖编译器，跨平台性较差。 标记语言：例如HTML，是一种将文本以及文本相关的其他信息结合起来，通过很多标记（标签）展现出关于文档结构和数据处理细节的电脑文字编码。标记语言的优点是可阅读性强，易于学习。 脚本语言：例如JavaScript、PHP、Python等。脚本语言介于标记语言和编译语言之间，不需要编译，可以直接使用，由解释器负责解释。脚本语言比编译语言的开发速度快，但脚本语言往往不够全面。 HTML的发展历程 HTML一直处于高速发展之中，第1版超文本标记语言（并非标准）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。而后经历了HTML2.0版本、HTML3.2版本、HTML4.0版本、HTML4.01版本等调整，在2014年10月28日，HTML5发布。它是W3C（万维网联盟）推荐标准，也是目前使用*广泛的版本。 初识浏览器 浏览器是网页运行的平台，我们平常看到的网页都是使用浏览器进行阅读的。 浏览器的工作原理：浏览器是HTML的解析器，解析HTML文件，然后在浏览器窗口中展示解析页面。 目前支持HTML5的常用浏览器（图1-2）有IE、火狐（Firefox）、谷歌（Chrome）、苹果（Safari）和欧朋（Opera）等。 图1-2常用浏览器图标 通关秘籍 1.HTML是超文本标记语言，它不仅包含文本内容，还可以包含图片、链接、音乐等非文字元素。 2.HTML的作用是用标签来描述网页，让网页内容在浏览器中展示出来；HTML文件的后缀名是.html或者.htm。 3.目前使用*广泛的是HTML5版本，并且仍然在不断完善中。 大显身手 编程基本功 1.（单选题）HTML是什么意思？（） A.高级文本语言 B.超文本标记语言 C.扩展标记语言 D.图形化标记语言 2.（单选题）浏览器对于HTML文档的作用是什么？（） A.浏览器用于创建HTML文档 B.浏览器用于查看HTML文档 C.浏览器用于修改HTML文档 D.浏览器用于删除HTML文档 3.（单选题）下面关于HTML说法错误的是（）。 A.HTML是一种标记语言 B.HTML可以控制页面和内容的外观 C.HTML文档总是静态的 D.HTML文档是超文本文档 4.（简答题）请简单描述一下HTML的作用。 1.2HTML的骨架结构 1. 熟练掌握HTML的基本结构及语法。 2. 学会使用编辑器提高代码编写效率。 指点迷津 HTML的基本结构与语法 轻松学 生活中盖房子需要先打地基再搭建结构，编写HTML文件也要遵循同样的道理。常见的网页文件基本都由图1-3中的三对标签构成骨架结构。 图1-3HTML的基本结构标签 HTML的基本语法如下： ...：这对标签告诉浏览器“我是html文件”，书写的代码都要放在这对标签的中间。 ...：head是头部的意思，头部中提供了关于网页的信息。 ...：body是身体的意思，这里是指网页的主体，在网页中展示的内容都写在这对标签的中间。 轻松练 应用HTML的基本结构，在浏览器中展示一句话：“欢迎来到趣码星球！！”，并将网页的标题设置为“Hi, go code！”，如图1-4所示。 图1-4实现效果图 思维导学 若要实现图1-4的效果，我们需要在书写代码时分4步进行： 第1步 打开记事本，保存时修改文件后缀名为.html，“保存类型”选择“所有文件”。 第2步 写出HTML的基本结构。 第3步 书写网页标题，网页标题需要写在head标签中。 这里用到了标签，这个标签用来设置网页的标题。 第4步 书写网页的主体内容，需要写在body标签中。 *后，用浏览器打开这个文件，效果即如图1-4所示。 编辑器的下载及使用 编辑器是辅助编写代码的一种工具软件，它能较大程度地提高代码的编写效率。比如，原来需要输入十多个字母来编写代码，在编辑器中，输入两三个字母就可以完成代码的自动提示，既节约了时间，又避免了代码拼写错误等问题，降低了错误出现的频率。接下来将会介绍我们编写代码可使用的编辑器：VS Code。 VS Code编辑器的介绍 VS Code的全称是Visual Studio Code，是微软公司推出的一款免费轻量级编辑器，体积小，打开文件速度快，还可以根据需求安装各种插件。 VS Code编辑器的下载及安装方法 下载地址 在浏览器地址栏里输入https://code.visualstudio.com（VSCode编辑器的官方地址），进入页面后，下载区域如图1-5所示。 图1-5VS Code编辑器下载页面 选择下载版本 单击图1-5中右上角的Download（下载按钮），便可进入下载页面，进行对应的版本选择（如图1-6），根据自己的电脑系统选择下载版本。以Windows系统为例，下载Windows版本（图1-6左侧），单击“Windows”后会弹出一个下载窗口，选择合适的存储位置后，下载即可。 图1-6VS Code版本选择页面 安装流程 下载完成后双击打开安装程序，选择“我接受协议”，如图1-7所示。 图1-7安装步骤 接受协议后一直单击“下一步”，直到安装完毕。安装完成后桌面上会出现一个图标，如图1-8所示。 图1-8VS Code图标 双击图标打开后出现主界面，如图1-9所示。 图1-9VS Code主界面 注意 VS Code版本在不断更新，下载安装后的界面可能存在一定差异，但基本功能一致。 VS Code的使用方法 单击图1-10中自定义部分红框标注的“JavaScript”和“Sublime”，安装JavaScript插件和Sublime快捷键插件。这两个插件大家一定别忘了安装，否则会影响后续操作。 图1-10插件安装 创建文件 编写HTML代码需要HTML文件，HTML文件的后缀名必须为.html或者.htm。那么，在编辑器中如何创建HTML文件呢？ 创建文件有两种方式： 1.单击菜单栏左上角的“文件”按钮，会弹出一个对话框，单击**个“新建文件”即可创建文件。 2.点击“开始”下的“新建文件”也可以创建文件，如图1-11所示。 图1-11创建文件 保存文件 创建完成后会进入一个名为Untitled-1的空文本页面，在该页面下，按下Ctrl+S快捷键进行保存，会弹出如图1-12所示的界面，用于保存并修改文件类型。 图1-12文件类型保存 注意 图1-12中的红色框是修改文件名区域，文件名*好用英文（平常的小练习、小案例可以使用中文），同时必须保证文件后缀名是.html。 快速生成HTML文档结构 修改完文件名后，接着在页面中输入“!”（必须是英文输入法下的感叹号，代码中禁止出现任何中文输入法标点符号）,如图1-13所示。 图1-13快速生成HTML结构 在图1-13中，小红框左上角出现了一个类似数字5的图标，这就是HTML文档的标识，说明该文件是HTML文档。输入感叹号（或输入html:5）后，按下键盘上的Tab键，就会生成HTML基本文档结构，如图1-14所示。 图1-14HTML基本文档结构 以上就是VS Code创建HTML文档的所有流程。 VS Code常用快捷键 下面我们来认识一下VS Code编辑器的常用快捷键，详见下表。 VS Code编辑器的常用快捷键 常用快捷键组合 作用 Ctrl+S 快速保存 Ctrl+Z 返回上一次操作 Ctrl+Shift+S 快速复制 通关秘籍 1.body标签存放的是网页的主体内容。 2.head标签存放的是网页的头部内容。 3.title标签用来设置网页的标题。 4.编辑器中有很多快捷键可以提高代码的编写速度。例如生成HTML的基本文档结构可以输入“!”后，再按下Tab键，也可以输入html:5再按下Tab键。 大显身手 一、编程基本功 1.（单选题）下列哪个标签用于表示HTML文档的结束？（） A. B. C. D. 2.（单选题）关于下面语句A和B，说法正确的是（）。 语句A：HTML文档一般都会包括“头”和“主体”两部分。 语句B：HTML文档的扩展名为.htm或.html。 A. 两句都对 B. 两句都错 C. 只有A对 D. 只有B对 3.（单选题）可以在下列哪个HTML元素中放置网页标题？（） A. B. C. D. 4. (多选题）使用浏览器运行下面这段代码，下列说法正确的是（）。 A. 网页的标题是“欢迎学习 HTML” B. 网页的标题是“我的**个HTML文档” C. 网页的内容是“欢迎学习 HTML” D. 网页的内容是“我的**个HTML文档” 5．（简答题）本节你学会使用哪个编辑器？说一说如何使用编辑器生成HTML基本结构。 二、转动编程大脑 自己动手完成一个HTML页面，要求在页面中简单介绍你自己（不少于100字），并将网页标题设置为自己的名字。（样例如下） 1.3初识标签 1. 了解标签的定义，熟练掌握单双标签。 2. 掌握标签之间的嵌套及并列关系。 指点迷津 前面提到的、、都是标签。标签就是放在标签符“”中表示某个功能的编码命令，也称为HTML标签或HTML元素。标签可以简单地分为双标签和单标签两大类。 双标签与单标签的基本结构 轻松学 双标签 语法：内容。