大前端设计（H5+小程序+App）

温馨提示：

本文中可能包含表格，在手机屏幕上竖屏显示时，一行内可显示中文字符数量为20个左右，因部分表格单元格内容过长会导致自动换行，从而使得排版不太美观。

另外，本文中可能包含高清图片，在手机屏幕上预览时，我们需要频繁的进行放大缩小操作，这是相当麻烦的一件事情。

因此，如果条件允许，建议您坐在舒适的办公桌前，冲泡一杯咖啡或者茶，在电脑上阅读以获得更好的体验。

1、Hello World!

按照编程界悠久的传统，同时为了测试相关软件系统输出，在初次使用HTML5编程时，先用其基本的特性写一个Hello World!

向C语言和UNIX之父丹尼斯·里奇致敬！

向万维网之父蒂姆·伯纳斯·李致敬！

向苹果公司联合创始人史蒂夫·乔布斯致敬！

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="author" content="AT阿宝哥" />
        <meta name="Keywords" content="万维网,www,HTML,AT阿宝哥" />
        <meta name="Description" content="这是AT阿宝哥的第一张网页。" />

        <title>Hello World</title>
    </head>

    <body bgcolor="deepskyblue">

        <p>
            Hello World...
        </p>

        <p>
            你好，世界...
        </p>

    </body>

</html>

效果：

Hello World!

温馨提示：

如果是初学者，可使用记事本、Notepad++或者Hbulider中的任何一个纯文本编辑器创建名为hello-world.html的文件，复制上述代码并保存，然后用浏览器打开该文件即可预览代码效果。

其中，hello-world为您的文档自定义名称，.html为HTML文档的后缀名，也可以是.htm。而且，我们期望自定义名称应该为英文小写，如果该名称由多个词组成，词与词之间最好使用连字符-分割，这样将减少一些维护代码时不必要的麻烦。

2、核心语法

HTML（HyperText Markup Language ，超文本标记语言），是通过“标记”将说明文字，图形、动画、声音、表格、链接等分散的资源或者信息组织成一个文件，我们将其称之为HTML文档，俗称“网页”，也是构成网站的基础单位。

2.1 、标记

“标记”，也叫标签或元素，由左尖括号<、标记名称、和右尖括号>组成。大多数标记必须成对使用，以表示作用的起始和结束，结束标记需要在标记名称前加斜杠/，这类标记，被称之为实体标记或开标记。如：

<element>   </element>

少数标记，是单个出现的，我们需要在右尖括号>前加入斜杠/以表示结束。这类标记，被称之为空标记或闭标记。而且，W3C建议我们应该在标记名称后和斜杆/前加入至少一个空格以凸显语法。同时，斜杆/和右尖括号>之间不能有任何字符。如：

<element    />

2.2、属性和值

标记拥有诸多属性说明，用于描述标记的特征和强化其功效，可用参数值对元素作进一步的限定。而且，W3C建议我们应该将值包含在一对双引号""内。语法如下：

<element   property=“value”>   </element>

标记的属性值可能有多个，次序不限，其间用空格分隔即可；如：

<element   property1=“value1”    property2=“value2”>   </element>

2.3 、注意事项

标记忽略大小写，即其作用相同，但是，我们一般期望采用全小写形式。

标记，包括尖括号、标记名称、斜杆、属性项等必须使用半角的西文字符，而不能使用全角字符。

3、文档基本结构

3.1、简单结构

一个HTML文档应具备如下基本要求：

文档开头第一行使用<!DOCTYPE>定义文档类型，该标记告知浏览器文档所使用的 HTML 规范。值html声明该文档采用HTML5规范。
<html>和</html>这组标记告知浏览器这是一个 HTML 文档。且文档以<html>开始，以</html>结束。
HTML文档由两部分组成：头部和主体。

头部用于定义文档的元信息，以<head>开始，以</head>结束。该部分不作为内容来显示，但影响网页显示的效果。
主体用于定义文档的内容，以<body>开始，以</body>结束。

<meta>标记可提供有关页面的元信息，用于告知浏览器和搜索引擎文档的关键信息。

charset属性描述文档所采用的字符集，其值如GB2312代表简体汉字，Big5代表繁体汉字，utf-8是Unicode字符集，即万国码。建议使用utf-8，这样，对全球多种语言均支持，否则，页面内容可能会出现乱码。
name属性描述文档的可选关键信息，如作者，关键字列表和页面描述等。

<title>标记定义文档的标题，且以<title>开始，以<title>结束，该组标记只能在文档头部出现一次。标题内容会显示在浏览器的标题栏或者标签栏，也可能出现在被用户在搜索引擎检索到的结果列表中。
<body>标记内可写入您期望用户看到的正文内容。如文字，图片，音频视频和表单等等，具体看场景需要。

有时候，文档的内容可能过于冗长，我们往往需要使用<h1>到<h6>标记创建文档的多级标题，效果类似MS Word中的大纲，这将有利于我们构建文档内容清晰的语义结构。

