HTML初学者第四天

<1>图像标签

在HTML标签中,<img>标签用于定义HTML页面中的图像。

html 复制代码
<img src="图像URL" />

src是<img>标签的必须属性,它用于指定图像文件的路径名好和文件名

|--------|------|-------------------|
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上,显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |

图像标签的注意点:

-图像标签可以拥有多个属性,必须写在标签名后面。

-属性之间不分先后顺序,标签名与属性、属性-与属性之间均以空格分开。

-属性采用键值对的格式,即key="value"的格式,属性="属性值"。

<2>目录文件夹和根目录

目录文件夹:就是普通文件,里面只不过存放了我们做页面所需要的素材,比如html文件,图片等。

根目录:打开目录文件夹的第一层就是根目录。

<3>相对路径和绝对路径

3.1相对路径

相对路径:以引用文件所在位置为参考基础,而建立的目录路径。

|-------|-----|---------------------------------------------------|
| 相对路径 | 符 号 | 说明 |
| 同一级路径 | | 图像文件位于HTML文件同一级 如<img src="candy.png" /> |
| 下一级路径 | / | 图像文件位于HTML文件下一级 如 <img src="images/candy.png /> |
| 上一级目录 | ../ | 图像文件位于HTML文件上一级 如<img src="../candy.png /> |

3.2绝对路径

绝对路径:是指在目录下的绝对位置,直接达到目标位置,通常从盘符开始的路径。

例如:"D:\web\img\logo.gif"或者完整的网络地址"http://www.itcast.cn/images/logo.gif"。

<4>超链接标签

在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。

4.1超链接的语法格式

单词anchor的缩写,意为:锚。

html 复制代码
​<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>

两个属性的作用如下:

|--------|-----------------------------------------------|
| 属性 | 作用 |
| href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性,它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在窗口中打开方式 |

4.2链接的分类

1.外部链接:例如<a herf="http"//www.baidu.com">百度</a>。

2.内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href="index.html">首页</a>。

3.空链接:如果当时没有确定链接目标时,<a href="#">空链接</a>。

4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

5.网络元素链接:在网页中的各种网络元素,如文本、图像、表格、音频、视频都可以添加超链接

html 复制代码
<!DOCTYPE html>
<br lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h4>1.外部链接</h4>
  <a href="http://www.qq.com" >QQ</a>
  <br /><a href="体育新闻.html" target="_blank">体育新闻</a></body>
  <br /><a href="#">空链接</a>
  <br /><a href="前端.zip">前端压缩包(有zip或者exe等压缩包形式)</a>
  <br /><a href="https://www.baidu.com" target="_blank"><img src="前端.png"></a>
</body>
</html>

6.锚点链接:点击链接可以快速定位到页面中的某个位置

-在链接文本中的href属性中,设置属性值为 #名字的形式,如<href="#two">第二集</a>

-找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id = "two">第二集介绍</h3>

<5>HTML中的注释和特殊字符

5.1注释

如果需要再HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

HTML中的注释以"<!--"开头,以"-->"结束。

即<!-- 注释语句 --> 可以用快捷键:ctrl + /

5.2特殊字符

在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。

|------|------|-----------|
| 特殊字符 | 描述 | 字符的代码 |
| | 空格符 | &nbsp; |
| < | 小于号 | &lt; |
| > | 大于号 | &gt; |
| & | 和号 | &amp; |
| ¥ | 人民币 | &yen; |
| © | 版权 | &copy; |
| ® | 注册商标 | &reg; |
| ° | 摄氏度 | &deg; |
| ± | 正负号 | &plusmn; |
| x | 乘号 | &times; |
| ÷ | 除号 | &divide; |
| ₂ | 平方 | &sup2; |
| ³ | 立方 | &sup3; |

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 这是一行注释 -->
  <!-- 快捷键为:ctrl + / -->  
   <br /> 这里有&nbsp;空格
  <br /> 这里有&nbsp;&nbsp;两个空格
  <br />这是大于号&gt;这是小于号&lt;这是等于号=这是双引号&quot;这是单引号'
  <br />这是反斜杠\这是斜杠/
  <br />这是和号&amp;
  <br />&yen;&copy;&reg;&deg;&plusmn;&times;&divide;&sup2;&sup3;
</body>
</html>

(ps:以上内容基于B站pink老师前端基础课程整理)

相关推荐
G_whang3 小时前
jenkins自动化部署前端vue+docker项目
前端·自动化·jenkins
凌辰揽月4 小时前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我6 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端6 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴7 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端7 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧7 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er7 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶7 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李8 小时前
前端开发中的输出问题
开发语言·前端·javascript