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….）
- 案例代码
- 运行结果