路径，超链接，图片

最新推荐文章于 2022-05-17 22:03:32 发布

大白兔i

最新推荐文章于 2022-05-17 22:03:32 发布

阅读量335

点赞数 1

分类专栏：笔记文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_44956916/article/details/108553010

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

Day02课堂笔记

一、回顾

1.1 HTML的基本语法

文档声明
<!doctype html>

注释
<!--注释的内容-->
注释掉的部分浏览器解析不会执行

标签元素
  1.标签的语义功能
  2.标签的属性
  3.单标签还是双标签

1.2 HTML常用标签

主体结构标签
html  页面的根标签 双
head  页面头部    双
body  页面主体，需要显示在页面中的内容都写在body中  双

头部中的标签
title  页面的标题   双
meta   设置页面的元信息   单
		属性：name content http-equive  charset
		功能：
		1.设置字符集编码
		<meta charset="utf-8">
		2.设置关键字和描述信息
		<meta name="keywords" content="关键字1,关键字2">
		<meta name="description" content="">
		3.设置页面跳转
		<meta http-equiv="refresh" content="10；url=  ">
link   设置引用的外部资源和本文件之间的关系      单
		属性：rel href
		功能：设置标题的图标
		<link rel="shortcut icon" href="">
		
格式排版标签
   h1~h6 标题标签 双
   p    段落   双
   hr   分割线 单
   br   换行   单
   pre 文本原文输出 双
   div 用于页面布局 双
文本标签
em     表示强调，斜体   双
strong  表示强调，加粗   双
del    降价  双
ins     新增  双
sub   下标   双 
sup   上标   双

二、绝对路径和相对路径

2.1.绝对路径

一个完整的网址

http://www.baidu.com

2.2 相对路径

1.目标文件与当前文件同级

目标文件名
或者
./目标文件名

2.目标文件在当前文件的下级目录

与当前文件同级的文件夹/目标文件名
./与当前文件同级的文件夹/目标文件名

3，目标文件在当前文件夹的上级目录

../表示上一级目录
../../表示上一级的上一级目录

三、超链接

3.1相关的标签

标签名	语义和功能	属性	单还双
a	超链接	href:指定目标地址 target属性：指定目标文件在哪里打开__self默认 _blank name:用于设置锚点名	双
base	指定超链接的基础特性写在 head 标签的里面	href 属性：设置超链接的基础地址（影响相对路径） target 属性：指定目标文件在哪里打开值 `_self`(默认)、`_blank`	双

3.2超链接的特殊用法

1.目标文件

通过href属性指向目标地址，目标地址就是文件的地址
点击超链接，浏览器就会打开目标地址指向的文件
如果目标地址指向的文件的格式浏览器打不开，执行下载

2.超链接特殊用法

<a href="tel:10086">打电话</a>
<a href="sms:3478192-48"></a>

3.指定目标文件打开的位置

把targrt属性的值设置为_blank,目标文件会在新窗口打开
target 属性的默认值是_self

3.3锚点

1.在页面中设置锚点

第一种方式  使用a标签
    <a name="锚点名"></a>
第二种方式   给标签设置id属性
    <div id="锚点名"></div>

2.跳转到锚点

跳转到锚点，还是需要超链接，不跳转到新页面。而是跳转到当前页面的锚点位置

<a href="#锚点名"></a>
<a href="#">返回定位</a>

注意：

不但可以跳转到本页面的某个锚点

<a href="#锚点名">

还可以跳转到其他页面的某个锚点

<a href="页面地址/#锚点">

四、图片

4.1相关标签

标签名	功能	属性	单？双？
img	图片	src:指定图片的地址 alt:图片的说明文字,如果图片无法正常加载 usemap:指定该图像对应的map值	单
map	图像映射	name:指定一个名字，用于与img标签做关联	双
area	用于图像映射划分区域必须写在map标签的里面	shap:指定区域的形状，可选值：rect,circle,poly coords:根据区域形状不同，执行不同坐标 href:指定目标地址 target:指定在什么位置打开新的页面	单

4.2在页面中引入图像

<img src="../02-超链接/anni.jpg" alt="安妮" title="你好安妮" height="300">

4.3图片可以与超链接结合使用

<a href="http://www.baidu.com">
            <img src="images/anni.jpg" alt="安妮" height="200">
        </a>

4.4图像映射

<img src="images/浏览器.jpg" alt="浏览器" usemap="#mymap">
 <map name="mymap">
    <area shape="circle" coords="130,114,100" href="https://www.google.cn/chrome/" target="_blank" title="chrome浏览器">
     <area shape="rect" coords="265,27,491,159" href="http://www.firefox.com.cn/" target="_blank" title="firefox浏览器">
     <area shape="poly" coords="138,349,248,157,374,346" href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target="_blank" title="IE浏览器">
  </map>