目录
HTML+CSS导学
1. 拨云见日
①基础的HTML和CSS的学习
②熟悉切图流程、切图方式
③实战阶段了解PC企业站布局和PC游戏站布局
1.1 基础知识
- 1.“HTML、CSS”——是做网站的编程语言。
- 2.浏览器解析代码→呈现网站
右键网页选择查看网页源代码 - 3.网站由网页组成
网页 .html文件
<新建文本文档><修改文件格式><记事本编辑代码><打开即可查看网页>
1.2 VS Code
- 支持几乎所有主流的开发语言的语法高亮、语法检查、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。
1.3 编辑器基本使用
需要下载的插件 ：语言包、open in browser、view in browser
设置 ：文件→首选项→设置（大小、是否换行 word wrap）
创建文件、创建文件夹、重命名和删除、搜索
- Ctrl + s ：保存
Ctrl + a ：全选
Ctrl + x ：剪切
Ctrl + c ：复制
Ctrl + v ：粘贴
Ctrl + z ：撤销
Ctrl + y ：前进
shift + end ：从头部选中一行
shift + home ：从尾部选中一行
shift + alt + ↓ ：快速复制一行
alt + ↑或↓ ：快速移动一行
tab ：向后缩进
tab + shift ：向前缩进
alt + 鼠标左键 ：多光标
Ctrl + d ：选择相同元素的下一个
简单使用VScode
<!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">
<style>
div{color: cornflowerblue;<font-size:italic> ;}
</style>
<title>Document</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
1.4 Chrome浏览器
下载地址 ：https://www.google.cn/chrome/
五大浏览器 ：IE、火狐（Firegox）、谷歌（Chrome）、Safari、Opera
1.5 深入了解网站开发
一个大型网站的开发需要团队配合，各个岗位都不可或缺
UI设计师
- 设计稿（图片、文字、风格、按键等）
- 指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人
web前端开发工程师（H5开发）
- 主要进行网站的开发、优化、完善的工作
- 将设计稿转化成代码
- 将数据库里的数据显示到页面
- HTML（结构）+CSS（样式）的编写
web后端开发工程师
- 负责小程序前端修改和优化升级，根据网站业务需要开发和程序修改。
- 负责网站日常运行的技术维护工作，对出现的问题积极有效的进行处理；
- 用html5，css3及JavaScript,vue或uniapp完成页面制作，对完成的页面进行维护和对网站前端性能做相应优化；
- 丰富互联网的Web开发，改善用户体验；
- 进行相关数据处理、查询，统计和分析工作。
1.6 web前端的三大核心技术
- HTML ：结构
- CSS ：样式
- JavaScript ：行为（与用户的交互、图片等）
<style>
div{color:red;font-style: italic;}
</style>
<div>超鬼王根本没时间肝啊怎么办</div>
<script>
let div = document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover = function(){
timer = setInterval(()=>{
if(flag){
div.style.color = 'blue';
div.style.fontStyle = 'normal';
}
else{
div.style.color = 'red';
div.style.fontstyle = 'italic';
}
flag = !flag;
},500);
}
div.onmouseout = function(){
clearInterval(timer);
};
</script>
添加一点点点新东西
长按文字可以变换颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>作业作业作业</title>
</head>
<style type="text/css">
div:hover {
color: red;
}
div:active {
color: green;
}
</style>
<body>
<div> 超鬼王根本没时间肝啊啊啊啊啊怎么办啊啊啊啊啊啊</div>
</body>
</html>
1.7 HTML基础结构与属性
超文本标记语言（HyperText Maekup Language），标准通用标记语言下的一个应用。是网页制作必备的编程语言
HTML：超文本 标记 语言
超文本：文本内容、非文本内容（图片、视频、音频等）
标记（标签）：<单词>
语言：编程语言
< header >
< footer >写法分成两种
- 单标签：< header >
- 双标签：< header >< /header >
创建标签的快捷键：单词 + tab键→<单词>
标签可以上下排列，也可以组合嵌套。
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”…>
<header title="hello">hello world</header>
<footer title="hi 老婆！">你好，结芬！</footer>
- HTML5标签含义元素周期表
1.8 HTML的初始代码
- 每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法
- ！+ tab键：就可以快速创建初始代码
<!DOCTYPE html>
<!--文档声明:告诉浏览器这是一个html文件-->
<html lang="en"><!--html文件的最外层标签:包裹着所有html标签代码-->
<!--lang="en" 表示一个英文网站 lang="zh-CN"表示一个中文网站-->
<head><!--网页标题、网址等-->
<meta charset="UTF-8">
<!--元信息:是编写网页中的一些赋值信息 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>
<!--显示网页内容的区域-->
</body>
</html>
1.9 HTML注释
- 写法：< !-- 注释的内容 – > 在浏览器中看不到，只能在代码中看到注释的内容
- 意义：
-
- 把暂时不用的代码注释起来，方便以后使用
-
- 对于开发人员进行提示作用
-
- 快捷添加注释与删除注释：
-
- Ctrl + /
-
- shift + alt + a
-
1.10 HTML语义化
- 所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。
- 好处：
-
- 在没有CSS的情况下，页面也能呈现出很好的内容结构。
-
- 有利于SEO，让搜索引擎爬虫更好的理解网页。
-
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
-
- 便于团队开发与维护
-
1.11 标题与段落
- h标签 → 标题
- p标签 → 段落
<!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>
<!--标题 → 双标签:<h1></h1>... <h6></h6>-->
<h1>我爱线代！</h1>
<!--在网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签-->
<h2>线代爱我！</h2>
<!--段落 → 双标签:<p></p>-->
<p>线性代数是代数学的一个分支,主要处理线性关系问题。
线性关系意即数学对象之间的关系是以一次形式来表达的。
例如,在解析几何里,平面上直线的方程是二元一次方程;空间平面的方程是三元一次方程,
而空间直线视为两个平面相交,由两个三元一次方程所组成的方程组来表示。
含有n个未知量的一次方程称为线性方程。
关于变量是一次的函数称为线性函数。
线性关系问题简称线性问题。解线性方程组的问题是最简单的线性问题。
</p>
<h3>我爱代线！</h3>
<p>线性代数作为一个独立的分支在20世纪才形成,然而它的历史却非常久远。
“鸡兔同笼”问题实际上就是一个简单的线性方程组求解的问题。
最古老的线性问题是线性方程组的解法，在中国古代的数学著作《九章算术·方程》章中,
已经作了比较完整的叙述，其中所述方法实质上相当于现代的对方程组的增广矩阵的行施行初等变换,
消去未知量的方法。</p>
<p>由于费马和笛卡儿的工作,现代意义的线性代数基本上出现于十七世纪。
直到十八世纪末,线性代数的领域还只限于平面与空间。
十九世纪上半叶才完成了到n维线性空间的过渡。</p>
<p>随着研究线性方程组和变量的线性变换问题的深入,
行列式和矩阵在18-19世纪期间先后产生,为处理线性问题提供了有力的工具,
从而推动了线性代数的发展。向量概念的引入,形成了向量空间的概念。
凡是线性问题都可以用向量空间的观点加以讨论。
因此,向量空间及其线性变换,以及与此相联系的矩阵理论,
构成了线性代数的中心内容。</p>
<h4>爱我线代！</h4>
<h5>爱我代线！</h5>
<h6>代线爱我！</h6>
<!--h5h6标签在网页中不经常使用-->
</body>
</html>
1.12 文本修饰标签
- 强调 → 双标签
- < strong >< /strong > ：加粗，强调性更强
- < em >< /em > ：斜体，强调性较弱
- < sup >< /sup > :上标文本
- < sub >< /sub > :下标文本
- < del >< /del > ：删除文本
- < ins >< /ins > ：插入文本
一般情况下，删除文本和插入文本是配合使用的
<!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>
<strong>
<!--<strong></strong>加粗，强调性更强-->
你不喜欢线代？（灵魂质问）
</strong>
</p>
<p>
<em>
<!--<em></em>斜体，强调性较弱-->
线代！我就是你最忠实的粉丝！！！
</em>
</p>
<p>
谁会不喜欢线代呢？！
</p>
<p>
<!--<sup></sup>:上标文本-->
勾股定理
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>
<p>
<!--<sub></sub>:下标文本-->
双氧水制氧气
2H<sub>2</sub>O<sub>2</sub> → 2H<sub>2</sub>O + O<sub>2</sub>
</p>
<p>
<!--<del></del>:删除文本-->
<del>你以为我在学前端？</del>
</p>
<p>
其实我是在学线代！！！
</p>
<p>
<!--<ins></ins>:插入文本-->
<ins>没有人比我更懂线代（笑）</ins>
</p>
<!--一般情况下，删除文本和插入文本是配合使用的-->
</body>
</html>
1.13 图片标签与图片属性
- < img > → 单标签
src ：引入图片地址
alt ：当图片出现问题的时候，可以显示一段友好的提示文字
title ：提示信息
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>
<img
src="https://webstatic.mihoyo.com/upload/op-public/2021/10/03/87db6426a52df35c8aa0fbb067323956_999970175693659617.png"
alt="米哈游官网原神相关图片"
title="米哈游坏事做尽！"
width="328"
height="198"
>
</body>
</html>
1.14 引入文件的地址路径
- 相对路径
- 在路径中表示当前路径
- 在路径中表示上一级路径
- 绝对路径 比如：
- C:\vscode\垃圾\img\绘卷.jpg
- https://yys.res.netease.com/pc/zt/20161108171335/data/shishen_big_beforeAwake/391.png?v6
<!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>
<img src="./img/绘卷.jpg">
</body>
</html>
1.15 跳转链接
- a标签 → 双标签< a >< /a >
- href属性 ：链接地址
- target 属性 ：可以改变链接打开的方式
- 默认情况下：在当前页面打开==_self== ；新窗口打开==_blank==
- base → 单标签 ：作用是改变链接的默认行为
<!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 → 单标签 ：作用是改变链接的默认行为-->
<base target="blank">
</head>
<body>
<!--a标签 → 双标签< a >< /a >-->
<a href="https://yys.163.com/dtbz/#index">来看看老婆！
<img src="https://yys.res.netease.com/pc/zt/20170731172708/data/picture/20220916/6/1366x768.jpg"
width="328"
height="198"
>
</a>
</body>
</html>
1.16 跳转锚点
- 实现一
- #号
- ID属性
- 实现二
- #号
- name属性
<!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="#SP阎魔">大夜摩天阎魔</a>
<a href="#SP红叶">心狩鬼女红叶</a>
<a href="#SP荒">神启荒</a>
<h2 ID="SP阎魔">
大夜摩天阎魔
</h2>
<p>
阴阳之间，亡灵游荡于天地，带着一丝对阳世的眷恋，待
鬼使拘引。但收留亡灵的冥土所在之处，如今只有广袤混乱的蛮荒大
地。冥土的残迹绵延向远天，逐渐向上耸起无数悬崖峭壁，似
有遮天蔽日的利齿咬合而下，将冥土大地的一切吞入腹中
，留下幽深残缺的黑色齿痕。
</p>
<p>
冥土的残迹绵延向远天，逐渐向上耸起无数悬崖峭壁，似
有遮天蔽日的利齿咬合而下，将冥土大地的一切吞入腹中
，留下幽深残缺的黑色齿痕。
我立足于黑色的高峰之上，判官负伤的灵魂徘徊在我身边
，我看着他，见他与一个初来冥界，彷徨的新生亡灵无甚
区别。
</p>
<h2 ID="SP红叶">
心狩鬼女红叶
</h2>
<p>
我常听说，人类的外表下隐藏着复杂的心，
他们的心虽然和我们一样只有一颗，但却可以千变万化，
将真心隐藏在重重陷阱之中，
所以要时刻小心，他们温暖的抚摸后可能隐藏着冰冷的笼子。
</p>
<p>
不过，在我看来，他们的笼子除了关押异类也会禁锢同类呢，
就像那个美丽的女孩。
她的脸庞宛如戴着面具，没有喜怒哀乐，
她的举动如同尺矩，抬手的高度都需要精确到位，
所有人无言的凝视都高挂在她的头顶，织就一张密不透风的网。
</p>
<h2 ID="SP荒">
神启荒
</h2>
<p>
天命不可违，一切皆注定。
这是我从月海诞生起便一直听从的规训。
我的导师—预言之神月读教会我预言之力，也将这个规训印刻进我的脑海。
月海中的星辰运转都有规律可循，星辰皆围绕中心的圆月。
仿佛遵循着命定轨迹一般，日复一日，周而复始。
</p>
<p>
就像我们，从月海中诞生的星之子对于月读一样。
而圆月则给予回应，向星辰展现预言。
还曾记得小时候，导师月读曾牵着我的手，漫步在无尽的月海。
</p>
</body>
</html>
1.17 特殊符号
- 编写一些文本时，经常会遇到输入无法输入的字符，如®（注册商标）、℗（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些字符准备了专门的代码。
| 特殊字符 | 含义 | 特殊字符代码 |
|---|---|---|
| - | 空格符 |  ； |
| ℗ | 版权 | ©； |
| ® | 注册商标 | ®； |
| ﹤ | 小于号 | <； |
| ﹥ | 大于号 | >； |
| & | 和号 | &； |
| ¥ | 人民币 | ¥； |
| ℃ | 摄氏度 | °； |
1.18 无序列表
- < ul >、< li >：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的
<!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>
<ul>
<li>
第一项
</li>
<li>
第二项
</li>
</ul>
<!--以下是错误写法
<ul>
<P>
<li>第一项</li>
<li>第二项</li>
</P>
</ul>
-->
</body>
</html>
- type属性：改变前面标记的样式（一般都是用CSS去控制）
- 无序列表练习
1.19 有序列表
- < ol >、< li >：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。 - type属性：改变前面标记的样式（一般都是用CSS去控制）
- 有序列表练习
<!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>
<ol type="i">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</body>
</html>
1.20 定义列表
- 列表项需要添加标题和对标题进行描述的内容
< dl > ：定义列表
< dt > ：定义专业术语或者名词
< dd > ：对名词进行解释和描述
<!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>
<dt>泷夜叉姬</dt>
<dd>永夜无眠</dd>
<dt>不知火</dt>
<dd>蝶步韶华</dd>
<dt>彼岸花</dt>
<dd>三途业火</dd>6
</dl>
</body>
</html>
2. 溯本求源
①HTML和CSS的扩展知识点
②HTML5的新语法
③CSS3的新语法
④浏览器兼容问题与解决方案
3. 风生水起
①弹性布局（Flex）
②网格布局（grid layout）
③移动端布局（流式布局、rem布局等）
④响应式布局（一个网站能够兼容多个终端，用一套代码适应多种设备）
⑤bootstrap（一个用于前端开发的开源工具包，是一个CSS/HTML框架）
4. 巧夺天工
①预编译CSS
②postcss
③CSS架构
④高级功能
⑤CSS与JS交互
未完待续。。。
本文含有隐藏内容，请 开通VIP 后查看