HTML第一小节第二、三天

1、文档标签

1.1、HTML文件后缀

HTML 和HTM都可以，后者是由于早期电脑只能识别3个字母，现在的电脑可以多字符。

1.2、快速生成HTML页面结构

html：5(必须是小写) 然后TAB键，自动生成下图：

生成页面结构图

第一排的，是文档的声明：当前文件是一个html文档，遵循HTML5的标准

1.3另外html的自动生成：

html:4s+tab键

html:4t+tab键：html4过渡期

html:xs+tab键

html:xt+tab键：xml过渡期

2、html标签（最重要）

2.1

后面是language的缩写，意味着整个页面的主体语言是english，如果要改成中文就是:.

HTML标签只嵌套head标签和body标签。

2.2、head标签

1、Head标签中设置都是用于给浏览器使用的一些配置和设置。比如meta标签告诉浏览器当前文档的编码格式。

  当浏览器解析当前文档的编码 和 文档实际的编码不一致的时候那么会出现乱码的问题。

2、设置当前浏览器页面标签的标题

2.3、Link标签

用法有3个：

1、DNS预解析，提高网页速度。

2、引入网站ICON图标

3、引入CSS样式

2.4、标题标签h1-h6

DTD:文档类型定义，用于HTML4中

1、h1-h6标签，是网页里内容的标题，h1到h6重要性逐次降低。

2、h1标签是整个网页内容中最重要的标签

2.5、段落标签

段落文本

2.6、

---

水平线标签，单标签：在页面中插入一条水平线

2.7、文档空格合并。文本间多个空格强制或换行会合并为一个空格

2.8、
换行标签，单标签：强制段落进行换行。

行内标签

2.9、文本节标签

sublime中 ctrl+shift+D快速复制一行内容  

定义文档中的一小节文本。语义不强，Span标签可以跟其他的span标签共用一行。

2.10、着重文本，纯样式标签，斜体字标签（不推荐使用）

2.11、加重语气、着重标签；与em标签的区别：em是对局部的文本加强语气强调，strong是针对整体。

2.12、_{下标标签 ^上标标签}

2.13、加删除线标签

2.14、加下划线标签

2.15、文本。。。。。。。。  超级链接标签

target属性：可以选择在“_self”当前页面或者"_blank"另外一个新的页签打开网址。例如： target=_blank   href="www.baidu.com">

锚点：当前页面中某处设置一个ID值，href="#ID名"，就可以实现页内跳转到该ID处

超链接标签不仅可以嵌套文本，还可以嵌套图片，表格，标题等等。

3、URL协议

平时写得网址就是url地址

作用：规定url地址的格式

格式：协议规定格式：scheme://host.domain:port/path/filename

协议名称://  域名（ip地址):80（可以不写）  /路径/文件a.htm

scheme -定义因特网服务的类型。最常见的类型是http, https（加密）,ftp（文件传输协议）

host -定义域主机（http的默认主机是www）

domain -定义因特网域名，比如baidu.com

:port -定义主机上的端口号（可能会没有，http的默认端口号是80,）

path -定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

filename-定义文档/资源的名称

3.1、URL编码

url中的非ASCII码值转为%ASCII码值

4、相对路径与绝对路径

4.1、相对路径

cd 命令：进入文件夹

dir命令：显示当前目录中的文件及文件夹

cd../命令：进入相对于当前目录的父目录

4.2、绝对路径

带盘符的路径

5、图片标签

5.1、图片类型

jpg：色彩还原高，适合复杂颜色图片

gif：色彩效果最低，支持透明，支持动画，适合颜色比较少，不适合渐变色。

png：PNG的优点是，清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。

PNG有着另一个优点，那就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。

总结：gif和png基本差不多，色彩比较少的直接gif，如果图片动画用gif。对色彩要求高的用jpg。