Web前端1

纸星客

已于 2024-03-05 17:13:52 修改

阅读量854

点赞数

文章标签：前端学习

于 2022-10-19 21:29:18 首次发布

本文链接：https://blog.csdn.net/clshz_hwk/article/details/127359407

版权

Web前端学习第一周001：HTML+CSS系列教程之导学

一. 导学部分

1.1.拨云见日

主要是带着新手同学进行一个入门的练习。（HTML和CSS）
会讲传统的，智能的，流行的切图方式。
进入实战，会讲PC企业站的布局，游戏站的布局。

1.2.溯本求源

讲解HTML和CSS的拓展知识点。
讲HMTL5，CSS3当中的新语法。
讲不同浏览器之间的兼容问题和解决方案。

1.3.风生水起

讲一些流行的布局。
讲响应式布局。
讲响应式布局的框架Bootstrap，快速搭建网页。

1.4.巧夺天工

如何使用预编译CSS。
如何工程化操作CSS（postcss）。
讲解大型网站CSS架构。
讲CSS的高级用法和魅力。
讲CSS与JS交互。

二.如何学好Web前端？

兴趣，培养兴趣防止乏味。
努力，不断思考做练习。越努力越幸运。

Web前端学习第一周002：HTML+CSS系列教程之什么是HTML，CSS？

一.什么是HTML，CSS？

1.1本质

是做网站的标记语言。浏览器解析代码后就是我们所看到的网站。

1.2如何查看？

在网页右键，可以看到网页的源代码。
一个网站由N个网页构成。比如说：电视剧有40集。
一个网页就是.html文件

1.3 具体介绍

HTML和CSS往往需要配合使用，它们是作为网站开发的基础语言。
HTML，超文本标记语言，全称Hyper Text Markup Language。简单，灵活，通用，功能强大。
CSS，层叠样式表。能够对网页中元素位置的排版进行精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

Web前端学习第一周003：VS Code

一.安装

1.1软件安装

因为服务器在国外，所以国内十有八九会下载失败。这时就需要国内的镜像资源。
https://vscode.cdn.azure.cn/stable/c722ca6c7eed3d7987c0d5c3df5c45f6b15e77d1/VSCodeUserSetup-x64-1.65.2.exe
~~我爱你们，四叶草的各位。~~

2.2插件安装

下载安装后为英文界面，需要安装中文插件。另外，学习前端开发，还需要两个插件：open in Browser和view in Browser。view in Browser已经不再维护了，但是能用。

二.一些基本的快捷键

2.1 Ctrl系列

Ctrl+s 保存
Ctrl+a 全选
Ctrl+x 剪切
Ctrl+c 复制
Ctrl+v 粘贴
Ctrl+z 撤销
Ctrl+y 前进（反撤销）
Ctrl+d 选择相同元素的下一个

2.2 Shift系列

Shift+end 从头选中一行
Shift+home 从尾部选中一行
Shift+Alt+↓ 快速复制一行
Shift+Tab 向前缩进
（Tab 向后缩进）

2.3Alt系列

Alt+↑或↓ 快速移动一行
Alt+鼠标左键多光标操作，进行统一操作

三.一些基础知识

3.1设置的位置

设置的位置：文件-自选项-设置。
设置换行（自动换行永不换行等）：Word Wrap。

四.一些建议

熟能生巧！不断学习！

Web前端学习第一周004：chrome浏览器

一.五大浏览器

IE，OPEN，指南针，火狐，chrome。目前edge（IE）和chrome做的最好。

二.浏览器查看源代码

F12键，或鼠标右键选择显示源代码。

Web前端教学第一周005：深入了解网站开发

一.网页开发需要哪些岗位？

1.1 UI设计师（设计稿）

负责实际UI界面。

1.2. Web前端开发工程师（H5开发）

设计稿转代码，和后端配合，数据库里的数据到页面，HTML+CSS

1.3. Web后端开发工程师

二.我们是干嘛的？

2.1前端开发工程师

HTML：结构（做好框架）
CSS：样式（做好装饰）

三.关于JavaScript：行为

3.1 JavaScript

