在第一章中，我们初步了解了上网的过程，同时也明白了所谓网页，其本质就是主要用HTML语言所写的一份文档。相信大多数人在了解HTML文件前，最先接触的是利用“记事本”所写的文档或者是利用办公软件“Word”所建的文档，身为初心者的你可能会问，HTML文档与这些文档又有何差别？在回答这个问前，让我们尝试着创建这三种文档。

　　创建我们熟悉的.txt文件，打开它并试着输入文本内容“学而时习之”：

　　创建一个.docx文件，打开并输入文本内容“学而时习之”：

　　

　　好，现在让我们创建今天的主角——HTML文档。尝试着把“记事本”文档和Word文档的后缀名改为“html”：

　　你会发现他们“看上去”都一模一样了，那让我们打开试试：

　　我们可以通过后缀名改变文件类型，当我们将后缀名改为“html”后，实际上已经创建了“HTML文档”。但是改了文档后缀名后，我们发现出现了不同情了。当我们将后缀名为“txt”的文档改为“html”后，双击打开文本内容仍然能够正常显示出来；但是，为什么将Word文档后缀名“docx”改为“html”后，双击后文档却显示一大片乱码呢。使用过Word的人应该都明白，Word文本是带有格式的文本，即我们不仅可以输入文本，同时默认地文本已经自带了格式，如字号字体行距等（当然我们还可以主动给文本内容设置各种格式）。显然地，Word文本区别于“记事本”文档以及“html”文档——我们通常将Word这种自带文本格式的文档成为“格式文本”，而剩余的称为“纯文本”。因为Word文档内还包含关于格式的数据，将其后缀名改为“html”后，这些数据难以解释出来，最终出现了乱码。

　　由上我们可以知道，HTML文档便是纯文本文档。接下来，我将简单介绍HTML文档的主要结构，让我们试着写一个简单的的HTML页面吧!

<html>

<head>

</head>

<body>

</body>

</html>

　　如上图，整个HTML文档其实分为三个部分，包括<html>部,<head>部,<body>部;而带有左右尖括号括起来的部分被叫做标签，标签有开始标签和结束标签之分，结束标签就是在做尖括号后加“/”。一般开始标签和结束标签是成对出现的，他们标记在文本两端，必须要有他们来指明内容的结构。这就是所谓的超文本标记语言，标记两字的意义所在。

　　当我们将记事本文档改为HTML文档后，打开文档我们会发现文档内容能够显示出来，那如果我们想要用HTML语言显示同一文本，又该写下何处，如何写呢？如字面意义所言，文档内容部分，应该是这个网页的躯干，所以我们要将主体文档部分写入<body>部，如下图代码及效果图。

<html>

<head>

</head>

<body>

学而时习之

</body>

</html>

　　那么当我们想要说明一些不属于文档内容却有关于网页的信息时自然就该写进头部了。让我们在<head>部试着引入<title>标签吧！

<html>

<head>

   <title>时习</title>

</head>

<body>

学而时习之

</body>

</html>

　　和上图效果图对比，唯一的差别就在于网页的标题变了。这时我们并没有改变网页的文档内容，但是通过在<head>部写入<title>,我们改变了网页的标题。由此我们可以做一个今天的小总结了，作为纯文本文档的HTML文档由三个部分组成：<html>部,<head>部,<body>部；其中<body>部主要写网页文档内容，<head>部则写网页相关的信息；此外，必须要有标签指明内容的结构，标签一般有开始和结束两种。在练习过程中，你也许会发现少打了几个字或者"/"也能照常显示文档，那是因为HTML是较为宽容的语言，浏览器也会采用宽容模式，尽量将其解释并显示出来。但是如果想要减少错误，就应该从一开始就要有严谨的态度，养成良好的编程习惯。

　　今天我们开始接触了HTML文档并且亲自尝试了HTML语言编写自己的网页，同时也了解了标签。学习Web前端，首先我们要学超文本标记语言（HTML），这意味着我们以后将遇到更多标签，而当我们掌握得越多，我们将会对HTML理解得更深，同时，也希望你和我一样，能够在遵守一定规则下体会到略带“设计感”的乐趣。

web前端学习（2）：开始编写HTML的更多相关文章

  1. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  2. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  5. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  6. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  7. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

  8. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  9. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

  10. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

随机推荐

  1. Python学习_02_数字和运算

    python具有强大的科学运算功能,python由于支持更加强大的面向对象和动态特性,相比R语言.matlab.mathmatic等传统的科学计算工具具有非常大的优势. Python的数字 pytho ...

  2. java多线程(三)－Executors实现的几种线程池以及Callable

    从java5开始,类库中引入了很多新的管理调度线程的API,最常用的就是Executor(执行器)框架.Executor帮助程序员管理Thread对象,简化了并发编程,它其实就是在 提供了一个中间层, ...

  3. 程序包管理rpm、yum与简单编译安装程序

    Linux程序包管理 Linux中软件的安装主要有两种形式:一种是直接下载源代码包自行编译后安装,另一种直接获取rpm软件包进行安装. 程序的组成部分: 二进制程序:程序的主体文件,比如我们运行一个l ...

  4. 【bird-front】全自动数据表格组件bird-grid

    bird-grid是bird-front前端框架中实现的全自动数据表格组件.组件内部处理数据加载.分页.排序.查询.新增.编辑等一系列操作.让业务表格的开发从繁复的增删查改中脱离出来,编码简洁却又功能 ...

  5. 配置apache的文件访问路径

    本例中,我们让apache访问"F:/testObject/php"路径: 一.修改http.conf文件配置 访问路径:"apache/conf/httpd.conf& ...

  6. Hyperledger Fabric 1.0 从零开始（九）——Fabric多节点集群生产启动

    7:Fabric多节点集群生产启动 7.1.多节点服务器配置 在生产环境上,我们沿用4.1.配置说明中的服务器各节点配置方案. 我们申请了五台生产服务器,其中四台服务器运行peer节点,另外一台服务器 ...

  7. 【数论】洛谷P1372又是毕业季

    题目背景 "叮铃铃铃",随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业 ...

  8. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  9. JSP中的“小饼干”Cookie，用来存储数组的方式（下方已String类型的数组为例：）

    1.Cookie常用方法中,存储数据的方式: Cookie cookie = new Cookie("key","Value"); response.addCo ...

  10. 《精通Linux C编程》1.3Linux系统的常用命令-笔记

    [toc] 1.3.1了解Shell Linux常用命令的运行环境就是Shell,它是一种命令解析器,在用户和操作系统之间提供了一个交互接口. 用户在命令行输入命令,然后Shell对该命令进行解析并将 ...