前端学习第一步-CSDN博客

本文链接：https://blog.csdn.net/SixLegs/article/details/134319086

一，什么是前端？

什么是前端？下面给大家展示一个常见的前端界面。

我们经常都会使用京东，淘宝的购物交易平台买东西，而我们在平台当中浏览的一切，能看到的一切都被称为前端。

我们日常生活中所接触到的大部分网络应用与网络页面都分为前端和后端，后端是我们日常访问所看不到的内容，类似与后台一台一台存放的服务器；前端则是我们能看到的用户界面；前端之所以能够展现在我们眼前，都归功于前端开发工程师的功劳，下面就让我们来初步认识一下前端吧。

二，web前端标准的制定

1，w3c万维网联盟

万维网联盟（World Wide Web Consortium，简称 W3C）创建于1994年，是Web技术领域具有权威和影响力的国际中立性技术标准机构。W3C已发布了400多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（HTML）、可扩展标记语言（XML）以及帮助残障人士有效获得Web 内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

2，web标准的组成

HTML用于搭建网页框架，我们首先进行学习的就是HML；

紧接着就是CSS，它起到一个美化页面的效果，不然HTML搭建起来的仅仅只是枯燥无味又丑陋的界面，并不能吸引用户；

最后就是JS。当我们完成页面的搭建与美化后就需要建立界面中各个点击处的交互功能，无论是希望点击该处后出现什么样的图片，亦或者是视频等，全靠我们的JS来进行完成。

三，HTML，你完成的第一个网页

上面讲到我们对前端的学习从我们的HTML开始，那么下面就让我们从最简单的串代码开始来实现我们的第一个网页，从而展开我们对前端的学习。

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        hello,world!
    </body>
</html>

接下来让我们来解密代码中的信息

我们可以看到最外层是用<html>给括起来的，后面的那个<html>之所以要打上/变成了</html>,

是因为wsc规定标签加上/表示该标签结束的意思，每一个双标签后面那个都得加上/。

而这里的<html>其实起到了相当于c语言中主函数的作用，后续我们要写的内容都在这里面完成。

刚才的<html>在这串代码中起到了相当于父亲的作用，而这里的<head>与<body>扮演兄弟的角色，比<head>要小上一级，而二者本身又是同级，<head>用于各种声明与规定，<body>用于存放网页内容。

通过该图我们能够发现，<titie>标签作用就像它的名字一样，是为我们所写的网页命名。

<tite>标签在这里起到命名的作用，那是不是还有更多标签起到了各种不同的作用呢？下面就让我们进入对标签的学习。

四，标记的分类与常见标记的作用

1.分类

i.<常规标记>也叫双标记

ii.空标记也叫单标记

2.常用标签

在讲述常用标签前我们先来介绍一下语义。

语义是什么？

什么是语义化？其实简单说来就是让机器可以读懂内容。

语义的作用

1.没有CSS结构时，为了让页面呈现出更好的结构，内容，代码结构。

2.方便爬虫，使被浏览器爬取网页内容更快更方便。

3.方便维护。

常用标签

当我们在VScode上编写HTML文件时，输入！会快速建立起HTML框架

这时<head>标签框住了此时我们不认识的标记，下面让我们来逐个认识认识

DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。这里的htm1就是常用的标准版本。

lang是language（语言）的所有，通过名字我们就能相到它一定是定义语言的标记，后面的en其实就代表的傻逼英语，相对于的，“zh-CN”代表的就是中文。

这里再补充一点，定义的语言并不是我们应该在页面中编写什么语言，而是告诉浏览器我们将以哪种语言编写代码，以便于用户浏览页面时浏览器自动翻译为windows安装系统的语言。

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>我是一级标签</h2>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>
</body>
</html>

标题标签一共有六种，从一到六强调性依次减弱，我们可以明显的看到标题大小也逐渐减弱，其中爬虫最倾向一级标签，所以说一级标签建议只放一个，放全页面的标题，更利于浏览器的搜索性。

段落文本

<p>段落文本内容</p>

标识一个段落（段落与段落间有段距离）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    万维网联盟（W3C）最初由 Tim Berners Lee 于1994年在美国MIT设立。
    为了扩大Web技术的全球影响力，1995年W3C在欧洲设立W3C/ERCIM 总部，1996年在日本设立W3C/Keio 总部。
    中国早在1994年就有了第一个Web网站，并正式联入国际万维网；作为 W3C 全球办事处（W3C Offices）计划的一部分，2003年12月，
    在香港科技大学沈运申（Prof. Vincent Shen）的倡导下，W3C在香港科技大学设立办事处（HK Office）；2006年4月，
    W3C依托北京航空航天大学设立中国办事处（香港办事处也同步撤消），2013年1月，W3C 在北京航空航天大学设立W3C/Beihang总部。 [4]
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，
比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
</body>
</html>

