HTML5基础笔记二（标签之段落，换行，水平线，图片，超文本连接，文本，）
目录
标签之段落，换行，水平线。
标签之图片
标签之超文本连接
标签之文本
标签之段落，换行，水平线。
段落 <p> 表示 双标签
换行<br> 表示 单标签
水平线<hr> 表示 单标签
标准格式 <br /> 当然也是用<br> 推荐是标准格式
水平线 hr 也是一个单标签 可以设置属性
color 是颜色 颜色就是颜色百科 red pink 等
width 是设置水平线的长度 长度和高度 设置的是px像素
size 是设置水平线的高度
align 是设置水平线的对齐方式 可取值 left 或者right 默认是居中 cencer
详情见代码 标签之段落 ，换行 ，水平线复制
具体代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签之段落，换行，水平线</title> </head> <body> <!--段落用<p> 换行用<br> 水平线用<hr>--> <!--不推荐把文本放在外面。通过标签去承载他们，如果把文本放在外面 会引发各种排版问题--> <!--如果不希望产生一个新段落的情况下进行换行，用br标签--> <p>我是一个段落标签</p> <p>如果希望在不产生一个性<br>段落下进行换行</p> <!--这里是在一个段落里面 添加一个br 完成换行效果--> <br> <!--这里是添加空白的换行为了文本--> <p>我是第二段标签</p> <hr> <!--创建一个默认的水平线--> <hr color="pink" > <!--给水平线添加属性 颜色--> <hr width="100" > <!--给水平线添加属性 长度--> <hr color="red" size="10px" > <!--给水平线添加属性 颜色和高度 单位是像素 px--> <hr color="pink" size="30" width="100" align="left"> <!--给水平线添加属性 颜色 高度 长度 对齐方式--> <hr color="pink" size="30" width="100" align="cencer"> <hr color="pink" size="30" width="300px" align="right"> </body> </html>
运行效果如下：
标签之图片
网站最多的标签元素 也就是图片了
图片 <img>
img里面的属性 有src alt width height title
src：路径
alt 规定图片的替代文本
width 规定图片的宽度
height 规定图像的高度
title 鼠标悬停在图片上给与提示
详情见标签是图片
图片的路径详细解释
绝对路径和相对路径 网络路径
绝对路径： 当前文件下与之靠近的路径
相对路径：整个电脑磁盘下的路径
网络路径：网络上访问的路径复制
具体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签之图片</title> </head> <body> <!--添加单标签 img 设置图片路径 src 我们这里用的是相对路径--> <img src="images图片音频视频素材/10.jpg"> <!--单图片无法显示的时候，用来替代的文本 就是alt的作用 ，比如我们故意把图片格式修改了一下--> <img src="images图片音频视频素材/12.jp1g" alt="美丽的小姐姐"> <!--修改图片的宽度width 和高度height--> <img src="images图片音频视频素材/110.jpg" width="500px" height="200px"> <!--通常我们只是修改图片的宽度 不修改图片的高度，避免图片失真--> <img src="images图片音频视频素材/2.jpg" width="1000px"> <!--鼠标放到图片上显示的文字--> <img src="images图片音频视频素材/85.jpg" title="我是小美女"> <!--使用网络路径下 导入图片地址 网络地址支持换行--> <img src="http://iwenwiki.com/api/newworld/images/n1.png" alt="不会过期的"> </body> </html>
请自行把src路径更改为本地路径 相对或者绝对路径在运行
标签之超文本连接
标签之超文本链接 <a> </a> 整个是一个双标签
超文本链接是使用标签<a></a> 来设置超文本链接的
超链接可以是一个字，一个词，或者一组词，也可以是一个图片，用户可以通过点击这些内容来跳转到新的文档或者和当前文档的某个部分
<a href='完整的网络地址'>超链接文本</a>
例如https://www.itbaizhan.com/stages/id/17
https://www.baidu.com/
给超链接设置属性 href
默认情况下 链接以一个未访问过的链接显示未蓝色字体 并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时，链接显示为红色并带有下划线
后期可以用css修改这些样式
也可以通过设置 来设置去网页的顶部或者底部
<a href="#buttom底部" name="top顶部" >去底部</a>
<a href="#top顶部" name="buttom底部">我是底部要回到顶部</a>
锚点 id设置毛 href跳到锚的位置
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>复制
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签之超文本链接锚点</title> </head> <body> <!--设置一个超链接，可以快读到1-4页--> <!--p id=锚 a 里面的href 等于跳到锚--> <p id="第一页">第一页</p> <a href="#第二页">跳转第二页</a> <a href="#第三页">跳转第二页</a> <a href="#第四页">跳转第四页</a> <br> <img src="images图片音频视频素材/1.jpg" alt=""> <img src="images图片音频视频素材/2.jpg" alt=""> <img src="images图片音频视频素材/3.jpg" alt=""> <p id="第二页">第二页</p> <a href="#第一页">跳转第一页</a> <a href="#第三页">跳转第二页</a> <a href="#第四页">跳转第四页</a> <br> <img src="images图片音频视频素材/4.jpg" alt=""> <img src="images图片音频视频素材/5.jpg" alt=""> <img src="images图片音频视频素材/6.jpg" alt=""> <p id="第三页">第三页</p> <a href="#第一页">跳转第一页</a> <a href="#第二页">跳转第二页</a> <a href="#第四页">跳转第四页</a> <br> <img src="images图片音频视频素材/7.jpg" alt=""> <img src="images图片音频视频素材/8.jpg" alt=""> <img src="images图片音频视频素材/9.jpg" alt=""> <p id="第四页">第四页</p> <a href="#第一页">跳转第一页</a> <a href="#第二页">跳转第二页</a> <a href="#第三页">跳转第三页</a> <br> <img src="images图片音频视频素材/10.jpg" alt=""> <img src="images图片音频视频素材/11.jpg" alt=""> <img src="images图片音频视频素材/12.jpg" alt=""> </body> </html>
请自行更换图片地址。以上代码仅仅是用个图片地址来测试 超文本连接锚点和位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签之超文本链接</title> </head> <body> <!--设置一个可以回到顶部或者底部的超链接--> <a href="#buttom底部" name="top顶部" >去底部</a> <br> <!--设置一个超文本链接，没有指向其链接地址--> <a href="">hi</a> <!--设置一个指向百度的一个超链接--> <br> <a href='https://www.baidu.com/'>百度</a> <!--也可以是一个图片--> <a href="https://image.baidu.com/search/index?tn =baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=С????&fr =ala&ala=1&alatpl=normal&pos=0&dyTabStr=MTEsMCwzLDEsMiw0LDYsNSw3LDgsOQ=="> <img src="images图片音频视频素材/2.jpg" alt="" title="跳转到小姐姐窝"> </a> <img src="images图片音频视频素材/85.jpg" title="我是小美女"> <img src="images图片音频视频素材/84.jpg" title="我是小美女"> <img src="images图片音频视频素材/83.jpg" title="我是小美女"> <img src="images图片音频视频素材/82.jpg" title="我是小美女"> <br> <a href="#top顶部" name="buttom底部">我是底部要回到顶部</a> </body> </html>
标签之文本
标签之文本
文本的属性
em 定义着重文字
b 定制粗体文字
i 定义斜体字
strong 定义加重语气
del 定义删除字
span 元素没有特殊的含义
文本标签和段落标签的区别是，段落展示一段文字，文本仅仅用来显示某个字和一组词复制
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签之文本</title> </head> <body> <!--加粗是b--> <b>我是加粗的文字</b> <br> <!--加重语气--> <em>我是加重语气？</em> <br> <!--斜体字文本显示--> <i>我是斜体字</i> <br> <!--加粗重点显示--> <strong>我是加粗重点显示</strong> <br> <!--del 中间一条横线--> <del>我貌似是被删除了的</del> <br> <span>为以后css做铺垫，没有任何翻译的字体</span> <br> <!--段落标签里面嵌套文本标签--> <p>我喜欢<b>小美女</b></p> </body> </html>
运行效果如下：
