初学前端开发——HTML

Lucas Lucas

已于 2023-04-24 18:21:42 修改

阅读量775

点赞数 1

文章标签： css html5 前端

于 2023-04-23 23:14:27 首次发布

本文链接：https://blog.csdn.net/lucasde/article/details/130256690

版权

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.路径（前期铺垫知识）

实际工作中，我们文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过是存放了我们做页面所需要的相关素材，比如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>

结果：