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

相关推荐
华玥作者16 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_17 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠17 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
lang2015092817 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC18 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务19 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
嘿起屁儿整19 小时前
面试点(网络层面)
前端·网络
VT.馒头19 小时前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
phltxy20 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron070721 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js