一、准备工作
工欲善其事必先利其器,HTML其实用系统自带记事本就能写,写好标签然后把扩展名改成.html就可以,浏览器会自动读HTML代码然后把样子呈现出来,但是系统自带的记事本没有关键字高亮,自动缩进等功能,写出的代码格式不固定,也很暗读懂别人写的代码,所以还是不推荐。HTML开发工具有很多,比较出名的Dreamweaver,与Fireworks,Flash统称网页三剑客,但是我比较喜欢用Notepad++。
我个人认为HTML本质是TXT,浏览器读取并解析它,所以说它是依赖浏览器展现的。可以说无论什么系统只要有浏览器就能出效果。虽然所有浏览器对HTML的解析大体相同,但是也有细微差别,所以有时候要考虑浏览器兼容问题。
二、基本框架
Hellow World
引入一个老梗Hello World ,世界上的第一个程序就是Hello World括弧笑。
首先,我们要新建一个.html文件,我们可以先新建一个txt文本文件,再把扩展名改成html,用Notepad++或者记事本编辑,将下面代码复制(推荐码字抄)进去。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style/style.css" />
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
Hello World
</body>
</html>
用浏览器打开
HTML代码的基本形式是:
<标签>内容</标签>
通常:
- 像
<html>
<head>
<title>
<body>
这些由尖括号包围的关键词都是标签 - 标签通常是成对出现,例如
<body></body>
,其中<body>
是开始标签,</body>
是结束标签,无需内容的标签如<br>
可以表示为</br>
+习惯上元素和标签定义相同,严格讲元素=开始标签+内容+结束标签
三、Hellow World中出现的元素
<!DOCTYPE>
<!DOCTYPE>
为声明,位于文档中的最前面的位置,处于 <html>
标签之前,它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。习惯上通常声明为html5即<!DOCTYPE html>
。
<html>
元素
<html>
元素定义了整个 HTML 文档。
<head>
元素
<head>
元素包含了所有的头部标签元素。在 <head>
元素中你可以通过<link>
标签插入脚本、 样式文件,通过<meta>
定义各种meta信息,通过<title>
标签定义了浏览器工具栏的标题。
<body>
元素
<body>
元素定义文档的主体,其包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。),浏览器中真正的显示的内容,在这个元素中编写。