HTML基础笔记（1-12）
一、标题栏的图标设置有5种方法：
1、在网站的根目录下放一张favicon.ico的图标文件。浏览器会自动显示在标题栏中。
2、使用ico图标作用标题栏图标，用link标签引入。
<link rel="icon" type="image/x-icon" href=""/>
可以使用工具将其它图片生成ico图标。图标一般设置为16X16.
3、使用jpg图片作用标题栏图标，用link标签引入。
<link rel="icon" type="image/jpg" href=""/>
4、使用png图片作用标题栏图标，用link标签引入。
<link rel="icon" type="image/png" href=""/>
5、使用gif图片作用标题栏图标，用link标签引入。
<link rel="icon" type="image/gif" href=""/>
二、关键字与描述
关键字与描述是网页优先很重要的部分，它不是给人看的，是供搜索引擎使用的。如果你要被百度网站搜索到，首先在被百度网收录才可以。这里
涉及到SEO搜索优化。
1、设置关键字：
<meta name="Keywords" content=" "/>
content:要设置的关键字，可以使用多个关键字，用英文逗号分隔,建议不要超过5个。
2、设置描述内容：
<meta name="Description" content=""/>
content:要设置的描述内容，建议不要超过提要100字。
关键字与描述不要乱写，一定要与网站内容相符合。
三、页面跳转
设置页面自动跳转
<meta http-equiv="refresh" content="5; http://www.yiyun668.com" />
设置页面自动刷新
<meta http-equiv="refresh" content="5" />
四、定义样式和引入样式
1、设置样式语法（所设置的样式仅限当前页面有效）
<style type="text/css">
中间是设置css样式内容。
</style>
2、设置样式引入文件 href=" "里面是样式文件地址。
<link rel="stylesheet" type="text/css" href="css/3-6.css"/>
五、超链接
1、语法实例：
<a href="指定需要链接的地址">这里是显示的内容</a>
target="_blank"
target这个属性指定是在哪一个页面显示。
_blank是指在新窗口中打开页面。
_self是指在当前窗口中显示打开页面。这个参数可以不写，它属于默认参数。
_parent则表示，将链接的文件载入含有该链接框架的父框架集或父窗口中。
如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
_top 在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架.
不写的话就是表示默认值，默认值一般跟浏览器有关。
2、超链接的四种状态：
a:未被访问的链接，link状态，默认文字颜色为蓝色，并且有下划线。
b:已被访问的链接，visited状态，默认文字颜色为紫色，并且有下 划线。
c:鼠标移动到链接上的状态，hover状态，有下划线，鼠标变成的手形。
d:鼠标正在点击的状态，activer状态，文字红色，有下划线
注：默认的这四种状态没有实用价值，通常我们在通过css对这四种状态重置。
六、绝对路径 相对路径
1、完整的地址，叫绝对路径(外部路径)。网络中带有域名的完整路径，如 https://www.baidu.com
主要用来链接外部资源。
2、相对路径是内部路径
以当前文档所在目录为参考。在本目录中可以直接输入链接文档路径
不在同一目录下，一个../表示返回一层目录，如果需要返加两层目录，
则需要两个../以返加两层目录，再输入链接文档路径，以此类推。
七、ID属性
元素的属性分标准属性与特殊属性
标准属性：几乎所有元素都拥有的属性为标准属性。
特殊属性：指元素特有的属性。
ID属性，属于标准属性：
1、是元素的唯一标识。
2、同一个页面中，不能有相同的id.
3、同一个页面中，不同元素有相同的id也不行.
4、ID调用用“#ID值”。
八、class属性
1、相同的元素，不同的元素，可以使用相同的class名称。
2、class调用用“.class值”。
3、class值相同则为同一类。
4、同一个元素可以有多个class名，中间为空格隔开
5、class主要用来选择一堆元素，主要用来定义样式。规定类名时不能以数字开头。
实例：
<a class="dyz" href="http://www.yiyun668.com" target="_blank">依云科技</a>
<a class="dyz" href="https://www.baidu.com" target="_blank">百度搜索</a>
<p class="dyz">段落标签测试</p>
九、title和style属性
title 属性示例：
<a href="http://www.yiyun668.com" title="依云科技">点击进入</a>
在这个示例中，title是标准属性，即所有元素都拥有的属性.
作用：当鼠标放在超链接上时，会显示提示文字。
style属性
1、style作用属性使用时，规格元素的行内样式。
2、style属性样式会履盖其它方式设置的样式。
3、可设置多个属性值，用“;”隔开。
例：
<a href="http://www.yiyun668.com" title="依云科技" style="color:fuchsia;font-weight: 600;">点击进入</a>
十、自定义属性
1、自定义属性与标准属性一样，几乎所有元素都可以使用用。
2、自定义属性可以自已定义属性名与属性值。
实例：<a href="https://www.51zxw.com" zxw="51zxw">我要自学网</a>
这里的zxw="51zxw" zxw就是自定义属性，51zxw是自定义属性值。
3、自定义属性用得比较少。
例：<a href="https://www.51zxw.com" zxw="51zxw">我要自学网</a>
自定义数据属性
1、用于存储页面或应用程序的私有自定义数据。
2、data-"*"属性包含两部分：
a、"*表示自定义数据属性名。在data-之后必须包含至少一个字符。
b、属性值可以为任何字符串。
3、自定义数据属性在微信小程序中用得比较多。
后续在微信小程序开发中再详细讲解。
例 <a href="https://www.51zxw.com" data-zxw="51zxw">我要自学网</a>
十一、文件下载：
1、 格式：<a href="文件路径">文件下载</a>
href属性指定文件下载路径。
例 <a href="download/laolitoolk.8.9.rar">文件下载</a>
download属性指定文件下载名称。
不添加download属性,如果浏览器不能识别下载文件，则可以直接下载
如果浏览器可以识别下载文件，则浏览器直接打开文件显示，不下载。
如果添加了download属性,不管浏览器能否识别下载文件，都会下载。
download属性值则为下载文件名称。
例：
<a href="download/课堂笔记.png">图片下载</a>
<a href="download/课堂笔记.png" download="图片">图片下载</a>
Download属性的兼容性不怎么样，只有 Firefox 和 Chrome 支持 download 属性。
十二、锚链接与空链接：
1、当前页面内容太长需要跳转到具体位置时就可以使用锚链接。
实例如mao.html
格式如下：
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<a href="#three">第三章</a>
<p id="one"> 第一章内容</p>
<p id="two">第二章内容</p>
<p id="three">第三章内容</p>
2、当前页面跳转到其它页面锚点。
目标页面的具体位置要先设置好锚点；
用a标签中的href属性指定目前页面路径+指定位置
实例:
<a href="mao.html/#one">第一章</a>
或<a href="mao.html#one">第一章</a>
<a href="mao.html/#two">第二章</a>
<a href="mao.html/#three">第三章</a>
3、空链接
当页面内容太长，浏览到底部时需要快速度返回当前页顶部时可以使用空链接。
<a href="#">返回顶部</a>
空链接实际应用使用较多
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
