HTML常用标签及其用法(超详细整理)【上】_html标签大全及用法pdf-CSDN博客

总结：

网页是由图片，链接，文字，声音，视频等元素组成，其实就是一个html文件（后缀名是.html)
网页生成制作：由前端人员书写HTML文件，然后浏览器打开，就能看到网页
HTML：超文本标记语言，用来制作网页的一门语言，由标签组成的，比如图片标签，链接标签，视频标签........

所以网页里面的内容照片，文字其实都是标签，这些组成了以html后缀的文件然后形成网页然后浏览器打开即可

🥈Web标准

Web标准是由W3c组织和其他标准化组织制定的一系列标准的集合，W3C(万维网联盟）是国际最著名的标准化组织。

🔑Web标准的构成

主要由结构，表现，行为组成

结构：对网页元素整理和分类，HTML
表现：设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
行为：网页模型的定义以及交互的编写，javascript

个人阐述：结构是html标签弄成的，文字标签，图片标签，但是只有文字和照片，颜色以及大小需要控制，所以需要表现外观来表示，是css弄成的，如果这些文字图片都是静态的安放在那里，只是视觉上的感受，没有体验感，所以需要行为，可以让网页进行交互，可以动态形式，能替换显示菜单

简单理解:结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中

结构代表身体HTML来表示，表现类似于外观装饰CSS展示，JS类似于行为 -------Web标准

ps:就如同一只鸟，HTML是一只光秃秃的鸟只有身体，其余都没有，CSS是长着羽毛的小鸟，JS代表飞的鸟，所以结构是最重要。

📖HTML语言（超文本语言）

📑语法规范

所有标签都是<>由双尖号组成
双标签（在结束标签前面加个/）单标签（在后面加个/）

双标签：<html><html/> 单标签: <br/> <input/>

标签的关系：包含关系（父子关系），并列关系（兄弟关系）

📑HTML基本结构标签

每个网页都有一个基本的结构标签(骨架标签），页面内容也是在这些基本标签上书写的

💻HTML常用标签

标签的含义（这个标签的作用):根据标签的语义，在合适的地方给一个合理的标签，可以让页面结构更清晰，就像写作文一样，需要标题，段落，分割段落

👩‍💻标题标签<h><h/>

页面中用到标题标签，HTML提供了6个等级

<h1>------<h6>(h是head的缩写）

标签语义：作为标题使用，这个是非常重要，重要性递减
特点：1.加了标题的文字会变得粗大，字号也会依次变大 2.一个标题独占一行

👩‍💻段落和换行标签(重要）

👩🏻‍💻段落标签<p><p/>

<p>标签用于定义段落，它将整个网页分为若干个段落 paragraphy

段落标签语义：将HTML文档分割成若干个段落
特点：文本在一个段落中会根据浏览器窗口得大小自动换行,段落和段落之前保留空隙

👩🏻‍💻换行标签<br/>

<br/>强制换行标签 break

标签语义：强制换行
特点：单标签,标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直得间距，而换行是紧挨着得

换行标签相隔间距小，段落标签相隔间距大。

👩‍💻实践应用(标题/段落/换行)——体育新闻

原文：

体育新闻
水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0
数据统计:水花兄弟合砍61分
库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。
汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德格林得到16分10篮板7助攻5蓋帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。
兄弟对决升级:小库里给哥哥造成压力
库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。
但在西决第2场中,小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给 库里造成了极大的困扰。
作者: pink老师
2019-8-8

源代码 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<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次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</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>
	<p>作者: pink老师<br>
		2019-8-8</p>
</body>
</html>

思路: