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.3base
单标签,改变链接的默认行为。它一般写在<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>
<HTML>
hello world
hello world
</p>
</body>
</html>
输入这串代码,仔细看两个hello world
这是结果:
<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>
- 第一项
- 第二项
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>
-
HTML
-
CSS
-
JavaScript