4.3段落和换行标签(重要)
在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
p:paragraphs段落
标签语义:可以把HTML文档分割成若干段落。
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间包有空隙。
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才会自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br />。
<br />
单词break的缩写。
标签语义:强制换行。
特点:
1.<br />是个单标签。
2.<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>
<h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
<h4>数据统计:水花兄弟合砍61分</h4>
<p>库里22投11中,三分14投4中,罚球11罚全中,得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次</p>
<p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
<h4>兄弟对决升级: 小库里给哥哥造成压力</h4>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
<p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。</p>
</body>
</html>
4.4文本格式化标签
在网页中,有时需要为文字设置粗体,斜体,或下划线等效果,这时就需要用到HTML中的文本格式化标签,是文字以特殊的方式显示。
标签语义:突出重要性,比普通文字更重要。
加粗:<strong></strong>或者<b></b>,更推荐使用<strong>标签加粗 语义更强烈。
倾斜:<em></em>或者<i></i>,更推荐使用<em>标签倾斜 语义更强烈。
删除线:<del></del>或者<s></s>,更推荐使用<del>标签加粗 语义更强烈。
下划线:<ins></ins>或者<u></u>,更推荐使用<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>的文字<br />
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>
</html>
4.5<div>和<span>标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写,表示分割、分区。span意为跨度、跨距。
特点:
1.<div>标签用来布局,但现在一行只能放一个<div>。大盒子
2.<span>标签用来布局,一行上可以多个<span>。小盒子
4.6图像标签和路径(重要)
1.图像标签
在HTML标签中,<img>标签用于定义HTML页面中的图像。
<img src="图像URL"/>
单词image的缩写,意为图像。
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
<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>Document</title>
</head>
<body>
<h4>图像标签的使用:</h4>
<img src="2.webp" />
<h4>alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="1.jpg" alt="我是xxx" />
<h4>title 提示文本 鼠标放到图像上,提示的文字:</h4>
<img src="2.webp" alt="我是xxx" title="我是xxx" />
<h4>width 给图像设定宽度:</h4>
<img src="2.webp" alt="我是xxx" title="我是xxx" width="500"/>
<h4>height 给图像设定高度:</h4>
<img src="2.webp" alt="我是xxx" title="我是xxx" width="500" height="100"/>
<h4>height 给图像设定高度:</h4>
<img src="2.webp" alt="我是xxx" title="我是xxx" height="100" />
<h4>border 给图像设定边框:</h4>
<img src="2.webp" alt="我是xxx" title="我是xxx" width="500" border="15"/>
</body>
</html>
图像标签的其他属性:
alt:文本 替换文本。图像不能显示的文字
title:文本 提示文本,鼠标放到图像上,显示的文字
width:像素 设置图像的宽度
height:像素 设置图像的高度
border:像素 设置图像的边框粗细
height与width只设置一个就行,因为设置一个,另一个自动会等比例压缩,这样图像就不会失真。
同时设置导致失真:
图像标签注意点:
① 图像标签可以拥有多个属性,必须卸载标签名的后面。
② 属性之间不分前后顺序,标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式,即key=“value"的格式,属性=”属性值”。
2.路径(前期铺垫知识)
(1)目录文件夹和根目录
实际工作中,我们文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。
目录文件夹:就是普通文件夹,里面只不过是存放了我们做页面所需要的相关素材,比如html文件,图片等。
根目录:打开文件夹的第一层就是根目录
(2)VScode打开目录文件夹
页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为:
1.相对路径
以引用文件所在位置为参考基础,而建立出的目录路径。
这里简单来说,图片相对于HTML页面的位置
同一级路径:图像文件位于HTML文件同一级 如<img src = "baidu.gif />
下一级路径:符号为:/ ,图像文件位于HTML文件下一级 如<img src="images/baidu.gif />
上一级路径:符号为:../ ,图像文件位于HTML文件上一级 如<img src="../baidu.gif />
2.绝对路径
是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif"。
4.7超链接标签(重点)
在HTML标签中,<a>标签用于定义超链接,作用是从一个页面连接到另一个页面。
1.链接的语法格式
<a href="跳转目标"target="目标窗口的弹出方式"> 文本或图像</a>
a为单词anchor的缩写,意为:锚。
两个属性的作用如下:
href:用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,他就具有了超链接的功能。
target:用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。
2.链接分类
1.外部链接,例如<a href="http://www.baidu.com">百度</a>。
<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>Document</title>
</head>
<body>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<p>target:打开窗口的方式,默认的值是: _self:当前窗口打开页面 _blank:新窗口打开页面</p>
<a href="http://www.4399.com" target="_blank">4399小游戏</a>
</body>
</html>
2.内部链接
网站内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href ="index.html>首页</a>。
<h4>2.内部链接:网站内部页面之间的相互链接</h4>
<a href="内部链接.html" target="_blank">内部链接</a>
3.空链接
如果当时没有确定链接目标时,<a href="#">首页</a>。
<h4>3.空链接</h4>
<a href="#">空链接</a>
4.下载链接
如果href里面地址是一个文件或者压缩包,会下载这个文件
<h4>4.下载链接:地址链接是 文件.exe 或者是 zip 等压缩包形式</h4>
<a href="images/img.zip">下载链接</a>
5.网页元素链接:
在网页中的各种网页元素,如文本、图像、表格、音频、视频、等都可以添加超链接。
6.锚点链接:
- 在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第二集</a>找到目
- 标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two">第二集介绍</h3>
<!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>Document</title>
</head>
<body>
<h3 id="fanhui">TOP</h3><br />
1 大事记<br />
2 早年经历<br />
3 <a href="#jinli">演艺经历</a><br />
4 <a href="#live">个人生活</a><br />
5 <a href="#作品">主要作品</a><br />
6 社会活动<br />
7 获奖记录<br />
8 人物评价<br />
9 人物事件<br />
<h3>早年经历</h3>
1998年8月2日,蔡徐坤出生于浙江温州。13岁时,与央视主持人鞠萍共同主持“红领巾之歌”全国少儿优秀合唱歌曲征集展播活动启动仪式 [21] 。
演艺经历编辑
<h3 id="jinli">演艺经历</h3>
2012年4月,参加湖南卫视综艺节目《向上吧!少年》,进入全国前200强,此后开始接触演艺活动 [22] ;8月,参演偶像剧《童话二分之一》,他在剧中饰演主角少年御风一角 [2] 。
2014年3月4日,首次出演的爱情悬疑喜剧电影《完美假妻168》在中国大陆上映,他在片中饰演男主角霍克的少年时期;随后,又参演都市情感剧《女刑警李春春》,他在剧中饰演西西一角 [23] 。
2015年7月10日,中韩青春励志类原创综艺节目《星动亚洲》,进入前三强 [24] 。
2016年10月18日,加入男子组合SWIN,并担任音乐小分队SWIN-S的高音RAP [25] ;12月,随SWIN-S发行首张迷你专辑《New World》,收录了包括《Fantasy》《只因你太美》等5首歌曲 [26] 。
2017年3月,参演真人漫改剧《我才不会被女孩子欺负呢》,他在剧中饰演男主角叶麟 [27] 。
蔡徐坤的未完成
蔡徐坤的未完成(16张)
2018年1月,参加竞演类综艺节目《偶像练习生》播出,4月6日,蔡徐坤在总决赛中获得最高票数,并以NINE PERCENT九人男团C位出道 [3] ;8月2日,发行个人首张EP《1》,该张专辑融合了Future R&B/Urban
R&B等多种不同风格的元素,共包含《Pull up》《You can be my girlfriend》《It’s you》三首单曲 [4]
;8月19日,获得出道后首个个人音乐类奖项亚洲新歌榜2018年度盛典“最受欢迎潜力男歌手”,总票数达1309万票 [5] ;8月23日,发行原创单曲《Wait Wait Wait》,并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造了歌曲MV
[7] ;9月,参加爱奇艺《中国音乐公告牌》原创音乐舞台秀,并且自编solo舞蹈,全程参与制作 [28] ;12月30日,他还参加了浙江卫视跨年演唱会 [29] 。
2019年1月,作为新生力量代表担任北京电视台春节联欢晚会的代言人 [10] ,并为晚会创作歌曲《那年春天》,而晚会播出后则取得了CSM城网同时段收视第一、全国各卫视春晚收视冠军的成绩 [30] ;2月18日,发布单曲《没有意外》 [11]
;4月到5月期间,完成了首次海外巡回公演《ONE》,包括伦敦、纽约、洛杉矶、旧金山、多伦多、温哥华6站 [31] ;7月26日,发行首张数字专辑《YOUNG》 [32]
,随后该专辑打破多项记录,并以总销售额第一的成绩成为2019年“数专之王”首登TME财报 [127] ;9月26日,随NINE PERCENT发行音乐专辑《限定的记忆》,专辑收录其个人原创歌曲《梦》 [33] ;10月6日,NINE
PERCENT组合因合约到期而正式解散 [34] ;11月15日,发行单曲《重生》,首次尝试摇滚曲风 [15] ;12月5日,与佟丽娅合唱2022北京冬奥会推广曲《冬梦飞翔》 [35] ;8日,担任第二届海南岛国际电影节青年宣传使者
[36-37] 。
个人巡演
个人巡演(14张)
2020年初,身为湖南人的蔡徐坤担任了湖南卫视春晚家乡推荐官,并在晚会上演唱歌曲《重生》 [38-39] ;3月12日,其作为青春制作人代表加盟的青年励志综艺《青春有你第二季》开播 [16]
;随后,他还与佟丽娅共同合唱抗疫公益歌曲《山河无恙在我胸》 [40] ,该曲获得2020咪咕音乐公益影响力奖项 [109] ;4月9日,蔡徐坤为抗疫创作的原创公益歌曲《Home》上线,这是他出道以来的第14支单曲 [41]
;同月,他开始担任户外竞技真人秀《奔跑吧第四季》的常驻嘉宾 [17] ;5月24日,发布原创单曲《情人》 [128] ,该曲刷新了15项音乐榜单冠军,抖音相关话题播放量过30亿,QQ音乐单平台收藏量达到1400万 [19]
;7月19日,获得第27届东方风云榜最佳男歌手、亚洲人气歌手及网络影响力三个奖项 [42] ;8月19日,参演的互动影集《叩响明天》播出 [43-44] ;随后,他还入选福布斯中国名人榜,排名是第31位 [45]
;12月4日,蔡徐坤担任常驻嘉宾的户外竞技真人秀《奔跑吧·黄河篇》开播 [46-47]
;12月26日,蔡徐坤出席第十四届音乐盛典咪咕汇,并获得年度内地最佳男歌手、年度内地最受欢迎男歌手及年度最佳人气男歌手三个奖项,同时,单曲《情人》也获得了年度十大金曲奖 [48] 。
2021年1月23日,蔡徐坤出席第二届TMEA腾讯音乐娱乐盛典,并获得年度最具影响力唱作歌手和年度最具号召力歌手两个奖项,而单曲《情人》则获得了年度十大金曲奖 [50] ;2月4日,加盟中央广播电视总台网络春晚“青春嘉年华” [51]
;同时他还在《2021湖南卫视春节联欢晚会》上表演歌曲《情人》 [52] ;4月13日,蔡徐坤以原创音乐制作人身份发行个人创作专辑《迷》,他不仅包揽了专辑全部词曲创作、编曲制作、A&R企划,还担任Intro
MV导演,该专辑在上线24小时内连夺TME平台专辑销量五大冠军,并刷新了多项平台纪录 [106] [111-112] ;4月23日,继续担任常驻MC的户外竞技综艺节目《奔跑吧第五季》播出 [126]
;7月17日,于北京凯迪拉克中心举办首场个人巡回演唱会 [115-116] ;12月3日,参加的大型冬奥运动体验真人秀《冬梦之约第二季》播出 [129]
;12月31日,参加的《2022江苏卫视跨年演唱会》《2022迎冬奥BRTV环球跨年冰雪盛典》播出 [131] [133] ;同日,参加的《浙江卫视2022跨年晚会》播出,演唱《爱与痛》《情人》 [132] 。
2022年1月24日, 工作室晒蔡徐坤手绘小老虎官宣加盟湖南卫视春晚 [134] ;2月1日,参加《2022年北京广播电视台春节联欢晚会》,演唱歌曲《山河无恙在我胸》; [135-136]
2月2日,参加《中国梦·我的梦——2022中国网络视听年度盛典》,并与黑豹乐队合唱《Dont Break My Heart》 [137] ;2月3日,被官宣为2月5日的腾讯冬奥报道雪舞官 [138]
;3月,参加了《奔跑吧第六季》;5月13日开播 [139] [141] ;6月27日,参加《微博唱响未来毕业派对》; [143] 7月22日,发行单曲《Hug me》 [145]
;8月18日,参加易车超级818汽车狂欢夜·浙江卫视年中盛典,并演唱歌曲《HUG ME》 [147] [158] ;同年,加盟沸腾校园 [148] ;9月,蔡徐坤参加《奔跑吧特别季》 [149] ;10月31日,参加北京卫视《晚八点音乐会》
[152] ;11月30日,参加综艺节目《红毯背后》,担任飞行嘉宾 [153] ;12月16日,参加《动感地带世界杯音乐盛典·咪咕汇》,演唱《Hard To Get》《情人》《Hug me》 [154]
;12月31日,参加《2022-2023浙江卫视美好跨年夜》演唱《梦》《Hug Me》。 [155] [157]
2023年1月24日,参加《奋进新征程——2023中国网络视听年度盛典》,演唱歌曲《默片》 [159] ;2月27日,蔡徐坤发行其线上演唱会LIVE专辑《KUN 2023 ART LAB
LIVE》,该专辑为“PHENOMENON现象-2023蔡徐坤ART LAB线上演唱会”实况精选辑,蔡徐坤挑选了出道至今7首不同阶段的作品—— 《感受她》《情人》《迷》《HAHA》《It's You》《默片》《nobody cares》
[160] 。3月25日,参加《2022微博之夜》,表演节目《现象》。 [161]<br />
<a href="#fanhui">返回</a><br />
<h3 id="live">个人生活</h3>
蔡徐坤小学就读于怀化鹤翔学校 [144] 。<br />
<a href="#fanhui">返回</a><br />
<h3 id="作品">主要作品</h3>
<a href="#fanhui">返回</a><br />
<h3>社会活动</h3>
<h3>获奖记录</h3>
<h3>人物评价</h3>
<h3>人物事件</h3>
</body>
</html>
结果:
点击锚点链接时,会快速跳到想要浏览的地方。