在第一章中，我们初步了解了上网的过程，同时也明白了所谓网页，其本质就是主要用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. Keras 学习之旅（一）

    软件环境(Windows): Visual Studio Anaconda CUDA MinGW-w64 conda install -c anaconda mingw libpython CNTK ...

  2. GIT命令一页纸

    ,配置用户名和邮箱 $ git config --global user.name "Your Name" $ git config --global user.email &qu ...

  3. Bash shell编程的语法知识点(1)

    Bash shell脚本编程知识点如下(初学,不全,欢迎讨论补充): shell简介 脚本的简单介绍 变量和引用 算术运算 交互式编程 选择判断 条件测试 循环 函数 shell简介 shell是一种 ...

  4. docker for windows & dotnet core app

    Step 1: 安装docker for windows Step 2: 从github 上 clone 源代码:https://github.com/dotnet/dotnet-docker-sam ...

  5. CSS 参考手册

    CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...

  6. 进程管理工具Supervisor(一)简介与使用

    Supervisor是用Python开发的一套client/server架构的进程管理程序,能做到开机启动,以daemon进程的方式运行程序,并可以监控进程状态等等. linux进程管理方式有传统的r ...

  7. 关于xml文档使用出现的错误及其解决方法

    在学习xml的时候在运行下面程序时候出现了错误,很是烦恼,翻遍了许多博客都没有找到方法,终于在一个不起眼的地方找到了解决方法,很高兴记录下来 运行的程序如下: import xml.etree.Ele ...

  8. C# 知识回顾 - Lambda

    序 它是第十一个希腊字母,一个拥有失意.无奈.孤独.低调等含义的流行符号,也指示一款称为"半条命"的游戏. 不过,这次我所讲的是 C# 中的 Lambda. 目录 Lambda 简 ...

  9. 微信小程序demo－环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  10. 你不知道的JSON.stringify和JSON.parse

    json是JavaScript 对象表示法(JavaScript Object Notation),是一种简单的数据格式,类似于XML,其格式为名称/值对,数据用逗号隔开,名称必须用双引号括起来.例如 ...