JavaScript是一种高级脚本语言，可以直接嵌入HTML页面，同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。
用于和用户进行交互。

Web前端学习第一周006：Web前端三大核心技术

一.三大核心

1.1HTML

结构框架，它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

1.2CSS

样式，可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.3JavaScript

数据交互，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

二.总结

通过视频，我们可以看到三大核心技术（HTML,CSS,JavaScript）之间的紧密配合。
HTML的结构，CSS的样式，Javascript的行为，一个好的网站必须是三大核心相互配合的。
只能说，后面要学习的东西有很多。加油吧。

Web前端学习第一周007：HTML的基本结构与属性。

一.深入了解HTML

1.1超文本标记语言。

超文本：文本内容+非文本内容（图片，视频，音频等）
标记：<单词>内容<单词>
语言：编程语言

1.2标记

标记也叫做标签，比如说

<header>,<footer>

这些就是标签

写法分成两种：

单标签，比如<header>
双标签，比如<header></header>,与之形成闭合

在VS Code中，有生成标签的快捷键：Tab+单词=<单词>（打出单词，然后按下Tab键）
非常有用。

1.3试试

打开VS Code，创建一个.html文件。

输入这些，然后Ctrl+s保存，然后再打开它（右键找到Open in Default Browser就能用浏览器打开了)
打开后是这样的：

标签不仅可以上下排列，也可以内外嵌套。比如说

<herder><footer>Hi,html!</footer></header>

HTML的标签写法非常多，需要慢慢去学习

二.标签的属性

1.1属性

来修饰标签的，设置当前标签的一些功能。
<标签属性1=“值1” 属性2=“值2”>
注意空格！
来写一些：
输入这些
打开后，把鼠标移上去会显示值。

title就是给标签加标题，以达到提示信息的作用。

Web前端学习第一周008：HTML初始代码

就前面的学习来看，我们并没有输入初始代码。不过为了规范，初始代码仍然重要。
如何打出来？
打开VS Code，打开文件，输入！然后Tab，就会出现HTML的初始代码。

一.深入了解

1.1 初见

每个.html文件都有的代码叫做HTML初始代码，要符合.html文件的规范。
！+Tab键：快速创建HTML的初始代码，非常方便，当然新手建议手打。
~~（听说Tab键有奇效）~~
它长这样：

第五六两行是什么先不用了解，暂时涉及不到。（新手期甚至可以去掉）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>   
</head>
<body>
    
</body>
</html>

1.2 结构

head，网页的头，就是上面那个显示网址，有收藏夹刷新后退的那个地方。
那个Document是网页的名字，比如将他改成“我是一个网页”。
body，网页的身，就是我们所能看到的网页的主题内容。

<!DOCTYPE html>

文档声明：告诉浏览器这是一个.html文件

<html lang="en">

html文件的最外层标签，lang="en"表示是一个英文网站，可以去，但加上更符合规范。cn是中国网站。

<meta charset="UTF-8">

元信息：是编写网页中的一些赋值信息。charset="UTF-8"国际编码，让网页不出现乱码的情况。

<title>Document</title>

设置网页的标题

<body>
</body>

二.演示

打开来是这样的：

Web前端学习第一周009：HTML中的注释

一.注释很重要！

1.1注释是什么

注释在浏览器中看不到，能在代码中看到。


它可以把暂时不用的代码注释起来。方便以后使用。
对开发人员有提示作用。有助于开发人员（包括自己）修改代码。

1.2快捷键

快捷键是Ctrl+/和Shift+Alt+a，Shift+Alt+a需要选中代码。
重复操作可以删除注释。

1.3注释的重要性

对于人来说，计算机的语言往往晦涩难懂。为了方便人理解编程语言，明确变量，值等内容的含义，注释就显得非常重要。

Web前端学习第一周010：HTML的语义化

一.什么是语义化？

1.1语义化

所谓HTML的语义化就是根据网页中的结构，选择合适的HTML标签。
根据什么样的结构，写什么样的标签。
比如说，列表标签。如图：

1.2好处

