pink老师HTML5+CSS3学习笔记 | DAY2

头毛很炸

已于 2023-03-13 14:37:22 修改

阅读量193

点赞数

文章标签： html 学习 html5

于 2023-03-09 13:11:20 首次发布

本文链接： https://blog.csdn.net/m0_53454320/article/details/129420664

版权

本文介绍了HTML中的基础元素，包括div和span用于布局，图像标签的src、alt、title等属性，路径的相对与绝对路径概念，以及超链接标签<a>的各种用法如外部链接、内部链接、空链接、下载链接和网页元素链接。此外，还提到了注释和特殊字符的使用。

摘要由CSDN通过智能技术生成

1、div和span标签

2、图像标签

3、路径

4、超链接标签

5、注释和特殊字符

1、div和span标签

①没有语义，就是个盒子，用来装内容的。

②div是division（分割，分区）的缩写，span（跨度）

③特点：

div标签用来布局，一行只能放一个div，理解为一个大盒子；
span标签用来布局，一行上可以放多个span，理解为一个小盒子。

④应用：

<body>
    <div>div标签1：单独占据一行</div>123被另起一行
    <div>div标签2：单独占据一行</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <span>span标签3</span>
    span标签可以跨行显示
</body>

2、图像标签

①<img src="图像" />，单标签；

②属性：属于某个标签的特性；

③src是img标签的必须属性（用img标签一定要写src属性），用于指定图像文件的路径和文件名；

④其他属性：

alt：文本属性，替换文本，图像不能显示时替换；
title：文本属性，提示文本，鼠标放在图像上显示文字；
width：像素属性，设置图像的宽度；
heigh：像素属性，设置图像的高度；
宽度和高度一般不同时设置，可只设置一项，另一项会等比例缩放；
border：像素属性，设置图像的边框粗细。一般在CSS中设置。

⑤应用：

<body>
    <h1>img标签的使用：</h1>
    <img src="img01.jpg" width="500" border="10"/>
    <h1>alt 替换文本，图像显示不出来时用文字替换：</h1>
    <img src="img.jpg" alt="我爱丸子妹~" width="500"/>
    <h1>title 提示文本，鼠标放在图像上提示的文字：</h1>
    <img src="img01.jpg" title="我爱丸子妹~" height="200"/>
</body>

⑥注意点：

图像标签可以拥有多个属性，必须写在标签名的后面；
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
属性采取键值对的格式（即key="value"的格式，属性="属性值"）；

3、路径

①目标文件夹和根目录：

目录文件夹：就是普通文件夹，存放页面相关的所有文件；
根目录：打开目录文件夹的第一层就是根目录。

②vscode打开目录文件夹：

文件--打开文件夹--选择目录文件夹。如此后期更加方便管理文件。

③路径分为相对路径和绝对路径：

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。就是图片相对于html页面的位置。
- 分类：
  - 同一级路径：图像文件与html文件位于同一级，如
```
<img src="img.png">
```
  - 下一级路径：符号"/",图像位于html文件下一级，如
```
<img src="images/img.png">
```
  - 上一级路径：符号"../"，图像位于html文件的上一级，如
```
<img src="../img.png">
```
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，如本地地址
```
<img src="F:\HTML\images\img.png">
```
或网络地址
```
<img src="F:\HTML\imges\https://img-home.csdnimg.cn/images/20201124032511.png">
```
注意：
- 相对路径和绝对路径的斜杠符号不同，相对路径是"/"，绝对路径是"\"；
- 绝对路径少用。

4、超链接标签

①用于从一个页面链接到另一个页面，<a href=""></a>。

②属性：

href：必须属性，用于指定连接目标的url地址，当为标签应哟个href属性时，它就具有了超链接的功能格式：一定要以http://开头；
target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开。

③链接分类：

外部链接：如：<a href="http://www.baidu.com">百度</a>；
内部链接：跳转该网站内部的页面，直接链接内部页面名称，如：<a href="index.html">首页</a>；
空链接：如果没有确定链接目标时，<a href="#">首页</a>；
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件，<a href="img01.zip">下载</a>；
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接，<a href="http://www.baidu.com"><img src="img.png"></a>；
锚点链接：点击链接可以快速定位到页面中的某个位置
- 在连接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>；
- 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>。

④应用：

<body>
    <h3>外部链接：</h3>
    _self属性是target的默认值，在当前窗口打开网页：<a href="http://www.baidu.com" target="_self">百度</a>
    <br />_blank属性是在新窗口打开页面：<a href="http://www.baidu.com" target="_blank">百度</a>

    <h3>内部链接：</h3>
    <a href="05-课堂案例1-体育新闻.html">体育新闻</a>

    <h3>空链接：</h3>
    <a href="#">首页</a>

    <h3>下载链接：</h3>
    <a href="img01.zip">下载</a>

    <h3>网页元素链接：</h3>
    <a href="http://www.baidu.com"><img src="img01.jpg" width="200"></a>
</body>