当前位置: 首页 > news >正文

HTML初学者第四天

<1>图像标签

在HTML标签中,<img>标签用于定义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的缩写,意为:锚。

​<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.网络元素链接:在网页中的各种网络元素,如文本、图像、表格、音频、视频都可以添加超链接

<!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;这是单引号&apos;<br />这是反斜杠\这是斜杠/<br />这是和号&amp;<br />&yen;&copy;&reg;&deg;&plusmn;&times;&divide;&sup2;&sup3;
</body>
</html>

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

http://www.dtcms.com/a/273154.html

相关文章:

  • Android 应用常见安全问题
  • JavaScript基础(三)
  • 一文讲清楚React Hooks
  • 解决问题的“测地线”:关于第一性原理与其他系统思考框架
  • RocksDB 与 ZenFS:原理、特性及在科研与工程中的应用初步探索
  • 使用Arthas监听Spring代理对象
  • 从UI设计到数字孪生实战部署:构建智慧教育的在线学习分析平台
  • Java观察者模式实现方式与测试方法
  • Constants
  • SSM 框架整合教程:从环境搭建到 CRUD 实现
  • html页面,一个控件,可以粘贴图片和样式,一直按enter键会将下面内容推下去
  • OrCAD 24.1补丁005中文界面切换指南
  • QT Android 如何打包大文件到目录下?
  • 【Pandas】pandas DataFrame from_records
  • Android开发中几种scope的对比
  • ClickHouse JSON 解析
  • Kubernetes Dashboard UI 部署安装
  • stm32计时的两个方法
  • HarmonyOS学习记录4
  • 基于U-net的高阶心音信号去噪系统设计与实现
  • SSE方式调用php,不是直接 post,
  • 【C++基础语法】
  • STM32F103之ModBus\RS232\RS422\RS485
  • 瑞幸X多邻国“疯感”营销:以情感共鸣取代硬广触达
  • Qt开发:QtConcurrent介绍和使用
  • Python正则表达式实战指南
  • 深度学习13(经典卷积网络结构+卷积网络结构优化)
  • J1939协议
  • 个体户核定多地暂停,将不再享受核定征收?
  • 人工智能-基础篇-29-什么是低代码平台?