在第一章中，我们初步了解了上网的过程，同时也明白了所谓网页，其本质就是主要用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. c=$[$c%5]到let c=$c%5的转换

    刚学shell不知道怎么转换,现在明白了一点点 ,记录下   变成加法就好明白了     c=$[$c+5] let c=$c+5 #变量c等于C加上5后在赋值给自身 let c+=5 #就可以这样表 ...

  2. Jenkins 学习笔记（三）：我们的JAVA 项目是这么发布的

    发布拓扑 1. 拓扑图 2. 流程说明: Git 插件从 Git Server 上面拉取源代码. Maven 插件将源代码安装我们设定的指令进行编译打包,存放于项目的 WorkSpace. Publi ...

  3. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

  4. iOS学习——属性引用self.xx与_xx的区别

    在iOS开发过程中,我们用@proprety声明一个属性后,在代码中我们可以用self.xx与_xx来获取到这个属性.但是一直有一个疑惑,那就是这两个之间有什么区别呢?最初我一直觉得这两个之间没什么区 ...

  5. Hadoop 2.6.0 完全分布式平台搭建

    一.准备软件环境: hadoop-2.6.0.tar.gz CentOS release 6.5 jdk-7u67-linux-x64.tar.gz 网络配置: master1            ...

  6. jsp基础了解

    1.什么是动态页面:    所谓的动态网页,是指跟静态网页相对的一种网页编程技术.静态网页,随着html代码的生成,页面的内容和显示效果就基本上不会发生变化了--除非你修改页面代码.而动态网页则不然, ...

  7. flush table with read lock的轻量级解决方案[原创]

    为什么要使用FTWRL   MySQL dba在日常工作中,数据备份绝对是工作频度最高的工作内容之一.当你使用逻辑方式进行备份(mydumper,mysqldump)或物理方式进行备份(percona ...

  8. 【转载】在Linux下，一个文件也有三种时间，分别是：访问时间、修改时间、状态改动时间

    在windows下,一个文件有:创建时间.修改时间.访问时间.而在Linux下,一个文件也有三种时间,分别是:访问时间.修改时间.状态改动时间. 两者有此不同,在Linux下没有创建时间的概念,也就是 ...

  9. [wiki]CDN

    内容分发网 内容分发网络(Content delivery network或Content distribution network,缩写:CDN)是指一种通过互联网互相连接的电脑网络系统,利用最靠近 ...

  10. Linux-RED HAT6.8扩容

    项目快上线了,在准生产测试,遇到了一个问题,那就是Linux硬盘资源不够用了,这个问题是当时在装系统的时候,应该装机人员的失误造成的,具体如下: 这个报错原因就是硬盘资源不够用了,使用命令:df  - ...