vlambda博客
学习文章列表

王海涛，杨佳强

图1 Hbuilder官网

谷歌浏览器或者火狐浏览器。制作出的网页将在浏览器上检验制作的效果。

谷歌浏览器：https://www.google.cn/intl/zh-CN/chrome/

火狐浏览器：https://www.firefox.com.cn/

图2 谷歌浏览器官网

图3 火狐浏览器官网

在软件安装完毕后，就可进入到HTML的正式学习了。你问IE行不行，我说最好还是这俩。

HTML的代码书写规范：

1、html5代码规范非常宽松。

2、html5标签，属性可以大写也可以小写还可以混写。

3、在html5中，你可以不用关闭标签。

4、所有代码全部使用小写。

5、所有标签都要正常关闭。

6、所有代码必须在英文半角状态输入（最重要）

7、必须写在最前面。

要画出一个人的外形，要有头，有身子，有五官，这还不行，没有神韵啊。得给这画补充信息，让人物有神态才跃然纸上，让欣赏的人能够揣测到你要干什么。这写代码也一样，有讲究。上来第一步，要说明来意吧，我要干什么，正所谓不兴无名之师。这样你就得老实交代来意，你告诉平台，“你大爷今天要写HTML文件要做网页”，平台一听“哦，这么回事”，得新建一个文件吧，类型是什么呢？HTML！

图4 新建HTML文件

新建完文件，平台知道你的来意了，给你拿来一大张白纸，说“行，你自由发挥吧”，你一看这都是啥啊？有点傻眼，不急，且听我娓娓道来。

图5 新建的HTML文件

图6 浏览器内运行

点击浏览器内运行，下拉菜单有可选的浏览器，我们默认用第一个Chrome.

图7 一个空白网页

图8 元素

展开body标签中的内容。

图9 实际内容

图9中密密麻麻什么标签都有，有超链接，有属性名，这些都是后续需要我们学习的。

下面将分几个部分对实际网页的制作进行浅近的探索。

在HTML中使用“Ctrl + /”可以实现对文档的快速注释。

在文档头部当中可以实现设置关键字、描述网页、页面跳转和定义样式等功能。

下面的图10、图11、图12是修改了一部分代码而实现的。学习网页的过程也是一个实践到认识，再从认识到实践的过程。

代码中要善于注释，说明修改了哪里，作用是什么，和写作文类似。必要时说明“5W1H”，所谓六合分析法。

图10 HTML代码

图11 实际网页

图12 开发者调试

图13 超链接

_parent表示把文档载入父窗口或包含了超链接引用的框架的框架集

图14网页

点击蓝色的东北电力大学字样，即可进入到学校官网。

图15 学校官网

网页制作里最常用的标签是<div></div>,<span></span>在使用css的情况下，能够使得网页内容丰富多彩。

图16 引入一张图片

<div style="width: 1100px;background: antiquewhite;margin: 0 auto;">

<img width="100%"/>

div>

表示宽度为1100像素，背景颜色是灰白，边缘0，引入图片，宽度是100%。

图17 网页中的图片

表单表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

最后制作一个简易的表单，并作适当解释。写下面的代码的目的是为了制作一个收集个人信息的表单。因为表单的任务承载的主体，所以表单的功能写在两标签之间 。

图19 代码上

图中是一个有输入功能的单标签是常用的表单控件。括号之间有着标签的属性，如type="text"，说明输入的内容是文本，生成文本框，name="uname"说明输入的是名称， id=""，id不输入内容为默认，后面一样， value=""，给定的参数值为默认value值会发送到服务器。当type="password"时，生成密码输入框，输入的字符会以小圆点或者星号显示3、输入内容会被隐藏。

<input type="radio" name="sex" id="" value="1" required/>男

<input type="radio" name="sex" id="" value="0" />女

其中的type="radio"表明有下列值可选，即value中的值，1和0分别代表男和女。

<br /><br />是换行符。

<select name="shengfen" > select>表示创建一个名为shengfen的下拉菜单。

<optgroup label="华北">

                   <option value="hebei">河北省option>

                   <option value="shanxi">山西省option>

                   <option value="beijing">北京市option>

                   <option value="tianjin">天津市option>

                   <option value="neimeng">内蒙古自治区option>

                 optgroup>

option表示每一个下拉列表项，向服务器中发送的是value值；optgroup用来对option进行分组，label属性设置分组名称。

<input type="text" name="tel" pattern="[0-9]{11}" required/>

<textarea name="remarks" style="width: 200px;height: 150px;" placeholder="请输入...">textarea>

textarea表示创建一个文本框，并在style限制了宽度和高度，在没有输入时持续显示“请输入”。

图20 代码下

<input type="submit" value="发送" />submit把表单内容发送到服务器

<input type="reset" value="重置" />reset重置表单内容

以上是对代码的解释。

图21 实际表单效果

实际上，只做到这里仅仅是开始，网页的背景，数据的收集都还没有制作，这里只是制作了一个表单的雏形。但限于篇幅就不再赘述详细的过程了，具体实现过程自行学习。

更多知识等你来解锁