在第一章中，我们初步了解了上网的过程，同时也明白了所谓网页，其本质就是主要用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. MySQL视图,触发器,事务,存储过程,函数

    create triggr triafterinsertcmdlog after insert on cmd_log FOR EACH ROW trigger_body .#NEW : 代表新的记录 ...

  2. Lucene.net(4.8.0) 学习问题记录二: 分词器Analyzer中的TokenStream和AttributeSource

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

  3. LeetCode题目总结（二）

    我的代码在github上,https://github.com/WINTERFELLS/LeetCode-Answers 这里只提供个人的解题思路,不一定是最好的. Problems 21-40 合并 ...

  4. 见招拆招-PostgreSQL中文全文索引效率优化

    * { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...

  5. 20 Zabbix系统性能优化建议

    点击返回:自学Zabbix之路 20 Zabbix系统性能优化建议 1. Zabbix性能变慢的可能表现: zabbix队列有太多被延迟的item,可以通过administration-queue查看 ...

  6. 第十一章：Python の 网络编程基础(三)

    本課主題 多线程的创建和使用 消息队列的介绍 Python 操作 memached 和 redis 实战 本周作业 消息队列的介绍 对列是在内存中创建的,如果整个进程里的程序运行完毕之后会被清空,消息 ...

  7. 记一次电信反射xss的挖掘与利用

    0X0.前言 早上起床,打开手机习惯性刷刷新闻,却发现网络无法连接,本以为是光猫出现了问题,后来发现是忘记续费,欠费了. 在网上充值完之后,等了有将近十分钟,网依旧没恢复.随打了个电话给客服,客服在后 ...

  8. centos 虚拟机桥接

    /etc/sysconfig/network-scripts/ifcfg-eth0 配置文件 vi ifcfg-eth0 DEVICE=eth0HWADDR=00:0C:29:B8:B5:65TYPE ...

  9. easyHOOK socket send recv

    代码比较简单,就不做注释了.  包含一个sockethookinject.DLL 和sockethook.exe 有一点不清楚, SetExclusiveACL可以添加当前线程的hook, 但是eas ...

  10. 【旋转卡壳+凸包】BZOJ1185：[HNOI2007]最小矩形覆盖

    1185: [HNOI2007]最小矩形覆盖 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 1945  Solve ...