网页与HTML学习笔记001 | 基本概念与标签-CSDN博客

本文链接：https://blog.csdn.net/M99922000/article/details/133889847

学习来源：B站黑马pink老师

什么是HTML？

HTML是超文本标记语言，是用来描述网页的一种语言。所谓超文本，一方面是指它可以加入图片、声音、动画、多媒体等内容，超越了文本限制；另一方面，它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接，即超级链接文本。网页即HTML文件，是由网页元素组成的，这些元素利用html标签描述出来，然后通过浏览器解析从而显示给用户。

Web标准

Web标准是一系列标准的集合。Web标准的构成主要包括结构、表现和行为。

Web标准的构成
标准	说明
结构	用于对网页元素进行整理分类----HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式----CSS
行为	指网页模型的定义及交互的编写----JavaScript

结构是创建网页的基石，某种程度上说，CSS和JavaScript的应用基于HTML。

HTML（标签）语法规范

一、基本语法概述

1、HTML标签是由尖括号括起来的关键词，如<p>、<body>等等；

2、标签分为双标签（成对存在的标签）和单标签（单个存在的标签），双标签占绝大多数。

#双标签

<html>(开始标签) </html>（结束标签）

#单标签

<br />

二、标签关系

双标签关系分为包含关系和并列关系。

#包含关系（即父子关系）

<head>

<title> </title>

</head>

-----------------------------------------------------------------

#并列关系

<head> </head>

<body> </body>

HTML基本结构标签

每个网页都会有一个基本结构标签（骨架标签），页面内容在这些基本标签上书写。

<html>

<head>

<title>......</title>

</head>

<body>

.............................

</body>

</html>

标签名	定义	说明
<html></html>	HTML标签	根标签
<head></head>	文档头部	其中必须设置的标签是title
<title></title>	文档标题	即通常的网页标题
<body></body>	文档主体	页面内容放在该标签里面构成主体部分

制作第一个简单网页：

新建一个文本文档-->打开编写以下语句-->保存并将后缀名改为.html或.htm-->用浏览器打开。

最终效果：

网页开发工具

一、文档类型声明标签（非HTML标签）

<!DOCTYPE>文档类型声明，告诉浏览器使用哪种HTML版本来显示网页。

#使用HTML5版本显示网页

#该文档类型声明标签位于文档最前面位置

<!DOCTYPE html>

二、lang语言种类

用于定义当前文档显示语言（en：英语；zh-CN：中文）。但英文文档中可以显示中文，在中文文档中也可显示英文。

<html lang="zh-CN">

三、字符集

字符集是多个字符的集合。在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应使用哪种字符编码。charset常用值：GB2312（简体中文）、BIG5（繁体中文）、GBK（简繁体中文）、UTF-8（“万国码”）。

<meta charset="UTF-8" />

HTML常用标签

一、标签语义（要记清楚）

二、标题标签

一共有6个等级的网页标题，<h1> - <h6>，其依据重要性依次递减。加了标题的文字会加粗，字号也会依次变大，且一个标题独占一行（意味着无需再换行等操作）。

...

<body>

<h1> （一级标题）</h1>

</body>

...

三、段落和换行标签

#<p>标签用于定义段落

#<br />为换行标签，简单换至新的一行

#以下将内容1和内容2分为两段每段之间保有空隙，并将内容3、4换行显示

...

<body>

<p> (内容1) </p>

<p> (内容2) </p>

（内容4）<br />（内容5）

</body>

...

使用以上学习内容进行简单网页制作

（ps：内容摘自百度百科、知乎；工具：Intellij IDEA）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title> 中医养生之八段锦和食疗 </title>
</head>
<body>
    <h2>中医养生</h2>
    <h3>【八段锦：练出好身体】</h3>
    <h4>八段锦为传统医学中导引按跷中绚丽多彩之瑰宝</h4>
    <p>八段锦功法是一套独立而完整的健身功法，起源于北宋，共八百多年的历史。古人把这套动作比喻为“锦”，意为五颜六色，美而华贵。体现其动作舒展优美，视其为“祛病健身，效果极好；编排精致；动作完美”。现代的八段锦在内容与名称上均有所改变，此功法分为八段，每段一个动作，故名为“八段锦”，练习无需器械，不受场地局限，简单易学，节省时间，作用极其显著；效果适合于男女老少，可使瘦者健壮，肥者减肥。</p>
    <p>八段锦一般有八节，锦者，誉其似锦之柔和优美。正如明朝高濂在其所著《遵生八笺》中“八段锦导引法”所讲：“子后午前做，造化合乾坤。循环次第转，八卦是良因。”“锦”字，是由“金”“帛”组成，以表示其精美华贵。除此之外，“锦”字还可理解为单个导引术式的汇集，如丝锦那样连绵不断，是一套完整的健身方法。</p>
    <h3>【中医食疗：吃出好气色】</h3>
    <h4>中医食疗源远流长，早在二千年前的医学著作《黄帝内经》中就有记载。即所谓"医食同源"、"寓医于食"</h4>
    <h4>概念</h4>
    <p>中医食疗是在中医药理论的指导下，研究食物的性能、食物与健康的关系，并利用食物维护健康、防治疾病的科学。它是在食疗本草学基础上充实、发展起来的一门科学。它用以维护健康、防治疾病的方法是食物疗法，它与药物治疗有很大不同。它是以食物形式运用的，适应范围广泛，也作为药物或者其他治疗疾病措施的辅助手段，容易让人接受。</p>
    <h4>平衡膳食</h4>
    <p>平衡膳食 是指膳食的种类及其所含的水谷精微，种类齐全、数量充足、比例适当。使其膳食中所供给的营养与机体的需要保持平衡。前人所注五谷：粳米、小豆、大豆、麦、黄黍米；五果为桃、李、杏、栗、枣；五畜为牛、羊、猪、犬、鸡；五菜为葵、藿、薤、葱、韭等。<br />偏食有害 饮食要多样化，要五味得当，荤素协调，寒、热、温、凉适度。偏食会造成人体阴阳失去平衡、脏腑功能受损、或营养不足、营养过剩等不良后果。所以不能偏食。</p>
    <p>----摘自：百度百科、知乎<br />2023年10月17日</p>
</body>
</html>

浏览器运行结果如下图：