2023/12/18学习笔记

Cloud0128

已于 2023-12-18 17:38:58 修改

阅读量336

点赞数 5

分类专栏：百战程序员WEB前端工程师文章标签：学习笔记

于 2023-12-18 17:25:08 首次发布

本文链接：https://blog.csdn.net/Cloud0128/article/details/135067380

版权

百战程序员WEB前端工程师专栏收录该内容

3 篇文章 0 订阅

订阅专栏

章节2：HTML5基础元素

7：标签之段落_换行_水平线

1、段落

语法：<p></p>

2、换行

语法：<br>

3、水平线

语法：<hr>

属性：

（1）color 设置水平线的颜色

（2）width 设置水平线的宽度

（3）height 设置水平线的高度

（4）align="left/right" 设置水平线的水平对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7：标签之段落_换行_水平线</title>
</head>
<body>
    <p>这是一个段落</p>
    <p>这里可以<br>换行</p>
    <hr color="green" width="200px" size="20px" align="left">
</body>
</html>

8：标签之图片

语法：<img>

属性：

（1）src 设置图片的路径

（2）alt 设置图片无法正常显示时的提示文字

（3）width 设置图片的宽度

（4）height 设置图片的高度

（5）title 设置鼠标悬停在图片时的提示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8：标签之图片</title>
</head>
<body>
    <img src="1.jpg" alt="城市夜景" width="1200px" height="800px" title="城市夜景">
</body>
</html>

9：路径详解

1、绝对路径

2、相对路径

（1）/ 子级关系

（2）../ 父级关系

（3）./ 同级关系

3、网络路径

Cloud0128

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
2023/12/18学习笔记

（4）align="left/right" 设置水平线的水平对齐方式。（5）title 设置鼠标悬停在图片时的提示文字。（2）alt 设置图片无法正常显示时的提示文字。（3）height 设置水平线的高度。（1）color 设置水平线的颜色。（2）width 设置水平线的宽度。（4）height 设置图片的高度。（3）width 设置图片的宽度。7：标签之段落_换行_水平线。（1）src 设置图片的路径。章节2：HTML5基础元素。（2）../ 父级关系。语法：（3）./ 同级关系。
复制链接

扫一扫