typora-copy-images-to: media

第01阶段.前端基础.认识HTML

学习目标

• 理解
  • HTML标签的概念
  • HTML标签的分类
  • HTML标签的关系
  • HTML标签的语义化
• 应用
  • HTML骨架格式
  • sublime基本使用

1. HTML 初识

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述 页的一种语言。
• H（很）T（甜）M（蜜）L（啦）
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义：

1. 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **）
2. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。

pink老师 一句话说出他们:

页是由 页元素组成的 ， 这些元素是利用html标签描述出来，然后通过浏览器解析，就可以显示给用户了。

门外汉眼中的效果页面

1.1 HTML骨架格式

日常生活的书信，我们要遵循共同的约定。

2.并列关系

Dreamweaver

有人说：

普通青年 Dreamweaver

文艺青年 sublime

高手和傻子 用记事本

其实。。。。

sublime有非常多的优点， 最开心的就是非常轻量级，打开速度超快，后面更高的功能，后面再接触。

sublime生成html骨架小技巧

• 双击打开软件
• 新建文件（ctrl+n）
• 保存（ctrl+s）,保存为：文件名.html （ 注意 后缀名必须是 .html )
• 放大缩小代码 ctrl+ 加 键 和 ctrl + 减 键 或者 按住 ctrl 在 滚动鼠标滚轮
• 生成页面骨架结构
  • html: 5 按下tab键 或者
  • ! 按下tab键
• 在浏览器中预览页面
  • 右键在 浏览器中打开

3. 文档类型

同学你用啥手机回答p>

用法：

作用：

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

**注意： **

一些老 站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

pink老师 一句话说出他们:

就是告诉浏览器按照HTML5 规范解析页面.

团队约定：

4. 页面语言lang

最常见的2个：

1. 定义语言为英语
2. 定义语言为中文

pink老师 一句话说出他们:

团队约定：

@拓展阅读：

简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。
比如可以

• 根据根据lang属性来设定不同语言的css样式，或者字体
• 告诉搜索引擎做精确的识别
• 让语法检查程序做语言识别
• 帮助翻译工具做识别
• 帮助 页阅读程序做识别
  等等

5. 字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

• GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
• UTF-8则基本包含全世界所有国家需要用到的字符
• 这句代码非常关键， 是必须要写的代码，否则可能引起乱码的情况。

pink老师 一句话说出他们:

这句话是让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。

团队约定：

6. HTML标签的语义化

白话： 所谓标签语义化，就是指标签的含义。

1. 方便代码的阅读和维护
2. 同时让浏览器或是 络爬虫可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化

pink老师 一句话说出他们:

根据标签的语义，在合适的地方给一个最为合理的标签。