• 写给大家的编程书(2)


    浏览器,昵称世界之窗,是上篇提到的标准和规范的一部分。
    那个时候,火狐还叫NetScape(网景)这个名字,它将在以后的几年和IE拼得你死我活。那个时候,Google还没有出生,更别提Chrome了。

    浏览器之所以是标准和规范中的一部分,是因为浏览器直接实现了许多标准和规范,譬如展现一个表格、一个按钮、一幅居中的图片。
    标准和规范的核心内容之一就是HTML。
    HTML是一种通用标记语言,标记语言可以这样通俗地解释:它主要包含两个部分即我是什么,我的内容是什么。通用意味着HTML与平台和操作系统无关,无论在Mac、PC还是平板电脑上都能被解析和展现。
    随意打开一个网页,单击右键查看源文件你就能看到冗长的HTML。

    ”我是什么“通过标签——Tag定义,标签用<>表示,所有标签基本都是成对出现的:比如<html>...</html>。以"</"打头的标签代表标签的结束。
    "..."是标签中的内容,即“我的内容是什么”。

    例如<h1>(heading NO.1)代表一个标题(<h1><h2><h3><h4>...都是同一个家族里的标签,标题的字号大小随数字的增大减小,h1最大),现在你需要在空白的网页里写下一个大大的标题——“鸽子的晚餐”。

    我们遵照上面的规则进行:

    <h1>(我是一个标题,这个是标签定义的开始)
        鸽子的晚餐(我是标题里的内容)
    </h1>(我说完了,标签定义结束了)

    源码:
    <h1>
        鸽子的晚餐
    </h1>
    p.s <h1>后的换行,鸽子前的空格锁紧(一般3到4个空格)都是约定俗成的,能让“代码”的阅读者一眼就可以区分标签定义和标签内容,当然写作:
    <h1>鸽子的晚餐</h1>
    也可以,而且这种写法更为常见。
    将源码复制到写字板中,“另存为”为html类型。打开文件,就可以看到如下的效果:



    为了充分说明标记语言中“标记”的特性,我们请出标题系列的其他兄弟:<h2><h3><h4>,仍然按照之前的规则。

    源码:
    <h1>
    	鸽子的晚餐
    </h1>
    <h2>
    	鸽子的晚餐
    </h2>
    <h3>
    	鸽子的晚餐
    </h3>
    <h4>
    	鸽子的晚餐
    </h4>
    

    效果:



    我们发现同样内容的tag,其展现形式是通过tag也就是标签的类型“标记”的,展现通过浏览器来完成,也就是上文里提到的解析过程:确实达到了精简传输信息量的目的(比如h1包含了字体大小,展现方法等很多信息)。
    然后再提供一些tag:<ol>(ordered list)是有序的列表,<li>是列表中的每个项。

    源码:
    <h1>
    	鸽子的晚餐
    </h1>
    <ol>
    	<li>
    		香辣鸽子
    	</li>
    	<li>
    		红烧鸽子
    	</li>
    	<li>
    		原味炖鸽子
    	</li>
    </ol>

    效果:



    上面的结构中已经出现了一个标签包含其他标签们的情况,<ol>的内容是3个<li>,第一个<li>的内容是“香辣鸽子“。先卖一个关子,后面再了解这种嵌套结构。
    想了解更多的标签,可以参看W3CSchool的教程, http://www.w3school.com.cn/html5/html5_reference.asp。这部分纯粹是记忆活,用多了自然可以信手拈来。

    “编写HTML是否是在编程”(或者说HTML是否是程序设计语言)这个问题一直没有定论,笔者倾向认为“编写HTML并非在编程”,具体原因先记在账本上,稍后按揭。不过可以片面地解释一下,编程是较为理性的;用HTML搭建页面,如艺术创作一般是较为感性的。

    待续


  • 相关阅读:
    C# 单点登录
    长度12的数组,要求对数据分为3组,每组数据对应位置的数字为前几位的和,并返回12位数组
    react项目初始化
    vue 过滤器的使用(解决forEach遇到的问题)
    nuxt中less使用
    vue项目less 使用
    Webpack中的sourceMap配置
    webpack 同一文件打包两次生成两个文件
    webpack---图片打包前和打包后名称一致的配置
    The computed property "userName" is already defined in data.
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3395440.html
Copyright © 2020-2023  润新知