初识HTML 笔记分享
初识HTML
1. HTML概述
1.1 HTML是什么
HTML（Hyper Text Markup Language） 超文本标记语言
- HTML就是用来在网页中描述超文本内容的一种标记语言(非编程语言)，“在线的word”
- PC端的各种网站页面、手机端的APP部分界面(web view)、小程序…
- 超文本：超越了文本的概念，文本、图片、音频、视频等
- 是官方定义好的标签，无法自己进行定义，不同的标签有不同的含义，例如：
在网页中描述图片用的，在网页中描述视频的
XML（eXtensiable Markup Language） 可扩展的标记语言
- 标记语言： 标签/元素
- 可扩展：我们随意定义标签，含义也由我们来表示
- 数据传输格式
1.2 HTML发展史
- 1993年 HTML 1.0
- 2000年 XHTML 1.0 原因是因为原来的HTML规范不严格 不统一
- …
- 2014年 HTML 5.0 原因：各大浏览器厂商 对XHTML比较反对 因为XHTML不向下兼容 语法更加严格 后果比较严重(开发者们饱受这些问题的困扰)
扩展历史：
由苹果、Google、微软和Mozilla四大浏览器厂商组成的WHATWG已经与万维网联盟（World Wide Web Consortium，即W3C）开展了多年的拉锯战。他们想证明，如果没有他们的支持，W3C将无法管理网络标准。
而经过了多年的PK，W3C终于无奈放权了。
所谓WHATWG，即网页超文本应用技术工作小组（Web Hypertext Application Technology Working Group，简称WHATWG），成立于2004年，其目的是为了推动现代化HTML标准。当时W3C计划将HTML推向XHTML（这是一种类似XML的结构），而各大浏览器厂商表示不同意。
最初，WHATWG由苹果、Opera和Mozilla基金会组成，他们认为处于领导地位的W3C，包括许多与浏览器无关的实体，并没有将Web开发社区的利益放在心上。
于是，他们成立了反W3C联盟组织，并开发了之后的HTML 5标准，后来在得到了所有浏览器厂商的支持后，W3C也正式批准HTML 5标准成为HTML网络标准的主流版本。
2. 编写第一个HTML代码
2.1 HelloWorld
-
创建文本文档
-
修改文本文档的扩展名为html/htm
-
编写源代码（弱语言 语法不规范也不会出现问题）
<html> <head></head> <body> Hello World </body> </html>
2.2 IDE
- WebStorm (Jetbarins 收费)
- Sublime Text3(收费 代码预览)
- DreamWeaver(Adobe收费)
- VSCode(微软)
- HBuilder/HBuilder X (数字天堂)
2.3 网页的结构
<!-- 文档声明 DOC(Document) TYPE(type) 标识当前文档应该以HTML5来解析 -->
<!-- 可写可不写 不影响解析 但规范要求必写 -->
<!DOCTYPE html>
<!-- HTML的根标签 固定不变 -->
<html>
<!-- 网页头部的信息 一般用来作为网页设置内容的编写 -->
<!-- 大多数在head中的设置 是不会显示在网页中的 -->
<head>
<!-- meta标签是用来设置媒体信息 -->
<!-- charset：本网页采用的字符编码 -->
<meta charset="utf-8"/>
<!-- name：keywords 它是用来设置搜索引擎搜索关键字的 -->
<meta name="Keywords" content=""/>
<!-- name:description 它是用来设置搜索引擎收录的描述的 -->
<meta name="Description" content=""/>
<!-- 网页图标设置 -->
<link rel="shortcut icon" href="ico/favicon.ico">
<!-- 标题：设置网页的名称的 -->
<title>HelloWorld</title>
</head>
<!-- 网页主体的信息 一般用来作为网页内容的编写 -->
<body>
HelloWorld！
</body>
</html>
3. 常用的标签
-
标题标签等价于Word一级标题 二级标题…
- 一级标题最大，六级标题最小
<h1></h1>- …
<h6></h6>
-
段落、换行标签
-
<br/>换行 -
<p></p>段落
-
-
字体加粗和倾斜
<strong></strong><em></em>
-
图片标签
-
<img/>- src：图片地址
- title：它是标签的公有属性 用于鼠标悬浮在对应标签元素上时 进行文字提示
- alt：当图片加载失败时 展示的提示内容
- width：宽度
- height：高度
-
-
超链接标签(用的非常非常多！)
-
<a></a>- 文档/页面超链接
- 锚链接
- 功能链接
-
-
视频、音频标签
<video></video><audio></audio>
注：笔记思路来自查老师！！！！
上一篇： 有趣！好玩！Ubuntu下的小命令
下一篇： Mybatis补充
推荐阅读