HTML 实战生成一张页面

1 HTML简介

1.1 解释

HTML是用来描述网页的一种语言。

• HTML即超文本标记语言(Hyper Text Markup Language)；
• HTML不是一种编程语言，而是一种标记语言(markup language)；
• 标记语言是一套标记标签(markup tag)；
• HTML使用标记标签来描述网页。

1.2 标签

HTML标记标签通常被称为HTML标签(HTML tag)。

• HTML标签是由尖括号包围的关键词，比如<html>；
• HTML标签通常是成对出现的，比如<b>和</b>；
• 标签对中的第一个标签是开始标签，第二个标签是结束标签；
• 开始和结束标签也被称为开放标签和闭合标签。

1.3 文档

HTML文档=网页。Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

• HTML文档描述网页；
• HTML文档包含HTML标签和纯文本；
• HTML文档也被称为网页。

2 代码编辑器

代码编辑器主要分两种：IDE（集成开发环境）和轻量编辑器。

2.1 IDE

　　IDE是用于管理整个项目具有强大功能的编辑器。顾名思义，它不仅仅是一个编辑器，而且还是个完整的开发环境。

　　IDE 加载项目（通常包含很多文件），并且允许在不同文件之间切换。IDE 还提供基于整个项目（不仅仅是打开的文件）的自动补全功能，集成版本控制（如git）、集成测试环境等一些其他“项目层面”的东西。

2.1.1 WebStorm

　　WebStorm是jetbrains公司旗下一款JavaScript开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

2.1.2 HBuilder

　　HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，它的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。

2.2 轻量编辑器

　　轻量编辑器没有IDE功能那么强大，但是他们一般很快、优雅而且简单,主要用于立即打开编辑一个文件。

　　与IDE最大的区别：IDE一般在项目中使用，这也就意味着在开启的时候要加载很多数据，如果需要的话，在使用的过程中还会分析项目的结构等。如果我们只需要编辑一个文件，那么轻量编辑器会更快。

　　实际上，轻量编辑器一般都有各种各样的插件，这些插件可以做目录级（directory-level）的语法分析和补全代码。所以轻量编辑器和IDE也没有严格的界限。

2.2.1 Visual Studio Code

　　Microsoft在2015年Build开发者大会上正式宣布了Visual Studio Code 项目：一个运行于Mac OS X、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。

2.2.2 Sublime Text

　　Sublime Text是一个代码编辑器，也是HTML和散文先进的文本编辑器，它最初被设计为一个具有丰富扩展功能的Vim。

　　Sublime Text是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

3. 浏览器内核

浏览器内核：渲染引擎、JS引擎。

　　渲染引擎：负责取得网页的内容(HTML、XML、图像等等)，整理讯息（例如加入CSS等），以及计算网页的显示方式，然后输出至显示器或打印机。

　　JS引擎：解析Javascript语言，执行JavaScript语言来实现网页的动态效果。

4. HTML标签语义化

标签语义化：标签的含义。即一眼看去，就知道哪个是重点，结构是什么，知道每块的内容是干撒的。

遵循的原则：先确定语义的HTML，再选合适的CSS。核心：合适的地方给一个最为合理的标签。

为什么要有语义化标签：

　　1、方便代码的阅读和维护

　　2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

　　3、使用语义化标签会具有更好地搜索引擎优化

5. HTML属性

属性为 HTML 元素提供附加信息。HTML 标签可以拥有属性,属性提供了有关HTML元素的更多信息。

属性：以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

　　1、使用小写属性:属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值，而新版本的 (X)HTML 要求使用小写属性。

　　2、始终为属性值加引号:属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

　　3、HTML 属性参考手册

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

6. HTML生成一个页面

需求1：如下页面，使用工具visual studio code编写一张HTML页面。内容主要涉及文本框、标题标签、input标签、form标签、下拉框、无序列表、表单域、相对路径等HTML的基本内容编写完成。

本次实现都是HTML很基础的内容，具体代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" width="600" cellspacing="0" cellpadding="0" align="center">
        <caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" checked="checked" name="sex"/>
                <img src="综合案例/images/man.jpg">男
                <input type="radio" name="sex"/>
                <img src="综合案例/images/women.jpg">女
            </td>
        </tr>

        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>请选择年</option>
                    <option selected="selected">2020</option>
                    <option>2021</option>
                </select>

                <select>
                    <option>请选择月</option>
                    <option>1</option>
                    <option>2</option>
                </select>

                <select>
                    <option>请选择日</option>
                    <option>1</option>
                    <option>2</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京" maxlength="3"/></td>
        </tr>

        <tr>
            <td>婚姻状况    </td>
            <td>
                <input type="radio" name="married" />未婚
                <input type="radio" name="married" />离婚
                <input type="radio" name="married" />丧偶
            </td>
        </tr>

        <tr>
            <td>学历</td>
            <td>
                <input type="text"/>
            </td>
        </tr>

        <tr>
            <td>月薪</td>
            <td>
                <input type="text"/>
            </td>
        </tr>

        <tr>
            <td>手机号</td>
            <td>
                <input type="text"/>
            </td>
        </tr>

        <tr>
            <td>昵称</td>
            <td>
                <input type="text"/>
            </td>
        </tr>

        <tr>
            <td>喜欢的类型 </td>
            <td>
                <input type="checkbox" name="love"/>妩媚
                <input type="checkbox" name="love" />柔美
                <input type="checkbox" name="love" />可爱
                <input type="checkbox" name="love" />小鲜肉
                <input type="checkbox" name="love" />型男
                <input type="checkbox" name="love" />气质
            </td>

        </tr>

        <tr>
            <td>自我介绍</td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="image" src="btn.png"/>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="checkbox"  />我同意注册条款和会员加入标准
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <ul>
                    <h4>我承诺</h4>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>

    </table>
</body>
</html>

需求2：使用form表单生成用户名、密码的提交。

本次实现都是HTML很基础的内容，具体代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="get">
        用户名：<input type="text"/><br />
    <br />
        密码：<input type="password" maxlength="6"/><br />
    <br />
         性别
        <input type="radio" name="sex" checked="checked"/>男
         <input type="radio" name="sex" />女
        <input type="submit" value="提交所填" />
        <input type="reset" value="重新填写" />
     </form>

</body>
</html>