• web前端学习(2):开始编写HTML


       在第一章中,我们初步了解了上网的过程,同时也明白了所谓网页,其本质就是主要用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理解得更深,同时,也希望你和我一样,能够在遵守一定规则下体会到略带“设计感”的乐趣。

  • 相关阅读:
    Selenium webdriver 操作日历控件
    selenuim-webdriver注解之@FindBy、@FindBys、@FindAll的区别
    配置 mybatis的 log4j.properties
    查询在一个数据库中某个字段存在于哪些表
    Linux下修改Mysql的用户(root)的密码
    MySQL——修改root密码的4种方法(以windows为例)
    报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost
    C++中的static 成员变量的一些注意点
    #pragma once与#ifndef的区别
    C++类中的成员函数和构造函数为模板函数时的调用方法
  • 原文地址:https://www.cnblogs.com/shixizhi/p/8372351.html
Copyright © 2020-2023  润新知