前端速成之路——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>
前端速成之路——html、css的更多相关文章
- 前端学习之路之CSS （四）
Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型 概念:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际 ...
- 前端学习之路之CSS （三）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 创建CSS有三种方法:外部样式表.内部样式表.内联样式.优先级:内联样式>内部样式>外部样式表> ...
- 前端学习之路之CSS （二）
Infi-chu: http://www.cnblogs.com/Infi-chu/ id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 &quo ...
- 前端学习之路之CSS （一）
Infi-chu: http://www.cnblogs.com/Infi-chu/ 简介: CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HT ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- 我的web前端修炼之路从此开始
看过一篇文章,上面说过要想学习一门新技术,从什么时候开始都是不晚的.但对于一名大四的学生,只会一点简单的网页架构,只懂得HTML,CSS,JavaScript简单的一点皮毛,却怎么也说不过去.但也是这 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
- 【我的前端自学之路】【HTML5】.html和.htm的区别
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508171.html .htm 和 .html 的区别 .htm 和 ...
- 【前端模板之路】一、重构的兄弟说：我才不想看你的代码！把HTML给我交出来！
写在前面 随着前端领域的发展和社会化分工的需要,继前端攻城湿之后,又一重要岗位横空出世——重构攻城湿!所谓的重构攻城湿,他们的一大特点之一,就是精通CSS配置文件的编写...前端攻城湿跟重构攻城湿是一 ...
随机推荐
- Python基于自定义方法的排序
Python基于自定义方法的排序 在Python中,排序是一个常见的任务,它可以帮助我们根据特定的规则对数据结构(如列表)中的元素进行排序.Python的内置排序方法,如列表的sort()函数和内置函 ...
- Huggingface使用
目录 1. Transformer模型 1.1 核心组件 1.2 模型结构 1.3 Transformer 使用 1.3.1 使用 Hugging Face Transformers 库 1.3.2 ...
- Flink客户端操作
一.mysql数据准备 mysql -hip -uroot -p密码 CREATE DATABASE flink; USE flink; CREATE TABLE user ( id INTEGER ...
- vue集成amis
一.下载amis 方式一:git下载sdk.tar.gz,https://github.com/baidu/amis/releases 方式二:npm i amis 来下载,在 node_module ...
- 用virtual-manager安装虚拟机
使用virt-manager基本使用 启用机管理主窗口 硬件细节窗口 配置虚拟机启动选项 附加USB设备给虚拟机准备工作 USB重定向 虚拟机图形控制台 添加远程连接 显示虚拟机细节 性能监视 实验准 ...
- FANUC机器人M-410iB/700电机断轴维修方法
发那科(FANUC)作为电机领域的领袖品牌,其伺服电机广泛应用于各种工业设备中,特别是在机床.自动化控制.机器人等领域.然而,即使是如此高品质的伺服电机,也难免会出现FANUC工业机械手电机故障,其中 ...
- DeepSeek-R1的“思考”艺术，你真的了解吗？
大家好~,这里是AI粉嫩特攻队!今天咱们来聊聊一个有趣的话题--DeepSeek-R1到底什么时候会"思考",什么时候又会选择"偷懒"? 最近有朋友问我:&qu ...
- 八米云-N1、机顶盒设置静态地址和PPPOE拨号流程
疑难解答加微信机器人,给它发:进群,会拉你进入八米交流群 机器人微信号:bamibot 简洁版教程访问:https://bbs.8miyun.cn 这里以老毛子路由系统举例: 一.设置静态地址 1.路 ...
- Scala Set集合 元素唯一，无序
package com.wyh.day01 /** * Set集合 * 唯一,无序 * * Set中大部分方法与List一致,但是不可以进行排序 */ object ScalaSet { def ma ...
- php用token做登录认证
https://blog.csdn.net/qq_20869933/article/details/133201967 作用: PHP 使用token验证可有效的防止非法来源数据提交访问,增加数据操作 ...