《HTML5基础》

---

一、HTML简介

1. HTML: Hyper Text Markup Language 超文本标记语言
2. HTML是一门制作网页的计算机编程语言 (相对于Java逻辑上更简单，但是记忆的东西多)
3. 超文本最早是指拥有超链接这样的超越普通文本功能的内容
4. HTML语言由大量的标签组成，所以是标记语言
5. HTML5有些地方会简称H5，是HTML4的升级版本
6. HTML5涵盖了HTML4，其中60%是HTML4的内容，40%是新增的内容
7. HTML编写好以后，由浏览器来解析渲染和呈现
8. 常见的浏览器厂商:
   谷歌chrome 、 IE、FireFox、QQ Browser、猎豹、Safari、360、Opera
9. 早期，各种浏览器标准不一，导致网页的兼容性差，程序员为了解决兼容性工作量大
10. W3C组织(World Wide Web Consortium)制定统一的W3C标准
    a.HTML
    b.CSS
    c.JavaScript

二、网页的基本结构

1. 编写网页的工具: 任意文本编辑器
   a.记事本
   b.Notepad++
   c.WebStorm
   d.Sublime
   e.HBuilder
2. 新建一个记事本，修改后缀 .txt 为. html 或.htm
3. 文件的后缀可能被隐藏，需要调出来
4. 修改了后缀以后，文件的类型就变了，变成网页文件了，图标也会变
5. 网页文件的图标根据不同电脑安装的浏览器不同，显示的效果不一样，没有太大关系
6. 在文件顶部编写声明:
7. 文档架构: 这里是主体
8. html作为根节点，有且只有一个
9. head标签表示头部信息
10. body标签表示主体
11. title标签表示标签，显示在浏览器标签栏
12. 代码编写完成后双击用浏览器查看效果

三、meta标签的使用

1. meta标签用于描述网页的摘要信息或者配置信息
2. 包括网页作者、描述、关键字等
   <meta name=“author” content="张三“/>
   <meta name="keywords” content=“博客，个人博客，张三，学生”/>
   <meta name="description” content=“学生张三自己做的一个个人博客”/>
3. 还可以用于设置网页的编码:
   
4. 常见编码:
   gb2312 /gbk : 简体中文
   ISO-8859-1 : 西欧编码，只支持英文
   big5 : 繁体中文，台湾，香港，澳门用的多
   UTF-8 : 国际通用编码，支持多国语言，通常用的最多，兼容性最好
5. 中文乱码的解决:
   a.通过meta标签设置网页的编码为UTF-8
   b.修改文件的编码为UTF-8 (用记事本打开网页文件，另存为，选择编码)
6. meta标签是可选标签，通常根据需要进行编码

四、网页的基本标签

1. 标题标签: h1-h6
2. 段落标签: p
3. 换行标签: br
4. 水平线标签: hr
5. 字体样式标签:
   a、strong : 粗体，表示强调
   b、em: 斜体
6. 注释:<! – 这里是注释 -->
7. 转义字符(有些符号会和标签冲突，所以需要用其他写法代替，这就是转义字符号)；
   a. 空格: &nbsp；
   b.>大于号: &gt；
   c.<小于号: &lt；
   d.双引号: $quot；
   e.版权符号: $copy;

五、图像标签

1. 网页中也可以显示图片
2. 图像的格式常见的有:
   a.jpg / jpeg; 特点: 支持压缩，体积小，品质高
   b.gif : 支持背景透明，支持动画效果，比如loading图
   c.png : 支持背景透明，支持压缩，体积小，品质高
   d.bmp: 位图，windows系统中用的多，不适合网页
3. 图像的基本语法:
   <img src=“地址” alt=“图像的替代文字’ title=“鼠标悬停文字” width=”" height=“”/>
4. src表示图像的地址:
   a、地址分两大类，一类是绝对路径，一类是相对路径
   b、绝对路径:
   i、本地绝对路径是指导带盘符，类似于: c:/abc/ddd.jsp
   ii、网络绝对路径是以http开头的，类似于
   http://www.baidu.com/aaa.jsp
   c、相对路径是相对于当前文件作为参照物，出发去引用图片的路径写法
   d、相对路径中，表示返回上一级目录
   e、通常建议使用相对路径
   f、图片一般会专门建一个文件夹存储，例如imgs / imgages
5. width和height
   a.用于设置宽高
   b.通常只设置其中一个值
   c.因为设置了一个值，另一个值会自动等比缩放
   d.不建议设置两个值，如果设置的不对，图片会拉伸变形导致失真效果

六、超链接的使用

1. 超链接可以用于用户交互，在网页中非常常见
   a.超链接默认有下划线
   b.鼠标指针移动到超链接上会变可点击的手型
   c.超链接可以点击，且点击了会有页面跳转
2. 超链接的基本语法
   <a href=“链接地址” target="目标窗口”>登录
3. href: 表示连接的url，即地址或者叫路径
   a.可以写相对路径
   b.也可以写绝对路径
   c.也可以写#，表示空链接，点击没有实际的跳转效果
4. target: 表示目标窗口
   a.默认是: _self，自己的意思，表示在本窗口打开，覆盖原有页面内容
   b._blank:表示空白窗口，即新起一个窗口打开，不影响原有窗口
5. 图片也可以做超链接效果，只要用a标签包含起来
6. 超链接的应用场合：
   a. 页面间链接，最常用
   b.锚链接，类似于百度百科内容页效果
   i、用于页面内容多内容长，快速在页面内部定位
   ii、目标点用name属性命名，注册
   iii、点击超链接用a开头表示连接地址:去注册
   c.功能性链接，比如邮件链接mailto:444@qq.com

七、注意事项

1. 标签有层级关系，编写的时候要注意缩进对齐
2. 标签有开始，有结束，不规范的话会影响网页显示效果，比如title忘记结束
3. 网页标签不区分大小写，语法检查不严格，没有报错信息更加不好找错，更要细心
4. 标签编写的时候要成对写，不容易遗漏，写完标签的开始和结束，再来写中间的内容
5. 标签分行内元素(内联元素) 和块元素，后面章节细讲
6. 暂时先用普通文本编辑器缩写，不用功能强大的开发工具，先练练手
7. 我们现在学习的是网页的内容结构，不纠结网页的样式外观，美化后面专门学习