当前位置：首页 > news >正文

关于前端的学习

news 文章来源：https://blog.csdn.net/yz_518/article/details/135942417 2025/4/20 18:46:08

前言:

1.初识HTML:

1.1超文本:

1.2标记语言:

2.关于html的基本框架:

3.HTML基本文字标签:

3.1.h标题标签:

3.3 文本内容:

3.4换行的和分割的:

3.5 特殊文字标签:

3.5.1表面上看着三对的结果呈现都是一样的:

3.5.2但是其背后的效果其实是不一样的:

3.6转义字符:

4.SEO（搜索引擎优化）:

4.1搜索引擎工作原理：

4.2网站技术架构：

4.3内容创作与用户体验：

4.4链接建设：

4.5数据分析与优化：

4.6合规性与最佳实践：

结语:

前言:

从今天开始我们就要开始学习前端了,关于前端我们要先了解一下前端三剑客:

前端基础由3个东西组成:
        html: 是一个网页基本组成,给用户看的东西都写这里(图片/文字/视频) -- 也就是相当于人类的身体
        css: 负责美化页面内容/优化网页性能(颜色,排版,字体) -- 是相当于人类的化妆品
        JavaScript: 脚本语言,主要用来实现动态效果,前后端交互 -- 相当于人类技能

而从今天开始,我们将要进行web前端的学习了不过这些都是我个人在学习过程中总结出来的其中的内容是个人整理的难免会有所遗漏,如果有什么地方写的不好欢迎大家的指正。

1.初识HTML:

全称HyperText Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。它可以用来组织网页的内容和结构，并可以与CSS（层叠样式表）和JavaScript等语言配合，实现网页的样式设计和交互功能。

html叫超文本标记语言,不是编程语言它与编程语言的差距

编程语言 -- 带有逻辑性.用来使用的

标记语言 -- 不具备逻辑.是用来看的

1.1超文本:

“超文本”这个概念强调的是文本的超越性，即它不仅仅包含普通的文字信息，还可以包含指向其他资源的链接，这些资源可以是图片、音乐、视频、甚至是其他网页或网站。这种链接通常被称为“超链接”。超文本使得用户可以直接点击这些链接来访问或跳转到相关的资源，从而极大地丰富了文本的信息量和交互性。

此外，超文本还允许对内容进行排版和样式设计，比如设置字体、颜色、大小、对齐方式等，以及创建列表、表格、段落等复杂的文档结构。这些功能使得超文本在呈现信息时具有更大的灵活性和多样性。

1.2标记语言:

“标记语言”则是指用来定义和描述超文本的一种语言。在HTML中，这种语言是由一系列的“标签”（tags）组成的。这些标签就像是拼图的碎片，它们各自具有特定的含义和功能，比如<p>标签表示段落，<img>标签表示图像等。

使用HTML时，我们需要做的就是把这些标签放在合适的位置，从而构建出我们想要的网页结构和内容。这个过程并不需要过多的逻辑思考，因为HTML本身是一种声明性的语言，它只关心你想要呈现什么，而不关心你是如何实现的。当然，要创建出复杂且功能丰富的网页，我们还需要掌握CSS（用于样式设计）和JavaScript（用于交互和动态效果）等其他技术。

2.关于html的基本框架:

<!DOCTYPE html>  
<html lang="zh">  
<head>  <meta charset="UTF-8">  <title>页面标题</title>  <!-- 这里可以链接外部CSS和JavaScript文件 -->  
</head>  
<body>  <!-- 这里是网页的可见内容 -->  
</body>  
</html>

2.1 `<!DOCTYPE html>`：

声明文档类型，告诉浏览器这是一个HTML5文档。

`2.2<html lang="zh">`：

html元素，指定整个HTML文档使用中文语言（zh代表中文）。

`2.3<head>`：

head元素，包含文档的元信息。

`2.3.1<meta charset="UTF-8">`：

设置文档字符编码为UTF-8

`2.3.1<title>`：

设置网页标题，显示在浏览器的标题栏或标签上。

`2.4<body>`：

body元素，包含网页的可见内容，如文本、图片、链接等。

3.HTML基本文字标签:

3.1.h标题标签:

3.1.1<h1>标题内容</h1>:

一级标题,网页里的老大.从规范角度来说.一个网页只能有1个h1标签。

3.1.2<h2>标题内容</h2>:

二级标题,作用就是切分网页内容.作为目录.可以有多个。

3.1.3<h3>标题内容</h3>:

三级标题,分块内容标签。

3.2<p>文本内容</p>:

段落标签.比较常用的文本标签.会自动换行。

3.3 <span>文本内容</span>:

文本标签.它不会自动换行.也没有特别的样式属性.很单纯,后续配合css使用。

3.4换行的和分割的:

3.4.1<br> 换行

3.4.1<hr> 分割线

