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

相关推荐
2301_81873206几秒前
前端一直获取不到后端的值,和数据库字段设置有关 Oracle
前端·数据库·sql·oracle
vx_bisheyuange几秒前
基于SpringBoot的酒店管理系统
前端·javascript·vue.js·spring boot·毕业设计
慧一居士4 分钟前
同一个服务器上不同的域名跳往不同的前端项目页面,不显示端口号 ngnix根据不同域名跳转
运维·服务器·前端
派大鑫wink5 分钟前
【Day38】Spring 框架入门:IOC 容器与 DI 依赖注入
java·开发语言·html
ct9786 分钟前
WebGL核心API
前端·gis·webgl
lexiangqicheng6 分钟前
Ant Design Pro 实战:Web 后台页面标准化开发规范与最佳实践
前端
ZI Keep Going8 分钟前
前来填坑:Search Around the World全球联合部署搜索引擎
前端·javascript·搜索引擎
手握风云-8 分钟前
JavaEE 进阶第十期:Spring MVC - Web开发的“交通枢纽”(四)
前端·spring·java-ee
孩子 你要相信光8 分钟前
解决:React 中 map 处理异步数据不渲染的问题
开发语言·前端·javascript
程序员小李白9 分钟前
js初相识:简介及基本语法
前端·javascript·html