一、初识HTML

HTML、CSS基础课程系列 HTML

初识HTML

WEB概述

HTML 全称是超文本标记语言(Hyper Text Markup Language)。
它是一种标记语言,使用标记标签来描述WEB页面,这里WEB页面也就是我们通常说的网页。
搭建网站的过程,就是WEB开发的过程,下面就让我们一起来进行激动人心的WEB开发吧!

专业人士使用什么工具?

  • 计算机: 对于web开发,最好投资一部台式计算机或笔记本(windows或Mac)。
  • Web浏览器: 目前全世界最流行的浏览器是谷歌的Chrome,简洁,好用,它在全球的份额已经超过50%,还有常见的火狐Firefox,Opera,Safari,当然还有使用谷歌内核的360浏览器,QQ浏览器等等。
  • 文本编辑器: 您的计算机可能有一个最基本的文本编辑器了,比如windows的记事本。但是对于WEB开发,我们还是推荐专业的文本编辑器,Sublime Text3,这是一个简洁、轻便又功能强大的文本编辑器,它的功能有很多,有待您后续发觉,下载地址

解刨HTML元素

HTML是一种标记语言,它是由一些列元素(元素,标签,标记都是一个含义)组成,您可以使用这些元素来封装,包装或标记内容的不同部分,使其以某种方式展示。例如,下面的内容:

1
My cat is very grumpy

如果我们喜欢这段文字,在一行里面显示,我们就可以通过html标签里面的段落标记(<p>)来指定它:

1
<p>My cat is very grumpy</p>

下面我们就来解析这个段落元素:

这个元素的主要组成部分:

  • 开始标签: 如上图所示的<p>,包括开和关角括号,表明元素开始生效。
  • 结束标签: 上图的</p>,它在元素名称前有个斜杠/,表明元素的结尾。
  • 内容: 上图的Content就是元素的内容,这里只有文本内容。
  • 元素: 开始标签,加上结束标签,加上内容,就等于元素。

属性

元素也可以具有属性:

属性组成部分:

  1. 它与元素名称之间的空格。
  2. 属性名称,后面跟上等号=
  3. 属性值。就是单引号或双引号里面的内容。

HTML文档的结构

上面讲解了单个元素和属性的内容,下面我们来看看一个完整的WEB页面应该是什么样的结构:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个页面</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
  • <!DOCTYPE html>:文档声明,向浏览器声明这个文档(或文件)是html文件,采用html的规则来解析。
  • <html></html>: html元素,把整个页面上所有的内容都包裹起来,也叫根元素。
  • <head></head>:head元素,定义一些元信息,例如文档关键字和描述,文档标题,引入外部文件之类。
  • <meta charset="UTF-8">:此处设置文档的字符编码为UTF-8编码,可以避免以后的编码问题。
  • <title></title>:此处设置文档的标题,包含浏览器选项卡中显示的标题,用于您加入书签或收藏该页面时描述网页。
  • <body></body>:body元素,这包含了您想在网页中显示的所有的内容:文字,图像,视频,音频等等。

本地创建一个html文件

您可以按照下面的步骤创建一个html文件:

  1. 复制上面的html页面示例。
  2. Sublime Text3中,点击最上面的File => New File,或者使用快捷键(Ctrl + N)新建一个文件。
  3. 把刚才复制的代码粘贴到新的页面中去。
  4. 把文件另存为(按 Ctrl + S),取名index.html

这样您就可以在浏览器中打开这个文件,查看渲染代码后的样子,然后编辑代码并刷新浏览器以查看结果。

小结

这节课我们学习了html文档的一些概念,以及如何通过使用工具来创建一个完整的html页面,下节课我们会学习到一些常用的关于文本内容的标签。

作业

①. 利用这节课所学知识,完整的建立一个HTML页面,并且在浏览器显示出Hello World出来。

教材编写 myxxqy@gmail.com 张超
2017.06.26