1. 定义

• HTML 是用来描述网页的一种语言。
• 指的是超文本标记语言 (Hyper Text Markup Language)
• 文本：文字、有格式的文本
• 超文本：文字，图片，音频，视频，动画、定位…
• 标记语言 ： <>
• HTML 标签是由尖括号<>包围的关键词
• HTML 标签通常是成对出现的
• 标签对中的第一个标签是开始标签，第二个标签是结束标签

2. 发展史及优势

2.1 发展史

• HTML 1993年
• HTML2.0 1995年
• HTML3.2 1996年 （W3C推荐标椎）
• HTML4.0HTML4.01 （微小改进）
• XHTML1.0 2000年
• XHTML2.0 由于改动过大，学习成本高了，胎死腹中！
• HTML5 （最新版） 2004 2007正式纳入新成立的HTML工作团队！
• 2013 HTML 5.1 草案~

2.2 优势

• 所有知名浏览器厂商都支持 ：微软、谷歌、苹果、Opera、Mozilla firefox。很多杂的浏览器，并不支持 HTML5
• 市场的需求
• 跨平台(浏览器)

3. W3C标准

• W3C： 万维网联盟
  – 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
  – http://www.chinaw3c.org/
  .com 国际的 .cn 中国 .org开源的
• W3C标准
  – 结构化标准 （XHTML、HTML）
  – 表现标准 （CSS）
  – 行为标准 （Dom、ECMAScript标准==> JavaScript）
  – 很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范
• 案例：在网页上打印一首诗
  – 案例代码
  – 运行结果
• 常见的前端开发工具
  – 记事本
  – Notepad++
  – Sublime
  – VScode（前端专业）
  – WebStorm（前端专业）IDEA
  – HBuilder （专业）
  ……

4. HTML的基本结构

• 所有的HTML 标签 都以 <> 开始 </> 结尾
• 正常网页的所有内容都需要放在 < body> 标签中
• DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
• Title 标签，就是网站的小标题名称
• meta 描述信息
• SEO：网站搜索
• 建议规范编码，统一使用UTF-8（全世界） gb2312：包含了所有的中文字符

5. 网站的基本标签

5.1 标题标签

• h1~h6+tab键
  
  

5.2 段落标签

• p+tab键
  

5.3 水平线标签

• hr+tab键
  

5.4 换行标签

• br+tab键
  
  

5.5 字体样式标签

• 斜体：em+tab键、粗体：strong+tab键
  

5.6 特殊符号标签

• 空格：  大于：> 小于：< 版权符号：©
  
  

6. 图片标签

• 常见的图片格式： .png .jpg .jpeg .bmp .gif …
• png 会有浏览器兼容问题，一般使用 .jpg .gif多一点
• 图片：静态资源 单独放 statics\images
• 相对路径，绝对路径
• 相对路径 …/…/
  绝对路径 https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg
• src： 资源图片 ： 图片的路径
  alt： 图片加载失败，表示图片的问题，也即图片描述
  title： 鼠标放在图片上的悬浮提示
  width： 宽
  height：高

– 案例代码
– 运行结果

7. 超链接

• 超链接：表示从一个地方跳转到另外一个地方
• href：要跳转地址
  target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
  _self : 在自己的窗口打开
  _blank： 在新窗口中打开
• 和图片嵌套使用

– 案例代码
– 运行结果

8. 锚链接

• 用于页面间指定位置跳转 ： 快速定位目录
• 可以在同一页页面中跳转
• 也可以在不同页面中跳转

– 案例一：在同一页页面中跳转

– 运行结果
– 案例二：在不同页页面中跳转

– 运行结果

9. 块元素和行内元素

• 块元素：无论内容多少，都独占一行（p，h1~h6）
• 行内元素：只根据内容的长度来扩展 （a，strong，em….）
• 案例代码
• 运行结果