如这串代码，其文本内容很长，我们如果运行起来会是这个样子

长篇大论，没有段落之分，读起来十分头疼，但如果我们运用上段落文本标记，就会这样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>
        万维网联盟（W3C）最初由 Tim Berners Lee 于1994年在美国MIT设立。
        为了扩大Web技术的全球影响力，1995年W3C在欧洲设立W3C/ERCIM 总部，1996年在日本设立W3C/Keio 总部。
        中国早在1994年就有了第一个Web网站，并正式联入国际万维网；作为 W3C 全球办事处（W3C Offices）计划的一部分，2003年12月，
        在香港科技大学沈运申（Prof. Vincent Shen）的倡导下，W3C在香港科技大学设立办事处（HK Office）；2006年4月，
        W3C依托北京航空航天大学设立中国办事处（香港办事处也同步撤消），2013年1月，W3C 在北京航空航天大学设立W3C/Beihang总部。 [4]
   </p>
   <p>
    对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
    这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，
    比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
   </p>
</body>
</html>

被<p></p>框住部分自动与另一端落形成了间距。

换行

这是一个但标记也可以叫做空标记

在HTML中enter键所在编译器上敲出来的换行并不会被浏览器所识别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello，world！
    你好，世界！
</body>
</html>

想要真正实现换行功能，我们得用上<br>标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello，world！
   <br> 你好，世界！</br>
</body>
</html>

水平线

<hr/>空标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>
        万维网联盟（W3C）最初由 Tim Berners Lee 于1994年在美国MIT设立。
        为了扩大Web技术的全球影响力，1995年W3C在欧洲设立W3C/ERCIM 总部，1996年在日本设立W3C/Keio 总部。
        中国早在1994年就有了第一个Web网站，并正式联入国际万维网；作为 W3C 全球办事处（W3C Offices）计划的一部分，2003年12月，
        在香港科技大学沈运申（Prof. Vincent Shen）的倡导下，W3C在香港科技大学设立办事处（HK Office）；2006年4月，
        W3C依托北京航空航天大学设立中国办事处（香港办事处也同步撤消），2013年1月，W3C 在北京航空航天大学设立W3C/Beihang总部。 [4]
   </p>
   <p>
    对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
    这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，
    比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
   </p>
   <hr/>
</body>
</html>

该标签能够起到简易的装饰作用

加粗有两个标记（推荐strong）

<b>加粗内容</b>只是显示加粗

<strong>强调的内容</strong>突出的文本

与标题标签相同<strong></strong>加粗的内容爬虫更容易找到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>
        万维网联盟（W3C）最初由 <b>Tim Berners Lee </b>于1994年在美国MIT设立。
        为了扩大Web技术的全球影响力，<b>1995年W3C在欧洲设立W3C/ERCIM 总部</b>，1996年在日本设立W3C/Keio 总部。
        中国早在1994年就有了第一个Web网站，并正式联入国际万维网；作为 W3C 全球办事处（W3C Offices）计划的一部分，2003年12月，
        在香港科技大学沈运申（Prof. Vincent Shen）的倡导下，W3C在香港科技大学设立办事处（HK Office）；2006年4月，
        W3C依托北京航空航天大学设立中国办事处（香港办事处也同步撤消），2013年1月，W3C 在<strong>北京航空航天大学</strong>设立W3C/Beihang总部。 [4]
   </p>
   <p>b
    对应的标准也分三方面：结构化标准语言<strong>主要包括XHTML和XML</strong>，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。
    这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，
    比如<strong>ECMA（European Computer Manufacturers Association）的ECMAScrip标准</strong>。
   </p>
   <hr/>
</body>
</html>

可以看到，<strong></strong>与<b></b>加粗展现的内容并无差异，但由于<strong></strong>具有突出文本的作用，所有更推荐使用<strong></strong>进行加粗。

倾斜有两个标记（推荐em，更具语义）

这里的同上述的strong与em一样，都具有突出文本内容的作用，更利于爬虫翻找。

我们可以将倾斜与加粗一起使用起来，会更利于爬虫爬取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello,world!
    <br>
    <strong><em>hello,world!</em></strong>
</body>
</html>

删除有两个标记（推荐del）

<s>文本</s>删除线

<del>文本</del>删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello,world!
    <br>
    <s>hello,world!</s>
    <br>
    <del>hello,world!</del>
</body>
</html>

下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <u>hello,world!</u>
</body>
</html>

下标

上标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello,world!<sub>[1]</sub>
    hello,world!<sup>[2]</sup>
</body>
</html>