在第一章中，我们初步了解了上网的过程，同时也明白了所谓网页，其本质就是主要用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科学计算_numpy_ndarray

    ndarray:n-dimensional array object,即多维数组对象,是python自带的array对象的扩展,array对象和list对象的区别是array对象的每一个元素都是数值, ...

  2. Head First设计模式之命令模式

    一.定义 定义:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化.对请求排队或记录请求日志,以及支持可撤消的操作. 主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关 ...

  3. vue：简单方法替代vuex或者bus

    兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点. vuex: 适合数据量大,并且函数集中处理. bus:适合数据虽少,却不得不用的时候,维护困难. root:这儿指将值挂在root组件上,需要 ...

  4. 中国孩子的micro:bit：TurnipBit自制小乐器教程实例

    孩子们是最贪玩的也是最聪明的,因此在过去的数年中,市面上出现了不少寓教于乐的理工科知识(STEM)学习新方法.如今这类产品中又有了一名新成员,TPYBoard重磅推出一款针对小白.中小学生的可编程计算 ...

  5. 固定底部导航菜单-续集（BottomMenu-移动端V3.0）

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  6. iOS SQLite解密之SQLCipher

    开门见山,本文主要讲在Mac下使用SQLCipher编译解密数据库文件方法,iOS项目集成SQLCipher自己可以百度,网上帖子很多. 官方集成文档:https://www.zetetic.net/ ...

  7. centos设置程序开机自启或禁止加载

    1. 可以直接把需要启动的脚本写到/etc/rc.d/rc.local文件里,例如 vim /etc/rc.d/rc.local /usr/local/apache/bin/apachectl sta ...

  8. 微信小程序在开发中遇到的问题与解决方法

    1.  √ 这种错误多半是该js文件中没有Page这个方法,就算是空的js也必须要把Page({ })写上去 2.  √ 这种错误多半是该json文件没有内容,所以必须要加上{ },就算是空内容也要加 ...

  9. React Native学习（二）—— 开始一个项目

    本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...

  10. file中private_data

    这个是Linux下连接VFS文件系统框架和不同文件/文件系统底层实现之间的一个核心数据结构,虽然它只是一个指针,但是一个指针可以解决所有问题,有了它,妈妈再也不用担心我的学习.我们回想一下用户态线程的 ...