<h1>标签到<h6>标签为标题标签 通常用于一个页面的最上边的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<h1>这是第一大标签</h1>
<h2>这是第二大标签</h2>
<h3>这是第三大标签</h3>
<h4>这是第四大标签</h4>
<h5>这是第五大标签</h5>
<h6>这是最小的标签</h6>
</body>
</html>
浏览器显示
<p>标签和<br>标签介绍
<p>标签为段落标签 <br>标签为换行标签 对于初学者没接触盒子之前可以换行 美化文章,看起来不会那么杂乱无章。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落和换行标签</title>
</head>
<body>
曲曲折折的荷塘上面,弥望旳是田田的叶子。
叶子出水很高,像亭亭旳舞女旳裙。层层的叶子中间,零星地点缀着些白花,<br>有袅娜地开着旳,有羞涩地打着朵儿旳;正如一粒粒的明珠,
又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,<br>仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,
霎时传过荷塘的那边去了。<br>叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。
叶子底下是脉脉(mò)的流水,遮住了,不能见一些颜色;而叶子却更见风致了
<!-- <br>换行标签
<p>段落标签</p> -->
<p>朱自清《荷塘月色》片段</p>
</body>
</html>
效果图:
此处为没有使用<br>标签之前的效果
上边的文字为使用了<br>标签后的效果,可以看到明显的换行。
<p>标签和<br>虽然都可以换行 但是会有细微的差距,<br>标签在换行时与上下文没有明显的间距,但是在使用<p>之后会发现使用<p>的那一端话会与上下文有明显的间隙,在设计页面的时候根据自己的情况来使用这两个标签。
修饰文本内容的简单标签<b>、<i>、<del>、<ins>。
<b>:对于文本使用使用后可以使文字加粗。
<i>:标签在使用的时候使文字或者整段文字倾斜。
<del>:会把标签内的文字打上删除线。
<ins>:会把标签内的文字或者文段标记上下划线。
另外补充一下<hr>标签 此表现使用是一条横画线。
<!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>
<b>这是b标签</b>
<i>这是i标签</i>
<del>这是del标签</del>
<ins>这是ins标签hr</ins>
<br>下边为hr标签
<hr size="20px" noshade=>
</body>
</html>
效果图:![](https://i-blog.csdnimg.cn/blog_migrate/1645ea07d0363953139ebef9477117cb.png)
在<hr>标签中 size=“ px” 代表横画线有多宽,后边的noshade则代表颜色(没有设置所以就为默认的颜色)。
图片标签
<!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>
<h1>相对路径的图片显示</h1>
<img src="../img/1.jpg" width="250" height="500" alt="图片显示错误">
<h1>绝对路径下的照片</h1>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0" width="250" height="500">
<h1>图片显示错误</h1>
<img src="./" width="250" height="250" title="图片错误" alt="图片显示错误">
</body>
</html>
在插入图片的时候使用img src=“ 图片的路径” width=“ 图片的长度” height=“ 图片有多宽”,
图片在插入时分为相对路径和绝对路径:
相对路径:直接使用本机存有的图片就为相对路径
绝对路径:访问网站有照片的时候右键复制照片路径到src处就为绝对路径。
title="图片错误":是在照片出错的时候,会出现一段话。(只有在加载不出照片把鼠标放到jpg上时才会出现)。
alt="图片显示错误:与title的区别是在照片加载不出来时,会在照片后边出现,不需要把鼠标放到jpg上才显示。
第一次写文章,谢谢理解!