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