在没有CSS的情况下，页面也能呈现出很好的内容结构。
游离于SEO，让搜索引擎爬虫更好地理解网页。
方便其他设备解析（如屏幕阅读器，盲人阅读器等。）
便于团队开发和维护

二.提取当前网页标题

网页
它可以将一个网页的标题整理为一个大纲，这样会方便读者阅读。

Web前端学习第一周011：标题与段落

一.标题

1.1简介

首先，这里的标题不是title，这里的标题是指body内容部分的标题。它首先是个双标签，写法有很多，总共有6个等级，<h1></h1>......<h6></h6>。

1.2演示

比方说，敲一段这样的代码：

<h1>这</h1>
<h2>是</h2>
<h3>六</h3>
<h4>个</h4>
<h5>标</h5>
<h6>题</h6>

将它打开是这样的：

在一个网页中h1标题最为重要，并且一个.html文件中只能有一个h1标题，其他的可以有多个。
h5,h6标签在网页中不经常使用。

二.段落

2.1演示

我们输入这样的代码：

<h1>这</h1>
<h2>是</h2>
<h3>六</h3>
<h4>个</h4>
<h5>标</h5>
<h6>题</h6>
<p>这是一个段落</p>

打开网页是这样子的：

2.2简介

p标签表示段落，也是一个双标签：<p>这是一个段落</p>

Web前端学习第一周012：文本修饰标签

一.文本修饰标签

1.1`<strong></strong>`

表示强调，会对文本进行加粗。强调性强。

1.2`<em></em>`

表示强调，会让文本变成斜体。强调性弱。

1.3`<sub>和<sup>`

下标文本和上标文本。平方符号，立方符号，化学式可能会用到这些。

1.4`<del>和<ins>`

删除文本和插入文本，一般情况下是配合使用的。

1.5`<b></b>`

在没有合适的标签来加粗时，<b></b>标签作为最后的选项

1.6示例

<!DOCTYPE html>
<html lang="cn">
<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>
    <p>
    <strong>我是一段需要加粗强调的文字</strong>
    </p>
    <p>
    <em>我是一段需要斜体强调的文字</em>
    </p>
    <p>
    这是一段需要下标的文字：H<sub>2</sub>0
    </p>
    <p>
    这是一段需要上标的文字：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
    </p>
    <p>
    原价<del>300</del>促销<ins>100</ins>
    </p>
</body>
</html>

打开网页是这样的：

Web前端学习第一周013：图片标签与图片属性

一.图片标签

1.1`<img>`

单标签，输入img然后Tab即可
会出现这样的东西：
图片标签

1.2`<src>`

引入图片地址，在网上找一张图片，在新标签页中打开图像，就可以看到图片地址。

1.3`<alt>`

当图片出现问题时，显示一段友好的文字。

1.4`<title>`

提示信息。鼠标移上去就会显示。

1.5`<width>`和`<height>`

图片的大小。一般写上，可以在网速较慢时给用户良好的观感。

二.演示

输入以下代码：

<!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>
    <p>
        <img src="https://img-home.csdnimg.cn/images/20201124032511.png"
         alt="CSDN"
         title="这是图片的提示信息"
         width="400"height="400">
        </p>
</body>
</html>

打开后是这样的：
在这里插入图片描述

Web前端学习第一周014：引入文件的地址路径

一.相对路径和绝对路径

1.1相对路径

相对路径，顾名思义就是相对与某一文件进行引路。
"."在路径中表示当前路径（一个点）
". ."在路径中表示上一级路径（两个点）
相对于本.html文件的相对位置。

1.2绝对路径

真真实实的文件位置。如果位置改了就看不见了。

二.一些需要注意的点

相对路径和绝对路径各有优劣。
在Windows系统中，写路径用斜线和反斜线都是可以的。但是规范来说应该用斜线。尽量避免用反斜线。
但是网络地址必须是斜线！！！

Web前端学习第一周015：跳转链接

一.链接标签

1.1`<a>`

这是一个双标签<a></a>，在VS Code输入a然后Tab会生成<a href=""></a>
href属性：链接的地址
比方说来个这个：

<!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>
    <a href="http://www.baidu.com">访问百度</a>
</body>
</html>

