-
段落和换行标签
-
段落和换行标签
-
体育新闻案例
-
文本格式化标签
-
<div>和<span>盒子标签
-
图像标签和路径(图像必须放在与html文件在一个文件夹里面)
-
段落和换行标签
-
<p>标签用于定义段落,将整个网页分成若干段落
-
形式:<p>我是一个段落</p>
-
段落之间保有缝隙
-
想要几个段落就使用几个<p></p>
-
换行标签(单个标签)
-
对某段文字进行强制换行
-
形式:<br />(中间有空格)
-
换行之后间隔没有段落之间大。
-
代码段:
-
-
<!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>段落和换行标签</title> </head> <body> <p>手机、平板、耳机</p> <p>都是不同的充电器<br />每次出门或是在家的时候</p> </body> </html>
运行效果如下图:
-
-
-
体育新闻案例
-
<!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>体育新闻</title> </head> <body> <h1>水花61分,伊戈达拉制胜抢断 西决勇士再胜开拓者,总分2-0</h1> <p>5月17日讯 2019年西部决赛第2场,勇士以114-111击败开拓者,完成17分大逆转,系列赛2-0取得领先。库里季后赛生涯助攻数超哈登。</p> <h4>兄弟对决升级:小库里没有给哥哥造成压力</h4> <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p> <p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里在防守端给库里造成了极大的困扰。</p> <p>作者xxx<br /> 时间xxx</p> </body> </html>
-
文本格式化标签
-
粗体、斜体、下划线等
-
加粗:<strong></strong>
-
倾斜:<em></em>
-
删除线:<del></del>
-
下划线:<ins></ins>
-
代码:
<!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>文本格式化标签</title> </head> <body> 我是<strong>加粗</strong>的文字 我是<em>倾斜</em>的文字 我是<del>删除线</del>的文字 我是<ins>下划线</ins>的文字 </body> </html>
运行结果:
-
-
<div>和<span>盒子标签
-
格式:<div>这是头部</div>
-
<span>今日价格</span>
-
div是分割分区,span是跨度,跨距。
-
区别:div 是一个大盒子一人独占一行,span是一个小盒子
-
代码:
<!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>div和span标签</title> </head> <body> <div>我是一个div我单独占一行</div> <div>我是一个div我单独占一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body> </html>
运行结果:
-
-
图像标签和路径(图像必须放在与html文件在一个文件夹里面)
-
图像标签:<img>定义图像
-
格式:<img src="图像url"/>
-
src是图像标签的必须属性,用于指定图像文件的路径和文件名
-
alt:替换文本,表示图像不能显示时,出现的文字,属性值:文本。
-
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>图像标签</title> </head> <body> <h4>图像标签的使用:</h4> <img src="img.jpg"/> <h4>alt 替换文本 图像显示不出来的时候用文字替换:</h4> <img src="img1.jpg" alt="我是蛋蛋学生"/> <h4>title 提示文本 鼠标放在图像上提示的文字:</h4> <img src="img.jpg" alt="我是蛋蛋学生" title="我是蛋蛋学生"/> </body> </html>
运行结果:
-
-
-
-