前端相关学习
一、常用标签
本章主要讲三种常见的块标签和三种常见的内联标签
块标签:独占一行
内联标签:一行可以有多个标签
<!DOCTYPE html> <!--!+tab生成快捷键 新的页面直接!+tab-->
<html lang="en"> <!--统计使用,一般我们不关心-->
<head><!--1.引入外部资源2.当前页面的设置-->
<meta charset="utf-8">
<!-- 视口,和手机转换 -->
<meta name="viewport" content="width=divice-width,initial-sacle=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 在标签里面,除了标签名外,就是属性 -->
<title>课程01</title>
</head>
<body>
<!-- 常用的块标签 块标签独占一行,如果不是独占一行,就是内联标签-->
<h1>第一个块标签 :标题标签</h1>
<p>
hello,第二个块标签 段落标签,不能嵌套div标签<br>
<!-- 大于号 小于号 空格 -->
<p>
</p>
<div>第三个块标签:div标签 也是容器,可以使文字也可以是其他标签</div>
<!-- 常用的内联标签 内联标签一行有多个内容-->
<!-- target 空白页打开链接 -->
<a href="https://www.baidu.com" target="__blank">百度</a>
<a href="./test01.html" target="__blank">跳转文件</a>
<!-- 返回页面顶部 -->
<a href="#">top</a>
<!-- 跳转到想跳转的地方 #box id属性 -->
<a href="#box">zeze</a>
<!-- 图片链接可以是本地也可以是网络地址 alt属性:1.图片找不到时提示信息2.搜索引擎根据alt属性值来收录图片3.制作无障碍页面,方便盲人的读屏软件读取-->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb7f61f10f35dba9348480e8525ad7123e58898e745fa-airRW4_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652602149&t=602a427cf8152d65daa4446496340f3a" alt="">
<!-- a标签是成对标签,img标签是单标签 a标签可以包含img标签 -->
<a href="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb7f61f10f35dba9348480e8525ad7123e58898e745fa-airRW4_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652602149&t=602a427cf8152d65daa4446496340f3a" alt="">
</a>
<!-- span标签一般和p标签搭配使用 -->
<p>这是一个段落文字,段落文字中有<span>特殊字符或者标志</span>,可以用span标签进行强调</p>
<!-- 其他标签 -->
<!-- 删除 -->
<del>10000</del>
<!-- 斜 -->
<em>10000</em>
<!-- 下划线 -->
<ins>1093</ins>
<!-- 加粗 -->
<strong>192dhue</strong>
</body>
</html>
二、聚焦
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
padding: 0px;
margin: 0px;
}
.div1 {
width: 200px;
height: 50px;
font-size: 16px;
font-family:yahei;
color: blue;
line-height: 20px;
}
<!--鼠标悬停在上面才会显示下面效果-->
.div2:hover{
color: brown;
background-color: chartreuse;
line-height: 20px;
font-size: 16px;
/* <!--鼠标变成小手--> */
cursor: pointer;
}
/* input:focus 表示只对聚焦生效,失焦不生效*/
input:focus{
color: red;
/* 边框宽度 虚实线 颜色 */
/* 虚实线包括 solid 实线 dashed 虚线 dotted 电线*/
border: 5px solid blue;
/* 去除边框原有的颜色 */
outline: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">列表内容1</a></li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
</ul>
<div class="div1" id="box1">这里是div1的内容</div>
<div class="div2">这里是div2的内容</div>
<input type="text">
</body>
</html>
三.边框
<!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>
<style>
.box {
width: 300px;
height: 200px;
background: blue;
padding-left: 30px; /* 盒子外面的需要对内边距尽心操作 */
/* padding: 20px 30px 40px 50px 按照顺时针,上右下左,值没有时,和对面值一致 */
background-image: url('./1.jpg'); /* 设置背景图片 */
background-repeat: no-repeat; /* 背景图片是否重复,当图片本身不足以完全覆盖盒子大小时 x轴平铺:repeat-x y轴平铺:repeat-y repeat 不重复:no-repeat */
}
.son {
margin-left: 30px; /* 盒子里面需要对外边距进行操作 */
width: 100px;
height: 100px;
background: pink;
}
.auth1 {
width: 200px;
height: 200px;
background: orchid;
margin: 10px auto; /* 只有水平居中,没有竖直居中,竖直居中需要自己算 */
}
</style>
</head>
<body>
<!-- <div class="box">
<div class="son"></div>
</div> -->
<div class="auth1"></div>
</body>
</html>
习题
<!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>
<style>
div h3 {
font-size: 16px;
font-family: '雅黑';
color: #172c45;
float: left;
margin: 0%;
line-height: 40px;
}
div a {
font-size: 12px;
font-family: '雅黑';
color: #172c45;
text-decoration: none;
float: right;
line-height: 40px;
}
.box div {
width: 285px;
height: 40px;
}
img {
height: 80px;
width: 285px;
}
p {
font-family: '雅黑';
font-size: 12px;
color: #737373;
line-height: 20px;
height: 190px;
width: 285px;
}
.box {
border-top: 1px solid #c8dcf2;
border-bottom: 1px solid #c8dcf2;
width: 285px;
}
</style>
</head>
<body>
<div class="box">
<div id="xsss">
<h3>今日头条</h3>
<a href="#" id="wwww">更多>></a>
</div>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic15.nipic.com%2F20110715%2F7170514_171643005000_2.jpg&refer=http%3A%2F%2Fpic15.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652604228&t=99c8d2bcafca1e27e22e03894cc1fc27" alt="">
<p>
标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，标签的嵌套产生叠加效果。</p>
</div>
</body>
</html>
四.表单
<!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>
<!-- action 是表单提交地址 method提交方法,默认是get-->
<form action="http://www.baidu.com" method="POST">
<p> <!-- 姓名和输入框在一行,需要用块标签扩起来,而div标签不自带样式,p标签自带样式 -->
<label for="">姓名:</label>
<!-- 提交给后台时,需要有key,value值,输入内容是value,需要提供key,而非输入的key,value都需要,即name,value -->
<!-- placeholder 占位符 -->
<input type="text" name="username" placeholder="请输入用户名">
</p>
<p>
<!-- for 为input提供聚焦 需要在input标签加id属性 -->
<label for="box">密码:</label>
<input id="box" type="password" name="ppwd"> <!-- 密码隐藏 -->
</p>
<p>
<label for="">性别:</label>
<!-- 单选框,需要加name属性,进行关联,否则就两个都可以选 -->
<!-- value值可以和后台商量好,传啥代表啥 -->
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="1">女
</p>
<p>
<label for="">爱好:</label>
<input type="checkbox" name="hobby" value="0">唱歌
<input type="checkbox" name="hobby" value="1">跑步
<input type="checkbox" name="hobby" value="2">游泳
</p>
<p>
<label for="">照片:</label>
<input type="file" name="photo">
</p>
<p>
<label for="">个人描述</label>
<!-- 多行文本输入框 -->
<textarea name="person"></textarea>
</p>
<p>
<label for="">籍贯:</label>
<!-- select 下拉框一般和option搭配使用 -->
<select name="dizhi">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
</select>
</p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
五.表格
<!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>
<style>
table {
/* 边线是否重合 */
border-collapse: collapse;
/* 文字是否居中显示 right left */
text-align: center;
}
p {
/* 首行缩进,字体默认16px */
text-indent: 32px;
}
</style>
</head>
<body>
<!-- border 0:没有边框 1:有边框 -->
<table border="1">
<tr>
<!-- tr行,td列,th标题 -->
<th>班级</th>
<th>学号</th>
<th>分数</th>
</tr>
<tr>
<!-- rowspan 行合并 colspan 列合并 -->
<td colspan="2">1234</td> <!-- 第二行的第一列和第二列合并 -->
<!-- <td>1234</td> -->
<td rowspan="2">1234</td> <!-- 第三列的第二行和第三行合并 -->
</tr>
<tr>
<td>1234</td>
<td>1234</td>
<!-- <td>1234</td> -->
</tr>
</table>
<p>啊哈哈哈哈哈哈哈哈</p>
</body>
</html>
六.列表
<!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>
<style>
li {
list-style: none; /* 去掉列表样式 */
}
</style>
</head>
<body>
<!-- ul>li{标题}*3 无序列表-->
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!-- 有序列表 ol>li{标题}*3-->
<ol>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
.box>.box1+.box2
<!-- #box>div.box1+ul#navigation>li*5>a{item $} -->
<div id="box">
<div class="box1"></div>
<ul id="navigation">
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
<li><a href="">item 3</a></li>
<li><a href="">item 4</a></li>
<li><a href="">item 5</a></li>
</ul>
</div>
<!-- a[href]{haha $} -->
<a href="">haha 1</a>
<!-- .box>.box1+.box2 -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
七.溢出
<!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>
<style>
div {
width: 100px;
height: 100px;
background-color: gray;
overflow: auto; /* 元素溢出 hidden:隐藏即多出的部分不见了 scroll:滚动条 auto:自动,根据容器大小自动添加滚动条 这个用的比较多*/
}
</style>
</head>
<body>
<div>
ucrucbrcbwinhcxhdbhebchbdehcbic能吃二班车被合并持耳鼻喉我恨不得好的吧吃瘪2万河北村必然会icbinri911
</div>
</body>
</html>
八.定位
<!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>
<style>
.box {
width: 200px;
height: 300px;
background-color: indigo;
margin-top: 200px;
/* 子决父相:即如果子元素是绝对定位,而父元素就必须也要进行定位,否则子元素的位置就会相对浏览器位置进行变动 */
/* position: relative; */
}
.box1,.box2,.box3 {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
}
.box2 {
background-color:orange;
/* 相对定位 1.占有原来的位置,下面的元素上不来 2.相对于原来的位置来定位*/
/* position: relative;
left: 20px;
top: 20px; */
/* 绝对定位:1.不沾有原来的位置;2.相对于浏览器进行定位,如果父母有定位信息,听父母的 */
position: absolute;
left: 20px;
top: 20px;
/* 固定定位:1.不占有原来的位置,浮起来了 2.相对于浏览器进行定位,不论父母有没有位置信息,都根据浏览器进行定位 */
}
.box3 {
background-color:blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
相对定位图:
绝对定位示意图
理解
相对定位: 1.占有原来的位置 2.相对于原来的位置来定位
绝对定位: 1.不沾有原来的位置;2.相对于浏览器进行定位,如果父母有定位信息,听父母的
固定定位: 1.不占有原来的位置,浮起来了 2.相对于浏览器进行定位,不论父母有没有位置信息,都根据浏览器进行定位
元素层级
<!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>
<style>
.box {
width: 300px;
height: 300px;
background-color: cornflowerblue;
}
.box1,.box2,.box3 {
width: 100px;
height: 100px;
}
.box1 {
position: absolute;
background-color: cyan;
}
.box2 {
position: absolute;
background-color: darkkhaki;
z-index: 1; /* 绝对定位元素是浮动起来的,如果多个同时定位,则会脱离,最终会以标签顺序来显示,但想要自定义的话,可以通过z-index确定顺序,默认0,越大则会漂浮到最上方 */
}
.box3 {
position: absolute;
background-color: darksalmon;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
练习
<!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>
<style>
.colo {
width: 100%;
height: 100%;
/* background-color: #888; #fff:纯白 #000:纯黑 中间的三个一样的就是灰色 */
background-color: rgba(177, 177,177, 0.4); /* 需要设置透明度,不然的话,h1的文字内容无法显示 */
/* 不写position的话,还是看不到颜色,需要试其浮起来 */
position: absolute;
/* 需要设置和浏览器的边距 */
top: 0px;
}
.box {
height: 300px;
width: 300px;
border: 1px solid black;
position: relative;
left: 500px;
}
h3 {
background-color: blue;
margin: 0;
}
</style>
</head>
<body>
<h1>网页内容</h1>
<div class="colo"></div>
<div class="box">
<h3>弹窗标题</h3>
<p>详细的文字内容</p>
</div>
</body>
</html>
九.页面嵌套
<!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>
<style>
iframe {
width: 800px;
height: 300px;
}
</style>
</head>
<body>
<!-- frameborder 是否设置边框,1设置,0不设置 iframe一般和a标签搭配使用,不过a标签的target属性值需要和iframe的name属性值一致-->
hahha
<a target="name" href="http://www.taobao.com">跳转到淘宝</a>
<a target="name" href="./10-元素层级.html">跳转到文件</a>
<iframe name="name" src="https://www.baidu.com/" frameborder="1"></iframe>
</body>
</html>
效果图
十.CSS权重
内联 1000
id选择器 100
class 10
标签 1
当有冲突时,谁的权重值高就跟随谁
扫一扫
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
