Day02 HTML 课堂笔记
注意点：语义标签的目的就是为了给搜索引擎看，不在乎其具体表现形式
1 文本标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
em | 表示强调，默认表现为斜体字 | 双标签 | |
strong | 表示强调，默认表现为粗体字 | 双标签 | |
del | 表示删除的内容 | 双标签 | |
ins | 表示增加的内容 | 双标签 | |
sub | 表示下标字 | 双标签 | |
sup | 表示上标字 | 双标签 | |
span | 没有语义的文本标签 | 双标签 |
<!--一下文本标签 作为了解-->
<cite> 用于引证、举例、(标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题)通常为斜体字
<dfn> 定义一个定义项目
<code> 定义计算机代码文本
<samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<abbr> 定义缩写 配合title属性 (IE6以上)
<bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<small> 标签定义小型文本（和旁注）
<b> 粗体字标签 根据 HTML 5 的规范，<b> 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。
<i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
<u> 下划线字体标签 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。 请尽量避免使用 <u> 为文本加下划线，用户会把它混淆为一个超链接。
<q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字)
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块状元素)
<address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素
<font> H5已删除 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> H5已删除 打字机文字
<big> H5已删除 大型字体标签
<strike> H5已删除 添加删除线
<acronym> H5已删除 首字母缩写 请使用<abbr>代替2 图片
2.1 img 标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
img | 在页面中插入图片 | src：设置图片的地址 alt：设置图片的替代文字 width：设置图片的宽度 height：设置图片的高度 | 单标签 |
总结：
1. alt属性设置图片的替代文字，当图片无法正常加载，会显示替代文字
2. 设置图片尺寸，只设置height或者width时，另一个属性会按比例缩放2.2 常见的图片格式
jpg/jpeg 有损压缩，不支持透明
png 无损压缩，支持透明
gif 支持透明，支持动画3 相对路径和绝对路径
当前文件：代码所在文件
目标文件：代码要引入的文件
3.1 绝对路径
1、绝对路径指的是文件的绝对地址，与当前文件所在的位置无关
2、前端中使用的绝对地址是文件在网络中的位置，也称为URL（统一资源定位符）
3、目标文件无论与当前文件是否在一台计算机中，都可以通过绝对路径访问
注意：文件想要被网络访问，该计算机需要部署web服务器绝对路径示例：https://pics6.baidu.com/feed/d.jpeg3.2 相对路径
1、目标文件相对于当前文件，处在什么位置
2、目标文件在当前文件的同级目录或者下一级目录
./ 当前目录
./ 可以省略
3、目标文件在当前文件的上级更上级或者必须通过上级才能访问到
../ 表示上一级目录 ../../ 表示上两级目录 以此类推3.3 HTML 中使用路径的场景
1、使用 img标签引入图片文件
2、使用 video标签引入视频文件
3、使用 audio标签引入音频文件
4、使用 iframe标签引入多种类型文件
5、使用 script标签引入 js文件
6、使用 a标签关联目标文件
7、使用 link标签关联 css文件4 超链接和锚点
4.1 a 标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
a | 设置超链接 | href：设置目标文件的地址 target：设置目标文件在哪个窗口打开： | 双标签 |
总结：
1、a 标签只有在设置了 href属性才能成为超链接
2、target 属性的默认值是 _self，目标文件会在本窗口打开，
target 属性设置为 _blank，目标文件在新窗口打开4.2 超链接
① 跳转新的页面
<a href="https://www.baidu.com" >百度</a>
<a href="../03-相对路径练习/pages/index.html">相对路径的练习</a>② 跳转到其他类型的文件
<a href="./resouces/小乐老师的业余生活.jpg">图片：小乐老师的业余生活</a> <br>
<a href="./resouces/小乐老师的性福生活.mp4">视频：小乐老师的性福生活</a> <br>
<a href="./resouces/如何30岁之前走上人生巅峰.pdf">pdf：如何30岁之前走上人生巅峰</a> <br>
<a href="./resouces/如何拥有百亿资产.docx">word文档：如何拥有百亿资产</a> <br>
<a href="./resouces/小乐老师的私房照片.7z">压缩文件：小乐老师的私房照片</a>总结：
1、如果超链接的目标文件是浏览器可以打开的文件类型，点击超链接则打开文件
2、如果超链接的目标文件是浏览器无法打开的文件类型，点击超链接则下载文件③ 超链接的其他特殊功能
<a href="mailto:xxx@qq.com">发邮件</a> <br>
<a href="tel:18551002222">打电话</a> <br>
<a href="sms:18551002222">发短信</a>④ href 的值是空的
<a href="">href值为空，页面刷新</a>⑤超链接地址不存在
地址不存在会报404错4.3 锚点
① 如何设置锚点
1、给标签设置id属性，该标签就会变成锚点，id的属性值就是锚点名
2、任何标签都可以设置id属性，id属性值不能相同② 如何跳转到锚点
<!-- 跳转到本页面的指定的锚点 -->
<a href="#锚点名"></a>
<!-- 跳转到页面的顶部 仅添加#，不写锚点名即可-->
<a href="#"></a>
<!-- 跳转到其他页面的指定锚点-->
<a href="页面地址#锚点名"></a>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
