前端第一次培训-HTML,CSS基础
前端三剑客之HTML
标记语言
HTML（Hyper Text Markdown Language）即超文本标记语言，使用标签来描述网页，是网页的骨架部分
标记语言说白了就是让计算机读取的语言，只是告诉计算机那里有个“东西”，让计算进行渲染等处理，以及定义了这些“东西”是什么，以及它们应该如何被呈现或处理
你的第一个HTML元素
在创建一个后缀为
html的文件过后，在vscode中打开，输入!并且按下回车，可以帮助你快捷创建一个html页面的框架and,只有在body里面的内容才会在页面中被展示出来，别的部分会被隐藏，在这里暂时不展开讨论
那么我们自然是要在
<body>标签的中间添加我们的元素
1 |
|
html中的元素一般都会被一对标签包围，但是如果不用标签包围写文字的话也会被显示出来
标签的结构
在HTML中一个元素通常由一对标签构成，这对标签包括一个开始标签（Opening Tag）和一个结束标签（Closing Tag）我们需要注意到不同标签的名称不同，而且标签具有特定的属性给我们设置。
一些常用的标签以及属性
标题
<h><h1>一级标题</h1> <h2>二级标题</h2> ...... <h6>六级标题</h6>1
2
3
4
5
6
7
- 标题文字大小, 从h1到h6逐渐减小
- 段落 `<p>`
- ```html
<p>这是一个段落</p>段落之间会换行, 且存在间隔
换行
<br><p>第一段<br>第二段</p>1
2
3
4
5
6
7
- 水平线 `<hr>`
- ```html
<p>段落一</p>
<hr>
<p>段落二</p>划分区域, 提高美观性.
超链接
<a><a href="https://www.bilibili.com/">去B站的超链接</a> <a href="https://developer.mozilla.org/zh-CN/" target="_blank">学习前端开发</a>1
2
3
4
5
6
7
8
9
10
11
12
13
14
- 点击后跳转到指定网址的网页.
- 标签属性: **[📌📌加了中括号的属性表示对应属性是可选属性, 可以不写]**
- `href`: 指定要跳转到的目标网址
- `[target]`: 跳转的行为类型. 默认值是`"_self"`, 即将当前标签页替换为新网址; 设置为`"_blank"`后能在新标签页打开网址
- 媒体标签: 图片 `<img>`, 音频 `<audio>`, 视频 `<video>`
- ```html
<img src="图片路径" alt="加载失败时显示的文字" width="100" height="150">
<audio src="音频路径" controls loop autoplay muted></audio>
<video src="视频路径" controls loop autoplay muted width="" height=""></video><img>标签属性:src: 资源路径URL, 可以填图片网址或者本地文件路径alt: 备用文本描述. 简单说就是图片因为加载出错或者用户省流量等各种原因不显示时才出现的文字[width],[height]: 图像尺寸, 单位是像素(px)
<audio>标签属性:src: 资源路径[controls]: 是否显示控件 (比如播放/暂停按钮等, audio标签最好加上该属性, 不然看不到播放进度条)[loop]: 是否循环播放[autoplay]: 是否一进页面就自动播放[muted]: 是否静音播放
<video>标签属性:- 基本同
<audio>, 不过也可以设置[width],[height]属性来设置尺寸
- 基本同
🤔🤔为什么像controls, loop这些属性只用写一个属性名, 不用赋值的?
因为这些属性值只接受布尔值 (boolean, 只有两个值: true✅, false❎). 不写属性名就是false, 写上了就是true
📌
width和height属性的细节: 只设置其中一项的话, 另一项属性会自动按原图/视频比例缩放.
如果两项都设置了, 图像可能会拉伸变形.
按钮
<button><button disabled>这是一个按钮</button>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
- 用户点击之后就会激活一些功能. 一般要**配合JavaScript使用**, 下次培训会讲
- 标签属性:
- `[disabled]`: 是否禁用按钮
- 表单系列标签
- `<input>`系列标签. 用于让用户输入信息, 比如用户名密码什么的
其**必选**属性`type`决定了表单的种类:
| type属性值 | 说明 |
| ---------- | ---------------------------------------------- |
| text | 文本框, 用于输入单文本 |
| password | 密码框, 输入的内容显示为黑点点●●● |
| radio | 单选框, 用于多选一, **注意要设置name属性一样** |
| checkbox | 多选框, 用于多选多, **注意要设置name属性一样** |
| file | 文件选择, 用于上传文件 |
| submit | 提交按钮, **需要配合JavaScript, form标签食用** |
- 标签属性:
- `text`, `password`:
- `[placeholder]`: 输入框占位符, 用于提示用户
- `file`:
- `[multiple]`: 是否允许上传多个文件
- 所有类型:
- `[name]`: 该表单项的名称, 用来约束单选/多选框或者配合JavaScript区分不同的表单项
- 栗子:
```html
<h2>不同种类的表单标签</h2>
<hr> <!-- 应用占位符placeholder -->
文本框, 用于输入单行文本: <input type="text" placeholder="随便输入点什么东西">
<hr>
密码框, 用于输入密码: <input type="password" placeholder="密码">
<hr>
<strong>单选框, 用于多选一: </strong>
<br>
性别:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
工资收入:
<br>
＜3000 <input type="radio" name="income"><br>
3000~6000 <input type="radio" name="income" checked><br>
6000~10000 <input type="radio" name="income"><br>
＞10000 <input type="radio" name="income"><br>
<hr>
<strong>多选框, 用于多选多: </strong>
<br>
爱好的运动:
<br>
<input type="checkbox" name="hobby">乒乓球<br>
<input type="checkbox" name="hobby">羽毛球<br>
<input type="checkbox" name="hobby">篮球<br>
<input type="checkbox" name="hobby">足球<br>
<input type="checkbox" name="hobby">网球<br>
<input type="checkbox" name="hobby">排球<br>
<hr>
<strong>文件选择, 用于上传文件: </strong>
<br>上传单个文件:
<input type="file" name="">
<br>上传多个文件:
<input type="file" name="" multiple>
<hr>下拉菜单
<select>相关子级标签:
<option>菜单选项栗子:
1
2
3
4
5
6
7
8<h2>下拉菜单</h2><hr>
所在省份:
<select>
<option value="001">北京</option>
<option value="002" selected>上海</option>
<option value="003">广州</option>
<option value="004">深圳</option>
</select>标签属性:
value: option选项的实际值. 比如北京在后台对应的数据是001, 此时value就是001[selected]: 有该属性的option选项会被默认选中
文本域
<textarea>用户可以输入多行内容.
栗子:
1
<textarea placeholder="输入多行文本"></textarea>
标签属性:
placeholder: 占位文本
列表
<ul>,<ol><ul>为无序列表,<ol>为有序列表列表项为
<li>栗子:
1
2
3
4
5<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
分区
<div><span>- 给页面进行区域划分, 或者划分标签的层级, 并无其他特殊作用
div独占一行, span一行可以排列多个
- 给页面进行区域划分, 或者划分标签的层级, 并无其他特殊作用
注释
<!-- xxx -->- 程序员留下的评论, 说明等信息, 不是标签而是一种语法
以下列举一些比较常用的标签以及属性，想必是列举不全的，可以上MDN了解更多
语义化标签
- 概念：标签名称拥有自己的含义.
- 例如:虽然
<div>和<p>标签都会独占一行, 但是<div>仅作划分区域用, 无特殊含义; 而<p>含义
是段落 (paragraph) - 可读性更好，使代码结构清晰，方便阅读（不要到处都用
div）
前端三剑客之CSS
CSS(Cascading Style Sheets)即层叠样式表, 是决定页面「外观」的重要部分。- 是可以用来控制元素的尺寸颜色和布局等的样式语言
- 例如说
background-color可以控制对应元素的背景颜色，font-size就可以调整元素内字体的大小，width和height等就可以调整元素的大小。特别的，当你在调整元素的大小的时候可以尝试使用max-height,min-width这些属性以及50%,1vh,1vw这些特殊单位的长度来实现响应式的布局（即根据页面的尺寸来动态地调整页面的布局）
- 例如说
CSS的格式CSS属性实在是太多了，而且CSS的属性确实像是英语，需要积累，对此我们的建议是多看多用多查，查多了用多了就记下来了。1
2
3
4
5
6CSS选择器 {
CSS属性名称: CSS属性值;
CSS属性名称1: CSS属性值1;
......
/* CSS注释 */
}
使用CSS的方法
行内样式
- 直接在标签的
style属性内些CSS属性值1
<p style="background-color: orange; font-size: 40px">一段文字</p>
- 直接在标签的
style标签样式
- 在
<head>标签内嵌套一个<style>标签或者在<html>标签外写一对<style>标签，再在其中写入CSS属性：1
2
3
4
5
6
7
8
9
10
11
12<head>
<!-- ... -->
<style>
.paragraph {
background-color: orange;
font-size: 40px;
}
</style>
</head>
<body>
<p class="paragraph">一段文字</p>
</body>
- 在
外联样式
- 另写一个
.css文件, 然后在html页面的<head>标签内使用<link>标签引入:1
2
3
4
5/* in style.css */
.paragraph {
background-color: orange;
font-size: 40px;
}1
2
3
4
5
6
7<!-- in index.html -->
<head>
<link rel="stylesheet" href="style.css的相对路径">
</head>
<body>
<p class="paragraph">一段文字</p>
</body>
- 另写一个
CSS选择器
如果每个元素的都用行内样式来填写一大堆属性是否看起来可读性太差？如果每个样式相同的元素都使用复制粘贴来的行内样式修改起来起来是否太过痛苦？在我写了style标签样式之后该怎么确定会在那些元素上生效？
这一切的答案都指向了CSS选择器
- 选择器的分类
- 标签名选择器
- 直接写标签的名称，然后跟CSS:
1
2
3
4p { /* 把所有的p标签都加上下面的样式 */
background-color: orange;
font-size: 40px;
}
- 类名选择器
- 先给元素设置类名属性: class=”xxx” , 然后CSS中用 .类名 的格式来选择对应元素栗子见上文 style标签样式
- 设置多个类名时, 用空格隔开:
class="类名1 类名2 类名3 ..."
- id选择器
- 先给元素设置id属性: id=”xxx” , 然后CSS中用 #id 的格式来选择对应元素
- 一个页面中只能有一个id为
xxx的元素1
2
3
4
5
6
7
8
9
10
11
12<head>
<!-- ... -->
<style>
#p1 {
background-color: orange;
font-size: 40px;
}
</style>
</head>
<body>
<p id="p1">一段文字</p>
</body>
- 选择器的权重:标签选择器 < 类选择器 < id选择器 < 行内样式
- 复合选择器
- 后代选择器
选择器1 选择器21
2.outer .inner {...}
/* 带有outer类名的元素中, 所有带inner类名的后代(包括子代, 孙代, ...)都会被选中 */
- 子代选择器
选择器1 > 选择器21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.outer > #inner {...}
/* 带有outer类名的元素中, 只有id为inner的子代(F1, 不包括孙代, 曾孙代...)才会被选中，不限制标签类型 */
```
3. 交集选择器
- `选择器1选择器2`(注意交集选择器没有中间那个空格)
```css
p#inner {...}
/* 只有是p而且带有inner这个id的元素才会被选中 */
```
4. 并集选择器
- `选择器1，选择器2`
```css
.outer,
.inner {...}
/* 带有outer或inner类名的元素都会被选中, 适合简化重复的CSS */
vscode中编写HTML时的一些快捷表达
!: 快速生成一个!DOCTYPE声明- 输入标签名自动补齐
1
2
3
4
5<!-- 输入 h1 , 按回车自动补全 -->
<h1></h1>
<!-- 输入 h1{填充文本} , 按回车自动补全 -->
<h1>填充文本</h1>
其它标签也是同理 - 使用
#输入id.输入class[]输入属性1
2
3
4
5<!-- 输入 div.class1#id1 , 按回车自动补全 -->
<div class="class1" id="id1"></div>
<!-- 输入 div[attr=value] , 按回车自动补全 -->
<div attr="value"></div>
其它标签也是同理 - 使用
*快速生成多个元素1
2
3
4<!-- 输入 div.class1*3 , 按回车自动补全 -->
<div class="class1"></div>
<div class="class1"></div>
<div class="class1"></div> - 使用
>输入嵌套标签,+生成兄弟标签，用()进行分组1
2
3
4
5
6
7
8
9<!-- 输入 div>p , 按回车自动补全 -->
<div>
<p></p>
</div>
<!-- 输入 div>(p+img) , 按回车自动补全 -->
<div>
<p></p>
<img src="" alt="">
</div>
CSS的层叠性
在
1 | .outer{ |
和
1 | .outer{ |
的情况下，.outer最终会是什么颜色？
在层叠样式表篇中，如果给一个元素设置了重复的CSS属性，此时就会发生层叠（覆盖），写在后面的就会覆盖掉前面的,那么在这种情况之下,.outer最终就会是黄色背景了。
常用的CSS属性
和定位和布局有关的属性在这里暂时没有涉及
| 属性名称 | 说明 |
|---|---|
width |
宽度 |
height |
高度 |
color |
字体的颜色 |
font-size |
字体大小 |
font-family |
选用的字体 |
text-align |
文本对齐方式 |
line-height |
行高 |
border |
边框 |
border-radius |
边框的圆角半径 |
opacity |
元素的不透明度 |
background-color |
背景颜色 |
除此之外当然还有很多，前面的区域还是交给你们自己去探索吧
使用浏览器来调试
在样式可能存在问题或者说不够美观的情况下，如果进行频繁的修改的话未免有些麻烦了🤯🤯🤯，那么有同学就要问了，学长学长，有没有什么办法在不修改html文件的情况下修改元素还可以修改页面元素和属性并且可以即时看到修改效果的办法呢？
那自然是有的,在浏览器页面当中右键呼出菜单点击”检查”或者点击你键盘上的F12(在某些阵列或者笔记本的键盘上需要你点击Fn+F12orFn+=,视情况而定吧)
你可以在调试工具里面:
- 修改,增删/元素属性/子元素
- 修改.增删元素的CSS属性
CSS盒子模型
页面中的每一个元素都可以看作是一个盒子,再次基础上我们可以更方便地进行布局,
在浏览器中,渲染元素的时候会把元素看成一个个矩形区域,为什么被叫作盒子模型呢?我相信下面的两张图片是相当形象了.
相关的CSS属性:
| 属性名称 | 说明 | 取值 |
|---|---|---|
width,height |
调整内容content的尺寸 |
px,vh,vw,百分比等等 |
margin-top,margin-bottom,margin-left,margin-right |
上下左右的外边距 | px,vh,vw,百分比等等 |
padding-top…. |
内边距 | px,vh,vw,百分比等等 |
border-top |
边框 | 边框宽度 类型(solid | dashed | dotted) 颜色 |
特别的,盒子的最终尺寸大小为:content+padding+border
如果我想设置一个100px * 100px的盒子, 但其中又有10px的padding和1px的border, 那宽高就得设置为78px * 78px了. 以后padding和border宽度一变化我还得再改宽高, 简直是麻烦死了! 😩😩😩
你说的对,但是,好吧没有但是,如果你觉得麻烦,那直接给这个盒子设置一个
box-sizing属性吧:
1 | .box { |
CSS盒子模型的速记模式
1 | .box { |
CSS变量（var）与计算(calc())
虽然不一定是很常用，但是还是要求能看懂
CSS变量是CSS中一个非常强大的功能，它允许我们定义一些变量，然后在样式表中使用这些变量，从而实现对样式的复用和重用。
CSS变量- 声明一个CSS变量，格式为
--变量名:值; - CSS变量可以被继承，即父元素内定义的CSS变量在子元素内也可以使用。故当我们希望一个变量
能在整个文档里使用时，只需要在根元素定义变量即可（以下两种方式等价，后一种（伪类）更常
用。关于伪类的知识后面会讲到）1
2
3
4
5
6
7
8
9p {
--my-color: pink;
}
html {
--main-color: brown;
}
:root {
--text-color: blue;
}
- 声明一个CSS变量，格式为
var()函数var()函数可以引用之前定义的变量。
calc()函数call()函数允许我们在样式表中使用一些数学运算，例如加减乘除等。- 但是要注意，
+和-运算符两边必须有空白字符。如calc(100% -10px)会被解析成为一个无效的表达式，解析结果是：一个百分比后跟一个负数长度值。 *和/则不需要空白字符，但从规范性来说仍推荐加上空白符。
伪类
- 伪类用一冒号
:表示伪类，如:hover、:active、:focus等。 - 被添加到一个选择器末尾的关键字，用于指定所选元素的特殊状态。
- 当你希望所指定的元素在特定状态（如按钮悬停时）下能够呈现出不同的样式时，可以使用伪类
伪元素就不多赘述了，想了解可以自行上网了解。
元素的显示模式
显示模式的主要分类：
- 块级元素：
- 独占一行
- 可以单独设置宽高，不设置时宽度默认跟父级元素一样, 高度由内容撑开
<p> <div> <ul> <li> <header> <footer> <h1> <h2> ...
- 行内元素：行内元素不会独占一行，而是按照文本的宽度来显示。
- 一行可以有多个行内元素
- 不能设置宽高，其尺寸由内容撑开
<a> <span> ...
- 行内块元素：
- 一行可以有多个行内块元素
- 可以设置宽高
<input> <textarea> <button> <select> <img> ...
- 弹性模式（在讲弹性盒布局的时候会详细讲讲）
- 网格模式…
切换元素的显示模式
display的属性值 |
说明 |
|---|---|
block |
切换为块级元素的显示模式 |
inline |
切换为行内元素的显示模式 |
inline-block |
切换为行内块元素的显示模式 |
none |
隐藏元素 |
像是：
1 | <head> |
布局
咱就细说一下弹性盒布局吧
弹性盒布局（flexbox）是CSS中一个非常强大的布局方式，它允许我们通过简单的声明就可以实现各种复杂的布局。
flex用于创建横向或是纵向的一维页面布局。
要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用
display: flex，所有直接子元素都将会按照 flex 进行布局。flex模型图示
- 当父元素应用
display: flex后，其内部子元素沿着两个轴来布局：
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
- 当父元素应用
父元素flex属性设置
flex-direction：调整主轴的方向，交叉轴也会相对应地被修改。row、column：行、列。row-reverse、column-reverse：反向的行、反向的列
flex-wrap：当子元素将要溢出父元素时，是否允许换行wrap：允许换行nowrap：禁止换行
justify-content：主轴上排列方式center：居中对齐flex-start：主轴起始位置布局flex-end：主轴末尾位置布局space-between：先两边贴边，再平分剩余空间space-around：直接平分剩余空间space-evenly：子元素空隙相等
align-items：交叉轴上排列方式normal：默认值，在弹性布局中效果和stretch相同center：居中对齐flex-start：交叉轴起始位置对齐flex-end：交叉轴末尾位置对齐baseline：项目的第一行文字基线对齐stretch：如果项目未设置高度或设为auto，将占满整个容器的高度；如果设置了高度则无变化，类同于flex-start
子元素flex相关属性设置
使用flex为子元素排版时，各子元素宽度分配计算方式颇为复杂，这里我们只介绍比较基本的计算方法，想要了解更为完善的flex技术可以自行搜索
空间分配相关
flex-grow：当这一行子元素宽度小于父元素宽度，子元素分配剩余空间时的分配比例。默认值0，即不会填充剩余空间flex-shrink：当这一行子元素宽度大于父元素宽度，子元素分配超出空间时的分配比例。默认值1，即所有子元素收缩同等的长度flex-basis：设置子元素的宽度flex-basis和width都可以设置宽度，当两个都有自定义时，浏览器听谁的❓❓
- flex布局中宽度的优先级：
min-width/max-width > flex-basis > width > 内容支撑
- flex布局中宽度的优先级：
flex：组合属性flex：flex-growflex-shrinkflex-basisflex：flex-growflex：flex-growflex-basis
其他属性
align-self：改变该子元素在交叉轴上的对齐方式
可以在这个小游戏网站上面练习一下
元素的定位
文本流和文档流
- 文档流，从左到右从上到下地显示，float,absolute,relative会脱离文档流
- 文本流，元素内部的一系列字符的排列规则，即元素内部字符从左到右从上到下显示，absolute,relative会脱离文本流，但float不会脱离文本流
定位
| 相对定位 | 绝对定位 | 固定定位 |
|---|---|---|
| 脱离文档流和文本流，相对于其正常文档流中的位置移动 | 脱离文档流和文本流，相对于其最近的已定位的祖先元素的位置移动 | 脱离文档流和文本流，相对于浏览器视口边缘中的位置移动 |
specially，float虽然脱离了文档流，但是没有脱离文本流，所以会经常用来产生文字环绕效果，float相对于父元素移动，但是子元素的float会消除父元素的float
- float属性的四个可能值
left将元素浮动到左边right将元素浮动到左边none默认值，不浮动inherit默认值，不浮动
- 在使用相对定位，绝对定位，固定定位 之后，
left,right,top,bottom等属性可以移动元素，这些属性只对定位之后的元素起作用，但是float元素无法移动。（可以自己尝试一下）