认识前端（二）

最新推荐文章于 2024-09-14 22:18:26 发布

snowyfly

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量226

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/snowyfly/article/details/125745137

版权

一.首行缩进

text-indent: px;

正值向里缩进

负值向外缩进

二.br标签

<br> 强制换行，不参与标签分类

三.图片标签

img 图片标签

行内块标签

语法：

<img src="" alt="">

src属性：图片的路径

alt属性:预替换文本，当图片路径错的时候显示的文字

特性：

1.默认一行显示，水平布局，一行放不下会自动折行

2.换行和空格会被解析(只解析一个空格)

3.可以设置宽高 width height 单位px 可以省略，写在标签上

四.路径

绝对路径

1.某盘符下的路径

找到图片，右击--属性--安全--对象名称--复制对象名称后的路径

2.带着协议的路径（网址路径）

https:

http:

选择图片，右击--复制图片地址

相对路径

/ 表示根目录

./ 当前目录可以省略

../ 上级目录

../../ 上上级目录

../../../ 上上上级目录

文件夹名/ 表示下一级目录

摩洛哥/moluoge_03.jpg

表示摩洛哥文件夹里的一张图片

五.行级标签

span标签:无语义标签，用于区分样式
没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容
- 应用场景：控制局部文本的样式
- b标签：一个实体标签，它里面包围的文本显示粗体效果
- strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果
- i标签：它里面包围的文本显示斜体效果
- em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果
- del标签：删除线
- sup标签：上标
- sub标签：下标
特性
- 宽度默认由内容撑开
- 高度默认由内容撑开
- 默认横向显示——水平布局，一行排不下，自动折行
- 换行和空格会被解析

a标签不能设置宽高

超链接标签用于页面跳转

<a href=""></a>

特性：

1.默认一行显示，水平布局，一行放不下会自动折行

2.换行和空格会被解析(只解析一个空格)

3.宽高由内容撑开

4.自带下划线

5.自带字体颜色

6.鼠标指针的形状为手型

7.去掉a标签下划线text-decoration: none;

text-decoration:文本装饰线

href属性:跳转的路径

<!-- 点击这个也会跳转到顶部，但是跳转到顶部的原因:由于href属性没有写东西，点击的时候会刷新页面 -->
  <a href="">点击跳转到顶部没有#</a>

  <!-- 伪链接  失去跳转功能-->
  <a href="javascript:">伪链接</a>



  <!-- 
    href属性不写的话，当你点击的时候会进行刷新页面
     href:跳转的路径；
        网址，本地文件，空链接（#占位，跳转到当前页的顶部），伪链接（href="javascript:"假链接，不跳转的）
    
   -->

title属性:提示信息的作用

target属性:被链接文档在哪里显示

target='_self' 在当前窗口跳转,默认值

target='_blank'在新窗口跳转

利用锚点来跳转指定锚点处

href属性

定义锚点不用a标签

用id属性进行定义锚点

引入锚点用a标签

href='#定义锚点的名称'

引用锚点

<a href="#定义锚点的名称"></a>