HTML 入门
什么是HTML
HTML为缩写,全称为Hyper Text Markup Language,中文翻译为超文本标记语言。HTML不是编程语言,是标记语言。
- 超文本:指网页中的,图片,连接,音乐,程序等非文字内容。
- 标记语言:标记语言,是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息(包括例如文本的结构和表示信息等)与原来的文本结合在一起,但是使用标记进行标识。
HTML 发展历程
早在 1989 年,蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究,创建了使用于其系统的 HTML。蒂姆·伯纳斯-李设计的 HTML 是以纯文字格式为基础,可以使用任何文本编辑器处理,最初仅有少量标记(TAG)而易于掌握运用。
随着 HTML 使用率的增加,人们不满足只能看到文字。1993 年,还是大学生的马克·安德生在他的 Mosaic 浏加入 标记,从此可以在 Web 页面上浏览图片。
但人们认为仅有图片还是不够,希望可将任何形式的媒体加到网页上,因此 HTML 得以不断地扩充和发展。
HTML 版本发展历程
自 1993 年之后 HTML 出现真正意义上的第一版,发展到至今,经历了 5 个大版本的更新和迭代。具体每个版本发布的时间如下:
超文本标记语言(第一版)—— 在 1993 年 6 月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
HTML 2.0 —— 1995 年 11 月作为 RFC 1866 发布,在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
HTML 3.2 —— 1997 年 1 月 14 日,W3C 推荐标准
HTML 4.0 —— 1997 年 12 月 18 日,W3C 推荐标准
HTML 4.01(微小改进)—— 1999 年 12 月 24 日,W3C 推荐标准
HTML 5 —— 第一份正式草案已于 2008 年 1 月 22 日公布,正式版本发布于 2014 年 10 月 29 日
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- HTML文件后缀有.html和.htm,两种没有区别。
- HTML文档被称为网页。
- HTML文档包括HTML标签的纯文本。
声明
<!DOCTYPE html>
- 一般位于HTML文件第一行是为了告诉浏览器这个HTML页面的版本,网络上有很多不同的文件,能正确识别声明的HTML版本,浏览器就能正确显示网页内容。
各个HTML版本的<!DOCTYPE>声明应如何书写:
-
HTML5
< ! DOCTYPE html>
-
HTMI 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML基本结构
<html lang="en">
<head></head>
<body></body>
</html>
<html>元素:表示HTML页面的根元素,用于包含所有的HTML元素。
<head>元素:表示当前HTML页面头部,用于定义当前页面的基本信息,例如,关键字,作者等内容。
<body>元素:表示当前页面的主体,用来表示最终显示在浏览器窗口的内容。
HTML元素
HTML标记标签通常被称为HTML标签,HTML标签和HTML元素通常都是描述同样的意思。
- HTML标签由尖括号包围的关键字,<元素名>。
- HTML标签通常成对出现,如<a></a>,<meat>标签只有开始没有结束。
- 标签队中的第一个标签为开始标签,第二个为结束标签。
- 开始标签和闭合标签也被称为开放标签和闭合标签。
<title>标签称为闭合标签(闭合元素),包含文本内容。
<meat>元素称为空元素不包含文本内容,没有结束标签。
注意:不要忘记结束标签,也不要给空标签加结束标签,建议标签名小写。
HTML头部
元素包含了所有的头部标签元素。在<*head*>元素中你可以插入脚本(scripts),样式文件(CSS),及各种meat信息。可以添加在头部区域的元素为:<*title*>,<*style*>,<*meat*><*link*>,<*script*>,<*noscript*>和<*base*>。- <title>元素:定义文档标题。<title>在HTML文档中是必须有的。
- <link>元素:定义一个文档与和外部资源之间的关系。
- <style>元素:定义HTML文档的样式文件引用地址。
- <meta>元素:描述了一些基本的元数据。<meat>标签提供了元数据。元数据也不显示在页面上,但会被
浏览器解析。<meat> 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其它元数据。数据可以使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键字),或其他Web服务。
<meat>元素的使用实例
- 为搜索引擎定义关键字
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 为网页定义描述内容
<meta name="description" content="Free Web tutorials on HTML and CSS">
- 定义网页作者
<meta name="author" content="KingJ">
- 设置HTML页面编码格式
<meta charset="UTF-8">
- 每30秒中刷新当前页面
<meta http-equiv="refresh" content="30">
- 定义HTML页面窗口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML属性
- HTML属性常用引用属性值
- 属性值应该始终被包含在引号内。
- 双引号是最常用的,不过使用单引号也没有问题。在某些情况下,比如属性值本身含有双引号,那么必须使用单引号。
- 推荐使用小写属性
- 属性分类
- 标准(通用)属性:HTML元素几乎都具有的属性,如id,name,style和class属性等。
- 专有(私有)属性:HTML中某些元素特有的属性,如<form>元素的action属性等。
- 事件属性:用来为HTML元素注册DOM事件属性,如onclick属性等。
- 自定义属性:第三框架中为了完成某个特定的功能而定义的属性,如Vue框架的v-if属性等。
HTML注释
<!-- 注释内容 -->
- 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
- 浏览器会完全忽略注释,也不会显示它们。
- 将注释插入HTML代码中,这样可以提高其可读性,使代码更易被人理解。
- 合理地使用注释可以对未来的代码编辑工作产生帮助。