3.5 特殊文字标签:

3.5.1表面上看着三对的结果呈现都是一样的:

<b></b> && <strong></strong> 粗体标签

<i></i> && <em></em> 斜体标签

<u></u> && <ins></ins> 下划线标签

3.5.2但是其背后的效果其实是不一样的:

前者只是单纯视觉效果.后者能给页面起到强调作用。

前者只是强调给人看. 后者是强调给浏览器看。

前者是单纯加粗,对于浏览器识别来说,仍然是普通数据。

后者加粗之余起到强调效果.浏览器就会优先识别/处理。

3.6转义字符:

在HTML中，有些字符具有特殊含义，比如<和>用于定义标签。如果要在网页中显示这些特殊字符，就需要使用转义字符。以下是一些常见的HTML转义字符：

<：表示小于号（<）。
>：表示大于号（>）。
&：表示和号（&）。
"：表示双引号（"）。

4.SEO（搜索引擎优化）:

这个是属于拓展的内容了,其实只是让大家了解一下这个东西。

SEO（Search Engine Optimization，搜索引擎优化）是一种通过对网站进行技术、内容和链接等多方面的优化，提高网站在搜索引擎中的自然排名，从而增加网站的曝光度、流量和潜在客户的营销策略。从专业的角度来看，SEO涉及多个领域的知识和技能，包括搜索引擎工作原理、网站技术架构、内容创作与用户体验、以及链接建设等。其实这些都是从网上找的对这个的解释其实用通俗一点的话来说就是优化网页内容,提高权重.让网页可以在搜索引擎里排名更靠前

4.1搜索引擎工作原理：

SEO专家需要深入了解搜索引擎如何工作，包括如何抓取（crawling）、索引（indexing）和排名（ranking）网页。了解搜索引擎的算法更新和趋势也是持续优化的关键

4.2网站技术架构：

优化网站的技术架构对于SEO至关重要。这包括确保网站有清晰的URL结构、使用适当的标记语言（如HTML5）、优化网站速度、确保网站的移动友好性（响应式设计）以及实施安全的HTTPS协议等

4.3内容创作与用户体验：

高质量、相关且有价值的内容是吸引搜索引擎和用户的关键。SEO专家需要与内容团队合作，确保网站上的内容与目标受众的需求相匹配，并通过优化关键词布局、提升内容可读性和增加互动性来提升用户体验。

4.4链接建设：

内部链接和外部链接都是影响网站排名的重要因素。内部链接需要合理规划，以确保用户和搜索引擎能够轻松导航网站。外部链接，特别是来自权威和相关性强的网站的链接，被视为对网站权威性和信任度的投票，有助于提高搜索排名。

4.5数据分析与优化：

SEO工作不仅仅是实施优化策略，还包括对策略的效果进行跟踪和分析。通过使用各种SEO工具和分析软件，SEO专家可以监控网站的排名、流量和用户行为，以便调整策略并持续改进。

4.6合规性与最佳实践：

遵循搜索引擎的指导方针和最佳实践是长期成功的关键。SEO专家需要确保所有优化策略都是白帽SEO（遵循搜索引擎规则的合法优化），避免使用任何可能导致网站受到惩罚的黑帽SEO技术。

结语:

今天关于web前端的学习我就先分享到这里了.这里先只是带着大家从最基础的知识开始学习,到后面会慢慢多讲一点,这些都是我自己个人学习过程的一点笔记的整理难免有所遗漏欢迎大家对我的文章进行指正,也欢迎大家在评论区和谐讨论。

前言:

1.初识HTML:

1.1超文本:

1.2标记语言:

2.关于html的基本框架:

2.1 <!DOCTYPE html>：

2.2<html lang="zh">：

2.3<head>：

2.3.1<meta charset="UTF-8">：

2.3.1<title>：

2.4<body>：

3.HTML基本文字标签:

3.1.h标题标签:

3.1.1<h1>标题内容</h1>:

3.1.2<h2>标题内容</h2>:

3.1.3<h3>标题内容</h3>:

3.2<p>文本内容</p>:

3.3 <span>文本内容</span>:

3.4换行的和分割的:

3.4.1<br> 换行

3.4.1<hr> 分割线

3.5 特殊文字标签:

3.5.1表面上看着三对的结果呈现都是一样的:

3.5.2但是其背后的效果其实是不一样的:

3.6转义字符:

4.SEO（搜索引擎优化）:

4.1搜索引擎工作原理：

4.2网站技术架构：

4.3内容创作与用户体验：

4.4链接建设：

4.5数据分析与优化：

4.6合规性与最佳实践：

结语:

相关文章：

2.1 `<!DOCTYPE html>`：

`2.2<html lang="zh">`：

`2.3<head>`：

`2.3.1<meta charset="UTF-8">`：

`2.3.1<title>`：

`2.4<body>`：