前端速成之路——html、css
项目一知识点
单表视图列表
-
标题标签
<h1>用户注册</h1> -
分割线与换行
<hr> <br> -
表单提交
- get:通过浏览器地址栏传递值
- post:不通过浏览器地址栏传递值,通过发送请求的消息体传递值,没有大小限制
<form action="./success.html" method="post"> </form>- 文本框、密码框、单选、多选、下拉菜单、邮箱、日期、提交、重置、普通按钮
<!-- 1:单行文本输入框 type="text" 如果不书写type 则 就是文本输入框 name:表示键值对的键,可以随意书写 value:表示键值对的值,就是用户填写的内容,如果不写,则 用户填写什么则value就是 placeholder:悬浮文本,用来进行信息提示 autocomplete:自动完成功能,一般关闭 required:表示表单内容必填,否则无法提交表单 autofocus:自动获取焦点 --> <input type="text" name="username" value="" placeholder="请填写用户姓名" autocomplete="off" required autofocus> <br> <!-- 2:单行文本密码框 type="password" --> <input type="password" name="password" name="password" autocomplete="off" required placeholder="请填写用户密码"> <br> <!-- 3:单选框 type="radio" checked 表示默认选中 --> 性别: <input type="radio" name="gender" value="0" checked>男 <input type="radio" name="gender" value="1">女 <br> <!-- 4:复选框 type="checkbox" --> 爱好: <input type="checkbox" name="hobby" value="1">足球 <input type="checkbox" name="hobby" value="2" checked>游戏 <input type="checkbox" name="hobby" value="3">旅行 <input type="checkbox" name="hobby" value="4">购物 <br> <!-- 5:下拉列表框 selected 默认选中 --> 住址: <select name="address"> <option value="1">济南</option> <option value="2" selected>青岛</option> <option value="3">淄博</option> <option value="4">德州</option> <option value="5">潍坊</option> </select> <br> <!-- 6:邮箱地址 type="email" 此表单项会自动验证填入的是否是合法邮箱地址 注意并不能鉴别其真伪 --> 邮箱地址: <input type="email" name="email" required placeholder="请填写邮箱地址"> <br> <!-- 7:日期验证 type="date" 这里填写的内容格式都是 yyyy-MM-dd 用横线链接 --> 出生日期: <input type="date" name="birth"> <br> <!-- 8:提交按钮 value 就表示 按钮的名称 此按钮点击可以 提交整个表单,目的地就是action设置的地址 --> <input type="submit" value="注册"> <!-- 9:重置按钮 点击后清空所有填入的内容 --> <input type="reset" value="取消"> <!-- 10:普通按钮 必须搭配js使用单独使用没有任何效果 --> <input type="button" value="普通按钮"> -
表头设置：页面编码、视口、标题
<html lang="en"> <!-- head:头信息 用来设置网页的编码 引入外部资源 设置标题等 --> <head> <!-- 设置页面的编码 iso-8859-1 不支持中文 utf-8 互联网安全编码 支持中文 各种开发工具 os 系统等全部使用 此编码 gbk 国标码 支持中文 windows默认编码 textpad --> <meta charset="UTF-8"> <!-- 设置视口,打开的网页永远占满用户的屏幕 宽度等于用户设备的宽度 100%缩放 注意这里仅仅设置了宽度 而没有提示高度 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- title:设置网页的标题 --> <title>1:表单 锚 视图 列表</title> </head> -
关于本地超链接使用
<!-- 鼠标悬浮在某个元素上,则可以通过链接打开 官网 MDN --> <!-- a:锚元素 又被称之为超链接 其实是表单的一种简化方式,同样可以提交请求 只能使用get方式,只能通过浏览器地址栏传递值,没有表单项功能,锚元素自带样式 字体蓝色 自带下划线 访问过之后变为蕾贝卡紫 --> <a href="./success.html">五一节出游攻略</a> <a href="./success.html?key=value&key2=value2">我也是五一节出游攻略</a> <!-- target="_blank" 目标页和起始页共存 默认是 _self 目标页取代起始页 --> <a href="./success.html" target="_blank">我还是五一节出游攻略</a> -
正常放置图片与设置图片的超链接
<img src="./assets/picture.jpg" alt="引入失败" title="著名影片:共同警备区" width="200px"> <a href="./success.html"> <img src="./assets/picture.jpg" alt="引入失败" title="著名影片:共同警备区" width="200px"> </a> -
有序列表和无序列表
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ul> <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> </ol>
Css引入方式
-
内嵌式：直接将Css代码书写在 head 标签的 style 标签中，这种书写方式 初步的将结构和样式解耦,但是解耦不彻底 几乎没有复用性
h1{ font-family:'方正静蕾简体','xiquezhaopaiti','楷体'; /* 设置字体大小 google 浏览器最小可以设置的大小是 10px 但是一般 小于12px 一律按照12px显示 */ font-size:30px; /* 设置颜色 常用的方式存在以下三种 1:直接使用 颜色的专有名词 支持潘通(Pantone)流行色 red blue green coral 珊瑚橘 crimson 鲱鱼红 cornflowerblue 矢车菊蓝 2:使用 色号 #ffffff - #000000 #ff770f 爱马仕橙 #663399 蕾贝卡紫 勃艮第红 #81001e 克莱因蓝 #002ea6 蒂芙尼蓝 #82d8cf 3:使用三元色 rgb(r,g,b) r|g|b:0-255的整数 */ color:coral; /* 设置文字阴影 共四个参数 前两个表示阴影的偏移量 偏移量越大 阴影越明显 第三个参数表示阴影的模糊程度 数字越小阴影越锐 数字越大阴影羽化越严重 */ text-shadow: 10px 10px 5px silver; } div{ background-color: cornflowerblue; } -
外链式：使用外链式引入外部独立的 css 文件
<!-- B:使用外链式引入外部独立的 css 文件 rel="stylesheet" 表示引入的是样式表 href:引入的独立css文件的路径 --> <link rel="stylesheet" href="./styles/style.css">@charset "utf-8";/*默认utf-8*/ /* 渲染 段落元素 */ p{ /* 设置行高 */ line-height: 20px; /* 设置字体倾斜 */ font-style: italic; /* 给字体添加下划线 */ text-decoration: underline; } div{ background-color: deeppink; } -
行内式：直接将css代码书写在标签内,这种书写方式严重违背结构和样式解耦的原则,但是由于其优先级极高,因此使用依然较多
<a href="#" style="background-color: palevioletred; color:#f5f5f5;text-decoration: none;">点击下载 Cursor AI开发工具</a> -
优先级==> 行内式>外联式、内嵌式 谁放在后面就听谁的
Css基本、复合选择器
-
基本选择器：1、标记选择器 2、类别选择器 3、id选择器 4、属性选择器
tagName{} .class{} #id{} [属性="属性值"] /* input[type="text"]{} */ -
复合选择器：
-
交集选择器
tagName.class{} tagName#id{} -
并集选择器
sel1,sel2,sel3,selN{}/*用逗号隔开，复合一个便套用*/ -
后代选择器
sel1 sel2 sel3 selN{} /*根据左祖先右后代的层级关系,精确获取具有特定祖先的的最右侧元素*/ -
子辈选择器
sel1 > sel2{} /*只能选取子元素,而不能选取后续的元素*/ -
紧邻兄弟选择器
sel1 + sel2{} 三个条件缺一不可a:向下选取b:互为兄弟c:必须紧邻 -
兄弟选择器
sel1 ~ sel2{} 俩条件缺一不可a:向下选取b:互为兄弟 -
通配符选择器
*{} /*表示选择所有元素,注意此选择器优先级最低 比标记选择器优先级低*/
-
Css伪类选择器
-
伪类选择器:一般用来描述元素某一种或者多种状态下的样式
-
用来设置锚元素默认的样式,注意此伪类仅适用与 a 锚元素
a:link{} -
用来设置锚元素在访问之后的样式,注意此伪类仅适用与 a 锚元素
a:visited{} -
鼠标滑过时的样式,注意此伪类任意元素可用
a:hover{} -
鼠标点击元素左键还未松开时的样式,注意此伪类任意元素可用
a:active{}
-
Css页面元素类型
-
span：行内元素：行内元素会在一行内显示，不会强制换行，并且其宽度和高度由内容决定，不能通过 width 和 height 属性来直接设置。
-
div：块级元素：块级元素会独占一行，并且可以通过 width 和 height 属性来设置其宽度和高度。
span { background-color: pink; /* 设置宽度 */ width: 400px; /* 设置高度 */ height: 300px; /* 设置内部文本对齐方式,默认是左对齐,这里更改为居中对齐 */ text-align: center; } div { background-color: lightblue; /* 设置宽度 */ width: 400px; /* 设置高度 */ height: 300px; /* 设置内部文本对齐方式,默认是左对齐,这里更改为居中对齐 */ text-align: center; } /*---------分---------割---------线---------*/ <span style="display: block;"> 我是span我是span我是span我是span我是span我是span 我是span我是span我是span我是span我是span我是span 我是span我是span我是span我是span我是span我是span </span> <hr> <!-- style="display: inline;" 设置元素为行内元素 --> <div style="display: inline;"> 我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div </div> <!-- style="display: none;" 隐藏元素 --> <div style="display: none;"> 我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div </div>- display:none; 隐藏自己，隐藏后原位置不保留
- visibility:hidden; 隐藏自己，隐藏后原位置保留
- opacity:0; 隐藏自己，隐藏后原位置保留
- overflow:hidden; 溢出部分隐藏,原位置不保留的属性
Css盒子模型
-
14个元素：
-
margin:外边距 * 4、padding:内边距 * 4、border:边框 * 4、width 宽度、height 高度
margin-top:50px; margin-left:30px; margin-bottom:40px; margin-right:80px; 简化写法 margin:上 右 下 左; margin:上 右左 下; margin:上下 右左; margin:上右下左; margin:50px 80px 40px 30px;/*其他同理*/ -
重置css属性
/* 重置css 就是将一些默认值归零 设置一个空间位置默认都是0 因为一般默认是 有内外边距的值的 */ *{ margin:0; padding:0; } -
设置正文高度参照物
html,body{ /* 在google 浏览器中认为 html为正文,而火狐认为 body为正文,两者我们使用 并集 提高兼容性 */ height:100%; } -
整体居中的三种方式
-
使用像素
margin:0 auto; width:800px; height:900px; /*元素必须是块级元素，并且要有明确的宽度。因为只有知道元素的宽度，浏览器才能计算出左右两边剩余的空间*/ -
使用百分比
margin:0 auto; width:80%; height:100%; /*此单位永远与父元素进行比较，如果没有父元素，则与body比较也就是浏览器的，注意要设置高度的参照物 否则高度会失效*/ -
视口宽度
margin:0 auto; width:80vw; height:100vh;
-
box-sizing
-
盒子参数
-
默认：
box-sizing: content-box;此参数为默认,如果不写就是使用此规则
元素的实际宽度 = width + padding*2 + border*2
因此实际的宽度远远要大于width参数
-
box-sizing: border-box;实际宽度和高度就是 width 和 height
-
浮动与定位
浮动（float）是一种重要的 CSS 属性，它允许元素脱离正常的文档流，向左或向右移动，直到碰到包含它的元素或者另一个浮动元素为止。
float: left;从左往右排
浮动的方向只有左右，比较简单，那么定位则功能更为强大，可以将元素定位到页面中任意一个位置，定位分为以下四种
-
相对定位：元素根据其原先所在位置的左上角进行定位，定位之后不改变元素原来的类型,原来的位置依然被占用
.sub1{ border:solid 2px crimson; /* 设置相对定位 */ position: relative; /* 向下偏移 */ top:300px; /* 向右偏移 */ left:200px; } -
绝对定位：元素根据距离最近的定位过的祖先元素的左上角进行定位，定位之后元素漂浮在页面上,不再占满一行必须单独设置宽高,原来的位置
.sub2{ border:solid 2px coral; /* 设置绝对定位 */ position: absolute; top:400px; left:400px; } -
固定定位：其实就是绝对定位,但是永远根据 body 定位
position:fixed; -
静态定位：就是标准文本流
position:static;
私货时间
其实只是把一些用法再写一遍，加强记忆。
还有一些同样重要的知识没有在正课讲的部分（我们很多时候是边做题边讲新知识，所以有些重点知识不在大纲里面）。
超链接样式
a:link{
/* 链接字体颜色 */
color:#ff770f;
/* 链接阴影 */
text-shadow: 5px 5px 7px #2b2b2b;
}
/* 链接被访问过之后的样式 */
a:visited{
/* 访问过后的颜色 */
color:#663399;
}
/* 鼠标滑过链接的样式 */
a:hover{
/* 设置字体颜色 */
color:tomato;
/* 设置字体加粗 */
font-weight: 900;
}
/* 设置左键点击链接的样式 */
a:active{
/* 左键点击时的颜色 */
color:crimson;
}
设置正文格式
html,body{
/* 设置正文外边距为0 */
margin:0;
/* 设置正文内边距为0 */
padding:0;
/* 设置正文字体大小 */
font-size: 14px;
/* 设置正文字体 */
font-family: 'xiquezhaopaiti';
/* 设置高度百分比参照物 */
height:100%;
}
css重置（通配每个元素）
*{
/* 设置每个元素外边距归零 */
margin:0;
/* 设置每个元素内边距归零 */
padding:0;
/* 去掉每个元素的边框 */
border:none;
/* 设置元素计算方式 */
box-sizing: border-box;
/*重要！不配置这条会让本不该出现滚动条的页面出现滚动条*/
/* 去掉元素获取焦点时的边框 */
outline: none !important;
}
背景图片设置
/* 设置绝对定位 */
position: absolute;
/* 设置背景图 no-repeat 是指如果图片尺寸不合适不会重叠摆放 */
background: url("../assets/bg1.jpeg") no-repeat;
/* 设置背景图宽度和高度 */
background-size: 100vw 100vh;
/* 设置背景图固定在页面上不会随着缩放而改变 */
background-attachment: fixed;
/* 设置渐变色背景 */
background: linear-gradient(to right, #536976, #292e49);
弹性盒子
-
我们学习中，将设置为弹性盒子的容器，比作气球，先填充好固定了大小的容器，弹性容器就会根据他所在位置的空余空间大小进行“吹气”，直到填满所在空余部分
/* 开启弹性盒子 表格成为 item 项目 */ display: flex; /* 设置主轴居中 */ justify-content: center; /* 设置交叉轴 起始排列 是上中下 的 上 */ align-items: flex-start; -
flex-direction决定了 主轴的方向，也就是排列方向，默认为从左向右排一排flex-direction: row; /*从左向右*/ flex-direction: row-reverse; /*从右向左*/ flex-direction: column; /*从上向下*/ flex-direction: column-reverse; /*从下向上*/ -
flex:1;
其完整格式为：
flex:flex-grow flex-shrink flex-basis;flex-grow:默认是0 表示如果容器放大,则项目不随之放大,而如果更改为1 则容器放大项目随之放大 flex-shrin:默认是1 表示如果容器缩小,则项目随之缩小,不会溢出容器,而如果 更改为0 则容器缩小项目不变 有可能溢出容器 flex-basis:默认为 auto,用来设置项目的 width 宽度,注意一般在此设置这个参数 因为优先级较低
表格样式
/* 设置表格边框如果为多条,合并为一根 */
border-collapse: collapse;
td,th{
/* 设置单元格边框 */
border:solid 1px #ddd;
}
/*-----分-----割-----线-----*/
.tb{
/* 向下偏移 100像素 */
margin-top: 100px;
/* 设置表格宽度 */
width:80%;
/* 显示表格阴影 */
box-shadow: 5px 5px 6px silver;
/* 设置内部文本居中对齐 */
text-align: center;
/* 设置表头 */
thead{
background-color: coral;
color:#f5f5f5;
}
}
<table class="tb">
<!-- caption:设置表格标题 不是必须 -->
<caption>表格标题</caption>
<!-- thead:用来嵌套表头 一般是表格的第一行,多搭配css使用
单独使用没有任何效果 -->
<thead>
<tr>
<!-- th:效果等同 td,注意 内部文本居中加粗,
默认是不加粗 左对齐 -->
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
</thead>
<!-- tbody:嵌套表格主体 如果我们不写,则浏览器会给我们自动添加 -->
<tbody>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
</tbody>
</table>
圣杯布局的元素（这个居然也要我背啊啊啊）
-
header：页眉
<header class="header"> <h1 class="title"> <img src="./assets/etoak_logo.png" class="logo"> 圣杯布局第一版 </h1> <div class="info">欢迎您回来 XXX 先生|女士</div> </header> -
footer：页脚
<footer class="footer"> <!-- address:用来设置地址 字体会自动倾斜 --> <address>Copyright ©2008-2025 Etoak Corporation, All Rights Reserved.</address> </footer> -
section：中间主体
- aside：侧边栏
- main：主要内容页面
<section class="section"> <!-- aside:h5 布局标签 设置侧边栏 --> <aside class="aside"> <!-- 设置列表 --> <ul class="ul"> <li><a href="./14-表格.html" target="etoak">表格测试</a></li> <li><a href="#">侧边链接2</a></li> <li><a href="#">侧边链接3</a></li> <li><a href="#">侧边链接4</a></li> <li><a href="#">侧边链接5</a></li> </ul> </aside> <!-- main:h5 布局标签 设置主页 --> <main class="main"> <!-- iframe:引入一个外部独立的页面到本页面,使之成为一个页面 src:引入外部独立页面的路径 frameborder 边框粗细 默认为0 无边框 --> <iframe src="./15-dashboard.html" frameborder="0" style="width:100%;height:100%" name="etoak"></iframe> </main> </section>
文章页面
- 大多情况应该是让其他页面留出容器空间直接引入嵌套的。
<div class="dashboard-container">
<!-- article:用来嵌套一篇完整的文章 -->
<article>
<header>文章标题</header>
<p>文章主体</p>
<footer>文章页脚</footer>
</article>
</div>
浙公网安备 33010602011771号