知识点导航:
* HTML初步认识
* HTML基本骨架
* HTML语法特性
* HTML杂项
一、HTML初步认识<p>
-
什么是纯文本文件txt
只能保存文本内容的文件叫做纯文本文件,即txt文件. txt是英文text的缩写,它是无法记录文本样式的.
注意
1. html, css, js 都是纯文本文件
2. 同样内容情况下, doc 文件比 txt 文件 大
-
什么是HTML
HTML 是英语 HyperText Markup Language 的缩写, 超文本标记语言.
html 本质上和 txt 没有任何区别, 都是纯文本文件, 它是由txt文件改名而成的, 用一些标签来描述文字的语义,由于这些标签字浏览器里面是看不到的,所以称为”超文本”, 标签也就是”标记”,所以是超文本标记语言
注意
* HTML 是一个用文本 ( HTML标签 )来描述 文本语义 的语言
* 除了语义,其他什么都不是
* .html 是 HTML 文件的后缀名
二、HTML基本骨架<p>
1. 文档声明头<p>
<!DOCTYPE> 文档声明头
DocType Declaration ( DTD ) 用于告知浏览器使用哪种 HTML 或 XHTML 规范.
HTML4.01 从IE6开始兼容,HTML5 是从IE9开始兼容的, 故这几年网页还是应该用HTML4.01来制作,移动端使用HTML5
HTML4.01 规定了 普通 和 XHTML 两大种规范. XHTML中的字母X，表示“严格的”
XHTML1.0 严格体现在小写标签、闭合、引号.
| 大规范 | 里面的小规范 |
|---|---|
| HTML 4.01 | Strict, Transitional, Frameset |
| XHTML 1.0 | Strict, Transitional, Frameset |
1.strict 表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。比如，u标签，就是可以让一个本文加上下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的.
2.Transitional 表示“普通的”，这种模式就是没有一些别的规范
3.Frameset 表示“框架”，在框架的页面使用
说明
- HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了
2. 字符集<p>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
字符集用 meta 标签定义( 自封闭标签 ), meta 表示 “元”, 即配置, 表示基本的配置. charset就是character set“字符集”的意思
重点
- 我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！
中文可以使用的字符集为两种
第一种: UTF-8
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
第二种: gb2313
<meta http-equiv="Content-Type" content="text/html;charset=gb2313">
也可以写成 gbk
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
说明
- UTF-8 是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
- gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号
字库规模:
UTF-8(字全) > gb2313(只有汉字)
保存大小:
UTF-8(3个字节,加载慢) > gb2313(2个字节,加载快)
总结:
1.UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿
2.gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧
3. 关键字和页面描述<p>
meta除了可以设置字符集，还可以设置关键字和页面描述
设置页面描述
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
只要设置的Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。
设置关键字
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。Keywords就是“关键词”的意思
4. title标签<p>
<title>网页的标题</title>
title 也是有助于SEO搜索引擎优化的
基本骨架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
说明
- 网页的最外层的标签对儿是
<html></html>标签对，里面有两部分，分别是 head 和 body。 - head 标签中，描述网页的配置；body 中的内容，才是用户可以看见的内容。
- 第1行, 就是网页的声明头，术语叫做 DocType Defintion，文档类型定义，简称 DTD。这行语句非常的复杂，里面暗含了一个网址。W3C就是出web规范的组织机构。html、css、js 的规范都是W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器，这是一个什么标准的页面。
- 第2行, 是最大的html标签，所有的网页内容，都要包裹在这个标签对儿里面。
我们发现，html标签中，有两个属性：
xmlns="http://www.w3.org/1999/xhtml"命名空间,一般用来规范JS
xml:lang="en"语言是英语 - 第3行, 就是head标签，就是配置。
- 第4行,
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">字符集的配置 - 第5行,
<meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />关键词 - 第6行,
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />描述 - 第7行,
<title>哈哈哈</title>网页的标题，可以显示在浏览器的标签栏中 - 第9行,body 标签就是网页的内容，用户能够看见。
三、HTML语法特性<p>
-
HTML对换行不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。
-
空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
-
标签要严格闭合
四、HTML杂项<p>
-
字符实体
< < > > © © 版权标志 空格
示例：
哈 哈 （可以防止空白折叠现象）
-
废弃标签
HTML现在只负责语义不负责样式，故一些之前带有样式的标签均被废弃了
<hr /> 水平线
<br /> 换行
<del>删除线</del>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<em>强调</em>
<strong>强调</strong>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<em>强调</em>
<strong>强调</strong>
