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老师前端基础课程整理)

相关推荐
namehu2 分钟前
阿里云 acme.sh install timeout(超时)问题解析与解决方案
linux·前端·https
浩男孩18 分钟前
🍀简简单单使用 TS 封装个工具库【更新中 ✍】
前端·typescript
Shinpei38 分钟前
如何在AI流式数据中渲染mermaid图表
前端·deepseek
快起来别睡了1 小时前
深入浅出 Event Loop:前端工程师必须掌握的运行机制
前端·javascript
user297525876121 小时前
别再用关键字搜了!手搓一个Vite插件,为页面上的标签打上标记
前端·javascript·vite
典学长编程1 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第五天(jQuery函数库)
javascript·css·ajax·html·jquery
野区小女王1 小时前
react调用接口渲染数据时,这些表格里的数据是被禁选的
前端·react.js·前端框架
尝尝你的优乐美1 小时前
原来前端二进制数组有这么多门道
前端·javascript·面试
CF14年老兵1 小时前
🔥 2025 年开发者必试的 10 款 AI 工具 🚀
前端·后端·trae
张元清2 小时前
解密苹果最新 Liquid Glass 效果:如何用代码重现 iOS 设计系统的视觉魔法
前端·css·面试