大家都上过网浏览过网页，可能对于大部分同学来说，并不知道网页是怎样产生的。本文将对HTML 进行简单的了解。
HTML是什么？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
所以这里你将学习一种所谓新的 "语言"，去描述HTML页面，然后展示给大家看。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
也有几个特例的
- <br /> 表示断行 来自单词 break
- <hr /> 表示水平线 来自单词 horizontal ruler
- <img /> 表示插入一个图片 来自单词 image
HTML 基本结构
HTML 基本结构
演示效果
演示效果
由这两个图可以看出 代码和效果的对比。
首先声明 html 文档，
然后设置 头部 的信息，比如 title。标签页上的文字 'UIC Student' 是写在 标签 <title> 内。
具体内容展示，写在 <body> 内。比如 文字，图片。
注意标签如果是成对的，注意闭合标签。
建议：
- 书写html代码时候，成对标签的先将 开始标签 闭合标签都先写了，然后再在里面书写具体内容，避免遗忘。
- 注意html代码缩进，书写起来美观，容易检查。
学习基本标签
headings
headings 总共有 6 个，
<h1> <h2> <h3> <h4> <h5> <h6>
示例代码：
headings .png
示例效果：
headings
<p>标签表示一个段落。
示例代码：
<p>标签.png
示例效果：
<p>标签显示效果
<a>超链接
链接是通过标签 <a> 来定义的.
示例代码：
<a>标签.png
示例效果：
<a>示例效果.png
href 表示 要链接的目标地址。
title 表示 当鼠标移动到链接的文字上面时候，鼠标右下角会提示显示UIC的文字。
target="_blank" 表示点击之后，链接从浏览器打开新的一个标签页显示内容； 如果不加 target 这个属性， 点击链接将会在原来的标签页打开跳转页面的内容。
以上 href, title, target 这些我们称之为 属性。用户对 <a>标签的额外设置。
<img> 插入图片
示例代码：
image.png
image.png
示例效果：
image.png
src 设置需要引入图片资源。而且图片放于与代码同一个目录下。
width 设置图片宽度。
height 设置图片高度。
HTML 的标签其实还有很多，这里无法一一列举。
建议大家前往 W3School 中去了解。
编写步骤
- 编写HTML代码
- 本地预览页面效果
- 本地部署到服务器
- 在线查看页面
编写代码
编写代码可以用 Notepad++, Sublime Text3等工具，初学者不建议用Dreamweaver。
index.html代码.png
tags.html代码.png
目录文件结构.png
本地预览页面
index.html本地预览.png
tags.html本地预览.png
这两个页面地址栏上显示的是本电脑下的路径。
上传到服务器
打开FileZilla软件
FileZilla.png
Host: stuweb.uic.edu.hk -- 远程服务器地址
Username: b630300007 -- 学生学号
Password: ****** -- 学生密码（与邮箱密码一致）
登录成功之后的界面：
image.png
左边红色部分是你当前电脑，找到你存放你html文件的地方,上面是路径，下面是指定文件夹下的文件列表。
右边蓝色部分是远程服务器， / 表示根目录， 在根目录下选择 public_html的文件夹，我们马上就要将本地的html文件传输到服务器上。
选择文件上传.png
选择你要上传的文件，邮件鼠标，上传。
上传很快，你就看到如下的结果。
上传完成.png
在线查看
在浏览器上输入地址：
http://stuweb.uic.edu.hk/hejing/index.html
注意：这里的 hejing 请根据各自的学号替换。
http://stuweb.uic.edu.hk/hejing/index.html
如果你需要打开其他的页面，比如 tags.html
浏览器上输入地址：
http://stuweb.uic.edu.hk/hejing/tags.html
http://stuweb.uic.edu.hk/hejing/tags.html
如果你尝试打开一个不存在的html页面将出现Not Found错误。
比如： http://stuweb.uic.edu.hk/hejing/uic.html
Not Found.png
如果有疑问，请在公众号留言，本团队将定期收集反馈，统一回复。
本文完。
网友评论