就会出现这样，点开就是百度。
在这里插入图片描述
当然还可以链接图片，比方说：

<!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>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://mlxgc.top/"><img src="C:\Users\17592\Desktop\VS Code\四叶草.jpg" alt="点击四叶草查看招新网站"></a>
</body>
</html>

打开就是这样的：
在这里插入图片描述

1.2`<target>`

可以改变链接的打开方式，默认情况下是在当前页面打开(_self)。在新窗口打开是（_blank）
比如这样：

<!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>
    <a href="http://www.baidu.com"target=_blank>访问百度</a>
    <a href="http://mlxgc.top/"><img src="C:\Users\17592\Desktop\VS Code\四叶草.jpg" alt="点击四叶草查看招新网站"></a>
</body>
</html>

这样访问百度就是新打开的窗口了。

1.3`base`

单标签，改变链接的默认行为。它一般写在<head>中。

<!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>
    <base target=_blank>
</head>
<body>
    <a href="http://www.baidu.com"target=_blank>访问百度</a>
    <a href="http://mlxgc.top/"><img src="C:\Users\17592\Desktop\VS Code\四叶草.jpg" alt="点击四叶草查看招新网站"></a>
</body>
</html>

只要这样写，那就是默认的在新窗口打开网页了。

Web前端学习第一周016：跳转锚点

一.跳转锚点

跳转锚点，就是书签链接，有两种办法可以实现

1.1id属性

这样：
在这里插入图片描述
打开之后，是这样

点开对应文字，就能跳转到对应锚点

1.2name属性

之前的id是这样的：
在这里插入图片描述
可以看到id在h2里面。
name和id不同，name需要在前面再加一个<a></a>

可以达到一样的效果。

Web前端学习第一周017：特殊符号

一.特殊符号

1.1什么是特殊符号

在编写一些文本时，经常会遇到输入法无法输入的字符，比如注册商标，版权符等，还有往一段文字里加入多个空格时，页面并不会解析出多个空格。这些无法输入的和多个空格·都是特殊字符。HTML中为这些特殊字符准备了专门的代码。
&+字符

1.2参照表

在这里插入图片描述

1.3示例

<!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>
    <p>
        &lt;HTML&gt;
        hello                        world
        hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
    </p>
</body>
</html>

输入这串代码，仔细看两个hello world
这是结果：

Document

<HTML> hello world hello world

Web前端学习第一周018：无序列表

一.无序列表

1.1简介

列表时网页中常见的变现方式，在HTML中，对列表进行了分类，分为无序列表，有序列表，定义列表三种。这一章讲一下无序列表。

1.2`<ul><li>`

<ul><li></li></ul>

都是双标签，分别表示列表的最外层容器，列表项。
ul和li是组合标签，当中不能有其他标签。（符合嵌套的规范）
这样是正确的：

<ul>
<li>第一项</li>
<li>第二项</li>
</ul>

第一项
第二项

但是lili之间是可以有其他标签的。

1.3type属性

改变前面标记的样式（一般用CSS控制）
本来是这样的：

在这里插入图片描述

神奇链接
将代码变成这样：

    <ul type="square">
        <li>第一项</li>
        <li>第二项</li>
</ul>

结果是这样的，具体参考神奇链接
在这里插入图片描述

Web前端学习第一周019：有序列表

一.有序列表

1.1`<ol><li>`

有序列表用的非常少，无序列表可以代替有序列表去用。
分别表示列表的最外层容器，列表项。

1.2演示

格式和无序列表一样，有序列表会默认给每项前面标注上序号。（无序列表其实用CSS也能做到）
神奇链接

Web前端学习第一周020：定义列表

一.定义列表

1.1简介

列表项需要添加标题和解释内容的列表

1.2三个标签：

<dl>定义列表
<dt>定义专业术语或名词
<dd>对名词进行解释和描述

1.3演示

<!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>
    <dl>HTML</dl>
    <dd>超文本标记语言</dd>
    <dl>CSS</dl>
    <dd>层叠样式表</dd>
    <dl>JavaScript</dl>
    <dd>网页脚本语言</dd>
</body>
</html>