有时候，文档内容在浏览器的呈现效果过于信息密集，不利于在视觉上区分内容的逻辑界限，我们则可以使用<hr />标记添加水平分割线，以缓和用户在查看时的焦虑感，从而提升用户体验。

有时候，我们期望在页面内实现换行效果，可以使用<br />标记，因为代码中的换行是被浏览器直接忽略的。

代码示例：


<!DOCTYPE html>
<html>
    <head>
        
        <!-- 字符集：utf-8,GB2312 ，Big5-->
        <meta charset="utf-8">
        
        <!-- 作者：可选-->
        <meta name="author" content="AT阿宝哥" />
        
        <!-- 关键字列表：可选-->
        <meta name="Keywords" content="HTML,XML,WWW,超文本标记语言,可扩展标记语言,万维网"/>
        
        <!-- 页面描述：可选-->
        <meta name="Description" content="该文档演示了HTML文档的基本结构。"/>

        <!-- 文档标题-->
        <title>文档结构</title>
        
    </head>
    <body bgcolor="deepskyblue">
        
        <!-- 多级标题：可选-->
        <h1>一级标题</h1>
        
        <h2>二级标题</h2>
        
        <h3>三级标题</h3>
        
        <h4>四级标题</h4>
        
        <h5>五级标题</h5>
        
        <h6>六级标题</h6>
        
        <!-- 水平线：可选-->
        <hr />
    
        <!-- 文档正文：可选-->
        <p>文档正文...</p>
        
        <p>
            用于换行的标记 <br /> 也是可选的...
        </p>
        
    </body>
</html>

效果：

图片.png

3.2、复杂结构

大多数主流站点，如百度、阿里、腾讯、网易、新浪和京东等等，其页面布局均为“上中下”结构，故我们可以使用<div>标记将页面主体body划分为多个物理区域，这将有利于我们设计清晰的文档布局。这好比我们将房子分割为走廊、卫生间、厨房、客厅、卧室和阳台一样，每个房间都有其主要的功用。

页面顶部一般是导航区域，罗列出该网站有哪些信息和功能的分类链接。如：

页面顶部

页面正文部分一般是期望用户看到和可操作的内容。如：

页面正文

页面底部一般是关于网站所有者的版权声明和非重要内容的链接，如：

页面底部

另外，如今复杂的网页中可不单单有HTML代码，于是，设计者们约定HTML仅仅描述文档的结构，CSS用于美化元素，JavaScript用于增强页面的交互性。

代码示例：


<!DOCTYPE html>
<html>
    <head>
        
        <!-- 字符集：utf-8,GB2312 ，Big5-->
        <meta charset="utf-8">
        
        <!-- 作者：可选-->
        <meta name="author" content="AT阿宝哥" />
        
        <!-- 关键字列表：可选-->
        <meta name="Keywords" content="HTML,XML,WWW,超文本标记语言,可扩展标记语言,万维网"/>
        
        <!-- 页面描述：可选-->
        <meta name="Description" content="该文档演示了HTML文档的基本结构。"/>

        <!-- 文档标题-->
        <title>文档结构</title>
        
        <!-- 内部样式块：可选-->
        <style>
            /* 注意：style标记内均为CSS注释及选择器相关的代码 */
            
            body{
                text-align: center;
            }
            
            /*页面顶部样式*/
            #header{
                background-color: gray;
                height: 60px; 
                
            }
            
            /*页面正文样式*/
            #content{
                background-color: lightgreen;
                height: 300px; 
            }
            
            /*页面底部样式*/
            #footer{
                background-color: lightgray;
                height: 90px; 
            }
        </style>
        
        <!-- 头部脚本块：可选-->
        <script type="text/javascript">
            //JS
        </script>
    </head>
    <body bgcolor="deepskyblue">
    
        <!-- 页面顶部：此处仅作参考-->
        <div id="header">
            <div>
                <a href="">栏目1</a>
                <a href="">栏目2</a>
                <a href="">栏目2</a>
            </div>
        </div>
        
        <!-- 页面正文：此处仅作参考-->
        <div id="content">
        正文部分
        </div>
        
        <!-- 页面底部：此处仅作参考-->
        <div  id="footer">
            <div>
                <p>公司：Company</p>
                <p>电话：8888888</p>
            </div>
        </div>
        
    </body>
</html>

效果：

图片.png

如果您不能静下心来，不精心雕琢和打造自己的知识系统和技能体系，沉迷于点石成金亦或是拔苗助长等等的奇技淫巧之间，那都是事倍功半的瞎忙活！

古往今来，学习，没有捷径，除非出现科幻般的脑机互联......但有拙法，那就是书山有路勤为径，学海无涯苦作舟！更何况，日新月异知识爆炸的今天，态度犹豫和停止学习，那么等待您的，唯有丛林淘汰法则。

书，能读完吗？肯定不能，汗牛充栋！
书，能学完吗？绝对可以，得读经典。

好好学习，天天向上！继续下一章...

《HTML5编程自学与面试指南》03-01：第一张网页