学习前端相关
HTML常用标签
<strong>需要加粗的文字<strong>
<br>换行
<hr>分割线
<!-- 我是 HTML 注释 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签</p>
<em>倾斜标签</em>
<ins>下划线</ins>
<del>删除线</del>
<!-- <img src="图片的 URL" alt="图片无法加载的描述" title="图片的描述" width="宽度" height="高度"> -->
<img src="图片的 URL" alt="图片无法加载的描述" title="图片的描述" width="100" height="100" />
<!--<a href="https://www.baidu.com" target="属性设置为_blank新窗口打开">跳转到百度</a> -->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<!-- src= 音频的url,controls="控制台" loop="循环播放" autoplay = 自动播放 -->
<audio src="音频的 URL" controls="controls" loop="loop" autoplay></audio>
<!-- src= 视频的 URL,controls="控制台" loop="循环播放" autoplay = 自动播放 muted=静音播放 -->
<video src="视频的 URL" muted></video>
<ul>
<li>无序列表</li>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ol>
<li>有序列表</li>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<dl>
<dt>列表标题</dt>
<dd>列表描述 / 详情</dd>
</dl>
<!-- 跨行合并,保留最上单元格,添加属性 rowspan
跨列合并保留最左单元格,添加属性 colspan -->
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
<form action="提交地址" method="post">
<!-- 经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。 -->
<label for="用户名">用户名:</label>
<!-- placeholder="提示信息" checked="默认选中" disabled="禁用" readonly="只读" -->
<input type="text" id="用户名" name="用户名" placeholder="请输入用户名" /><br>
<label for="密码">密码:</label>
<input type="password" id="密码" name="密码" placeholder="请输入密码" /><br>
<label for="用户名">邮箱:</label>
<input type="email" id="邮箱" name="邮箱" placeholder="请输入邮箱" /><br>
<input type="radio" name="性别" id="1" checked="checked">男
<input type="radio" name="性别" id="0">女<br>
<input type="checkbox" name="爱好" id="1">篮球
<input type="checkbox" name="爱好" id="2">足球
<input type="checkbox" name="爱好" id="3">羽毛球<br>
<input type="file" name="文件" id=""><br>
<!-- 实际开发中,使用 CSS 设置 文本域的尺寸
实际开发中,一般禁用右下角的拖拽功能 -->
<textarea>默认提示文字</textarea>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<!-- 默认显示第一项,selected 属性实现默认选中功能。 -->
<option selected>武汉</option>
</select><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
<div>div 标签,独占一行</div>
<span>span 标签,不换行</span>
<!-- 布局标签 -->
<nav>导航标签</nav>
<footer>底部导航栏</footer>
<aside>侧边栏</aside>
<section>网页区块/内容</section>
<article>网页文章</article>
</form>
CSS
外部引入CSS文件/内部使用
<link rel="stylesheet" href="./my.css">
<style> </style>
css选择器
<style>
/* 标签选择器:使用标签名作为选择器 → 选中同名标签设置相同的样式。*/
p {
color: red;
}
/* 定义类选择器 */
/* <div class="red">这是 div 标签</div> */
.red {
color: red;
}
/* 定义 id 选择器 */
/* <div id="red">这是 div 标签</div> */
#red {
color: red;
}
/* 查找页面所有标签,设置相同样式。
通配符选择器: *,不需要调用,浏览器自动查找页面所有标签,设置相同的样式 */
* {
/* 通配符选择器可以用于**清除标签的默认样式**,例如:标签默认的外边距、内边距。 */
margin: 0;
padding: 0;
background-color: #3a3434;
width: 100%;
height: 100%;
}
/* 超链接伪类 */
/*
a标签在选中时生效
*/
a:hover {
color: green;
}
</style>
css文字可用属性格式
文字尺寸 | font-size: 30px; | PC 端网页最常用的单位 px |
文字默认的效果 | font-style:normal; | normal无效果italic倾斜 |
文字行高 | line-height: 30px; | PC 端网页最常用的单位 px |
背景色 | background-color: skyblue; | #3a3434 |
文本缩进 | text-indent: 2em; | 1em = 当前标签的字号大小 |
控制内容水平对齐方式 | text-align: center; | center居中对齐,left左对齐,right右对齐 |
文本修饰线 | text-decoration:none; | none无修饰线,underline下划线,line-through删除线 |
宽度 | width: 100%; | px或者百分号 |
高度 | height: 100%; | px或者百分号 |
css背景可用格式
背景图 | background-image: url(./images/1.png); | 路径 |
背景色 | background-color: #3a3434; | #3a3434 |
背景图片的重复方式 | background-repeat: no-repeat; | repeat=不重复,repeat-x 水平方向不重复,repeat-y 垂直方向不重复,repeat 重复 |
背景图位置 | background-position: center bottom; | 单词,px |
背景图缩放 | background-size: cover; | cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见,contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白 |
背景图固定 | background-attachment: fixed; |
设置浮动
设置浮动 | display:block | block块级沾满一行,inline-block行内块模式 |
块级元素
特点:
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素
特点:
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素
特点:
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
盒子模型
盒子模型-组成
- 内容区域 – width & height
- 内边距 – padding(出现在内容与盒子边缘之间)
- 边框线 – border
- 外边距 – margin(出现在盒子外面)
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
边框线
四个方向
属性名:border(bd)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
单方向边框线
属性名:border-方位名词(bd+方位名词首字母,例如,bdl)
属性值:边框线粗细 线条样式 颜色(不区分顺序)
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
内边距
作用:设置 内容 与 盒子边缘 之间的距离。
- 属性名:padding / padding-方位名词
div {
/* 四个方向 内边距相同 */
padding: 30px;
/* 单独设置一个方向内边距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
提示:添加 padding 会撑大盒子。
- padding 多值写法
技巧:从上开始顺时针赋值,当前方向没有数值则与对面取值相同。
标准流,浮动,Flex布局
使用浮动布局
<style>
#d1{
background-color: #c64646;
width: 200px;
height: 200px;
float: left;
}
#d2{
background-color: antiquewhite;
width: 200px;
height: 200px;
float: left;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
浮动后的盒子会脱离标准流,要么一起浮动,要么都别浮动,不然会盒子覆盖
浮动设置后盒子有顶对齐,脱标,具备行内块的特点,也可以使用display: inline-block达到同样效果
浮动带来的错乱问题与解决方法
<style>
*{
margin: 0;
padding: 0;
}
.top{
/* height: 300px; */
width: 1200px;
margin: 10px auto;
background-color: aqua;
}
.bottom{
height: 100px;
background-color: rgb(243, 40, 5);
}
.left{
float: left;
width: 300px;
height: 300px;
background-color: #080707;
}
.right{
float: right;
width: 900px;
height: 300px;
background-color: rgb(3, 10, 225);
}
/* .fix{
clear: both;
} */
.clearfix::before,
.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
</style>
<body>
<!-- 因为top没有设置高度,两个子集虽然有设置了高度。
但是子集(left,right)使用了浮动,在浏览器中,已经脱标了。
所以子集无法撑开父级(top)
导致了bottom与left,right在同一行显示
解决方式有四种
1.在后面加个空标签,给属性clear: both;(不常用)
2.使用双位元素法在父级上加伪标签.clearfix::before,.clearfix::after
-->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<div class="fix"></div>
</div>
<div class="bottom"></div>
</body>
flex布局
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 10px auto;
width: 400px;
display: flex;
justify-content: space-between;
height: 300px;
border: 1px solid #000;
}
.dd{
/* float: left; */
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
<body>
<div class="box">
<div class="dd">1</div>
<div class="dd">2</div>
<div class="dd">3</div>
</div>
</body>
dd是div标签,块级,会占用一行,如果想要让三个div左对齐占在同一行,原本使用方式可以用float: left;但是如果父级没有高度,会出现脱标情况
如果使用flex布局display: flex;justify-content: space-between;,此时子集能够撑开父级,不会产生脱标情况。
flex组成部分
设置方式:父元素设置为 display: flex;如果父级的宽度或者高度不够子集显示,子集也会自动的挤压与拉伸,不会被挤下去
- 弹性容器
- 弹性盒子
- 主轴:默认是水平方向(后续可以通过CSS更改方向)
- 侧轴/交叉轴:默认在垂直方向
创建flex容器 | display: flex; | |
主轴对其方式 | justify-content: space-between; | flex-start左对齐,flex-end右对齐,center居中对齐,space-between左右无边距中间留空,space-around侧面相等,space-evenly所有距离都相等 |
侧轴对其方式 | align-items: center; | stretch拉伸,center居中对齐 |
某个弹性盒子侧轴对其方式 | ||
修改主轴方向 | ||
弹性伸缩比 | ||
弹性盒子换行 | ||
行对齐方式 |
主轴对其方式
/* 左对齐 */
/* justify-content: flex-start; */
/* 右对齐 */
/* justify-content: flex-end; */
/* 水平居中 */
/* justify-content: center; */
/* 两侧对齐父级剩余的空间均分间距,间距相等 */
/* justify-content: space-between; */
/* 间距出现在弹性盒子的两侧 */
/* 视觉效果:弹性盒子与盒子之间的距离是两侧距离的两倍 */
/* justify-content: space-around; */
/* 间距出现在弹性盒子的两侧,且盒子之间的距离相等 */
/* 视觉效果:弹性盒子与盒子之间的距离与边距离相等 */
/* justify-content: space-evenly; */
设置侧轴对齐方式
/* 设置侧轴对齐方式 */
/* 默认,如果盒子没有设置高度,默认拉伸到容器高度
如果盒子设置了高度,就按照盒子设置的高度来显示不变
*/
/* align-items: stretch; */
/* 垂直居中对齐,如果盒子没有设置高度,且没有内容填充。则盒子没有高度。
如果盒子设置了高度,则垂直两侧的距离是高度剩下的距离
*/
/* align-items: center; */
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步