本文介绍了前端开发的基础知识，包括HTML标签的使用，如h、p、img、a标签，form表单的创建，CSS选择器、属性及布局，以及JavaScript的三大组件。详细讲解了网页布局方式、定位策略及CSS的文本、背景、盒子模型等关键概念。
这里写目录标题
一.html标签
1，默写html文档结构以及head标签内相关子标签
html文档结构
<!DOCTYPE HTML>
<HTML>
<head>...</head>
<body>...</body>
</html>
需要掌握的标签
<html>
<head>
<title></title>
<link rel="icon" href="xxxx.ico">
<meta charset="utf-8">
<meta name="keywords" content="xxx">
<meta name="description" content="xxxxxx">
<meta http-equiv="refresh" content="3,url地址">
<style>
/*注释*/
</style>
<script type="tex/javascript">
//注释
</script>
<link rel="stylesheet" href="/assets/css/view-e2a07f0c.css" type="text/css">
<script src="/assets/js/util-e2a07f0c.js" charset="UTF-8" type="text/javascript"></script>
</head>
<body>
<!--内容-->
<img src="" title="" alt="" width="20px">
<a href="" title=""><img src=""></a>
<a href="#id号"></a>
<a href="#"></a>
<a href="javascript:"></a>
<a href="https://www.baidu.com/s?wd=%E7%BE%8E%E7%94%B7">美男子</a>
</body>
</html>
head标签内相关子标签
'''----------meta相关-----------'''
#1.指定字符集
<meta charset='gbk'>
#2.页面描述
<meta name='Description' content='具体描述...'>
#3.关键字:有助于搜索引擎SEC优化,再怎么优化也抵不过竞价排名
<meta name='keyword' content='网易,邮箱,游戏,新闻'>
#4.3秒后跳转
<meta http-equiv='refresh' content='3,http://www.baidu.com'>
#5.三秒刷新
<meta http-equiv='refresh' content='3'>
'''--------非meta相关---------'''
#1.标题
<title>百度一下,你就知道</title>
#2.网站的图标
<link rel='icon' href="https://www.baidu.com/favicon.ico">
#3.定义内部样式
<style></style>
#4.引入外部样式文件
<link rel='stylesheet' href='mystyle.css'>
#5.定义JavaScript代码或引入JavaScript文件
<script src='hello.js'></script>
2，代码演示h，p，img，a 标签用法
h标签
<!DOCTYPE HTML>
<html>
<head lang='en>
<meta charset='utf-8'>
<title>Egon才华无敌</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>没有七级标题</h7>
没有七级标题
</body>
</html>
p标签
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon无敌</title>
</head>
<body>
<h1>Egon</h1>
<p>论颜值，鹤立鸡群</p>
<p>论才华，天下无敌</p>
</body>
</html>
img标签
#1、用法
<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
a标签
#1、跳到首页
<a href="">刷新页面，回到顶部，人类感觉不出来区别</a>
<a href="#">回到顶部</a>
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>
二.form表单
1.用form表单编写注册页面
注册内容有：用户名 密码 性别 爱好 籍贯 头像. 点击提交按钮将数据以post的方式提交给指定的url地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080/" method="post" enctype="multipart/form-data">
<p>
<label for="inp1">用户名：</label>
<input id="inp1" type="text" name="username" placeholder="请输入用户名">
</p>
<p>
<label for="inp2">密码：</label>
<input id="inp2" type="password" name="password" placeholder="请输入密码">
</p>
<p>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<input type="radio" name="gender" value="null">保密
</p>
<p>
<input type="checkbox" name="hobbies" value="打篮球">打篮球
<input type="checkbox" name="hobbies" value="female" checked value="踢足球">踢足球
<input type="checkbox" name="hobbies" value="null" value="羽毛球" checked>羽毛球
</p>
<p>
<input type="text" disabled name="k" value="1111">
</p>
<p>
<textarea name="comment" id="" cols="30" rows="30" style="resize: none">
这是评论信息
</textarea>
</p>
<p>
<select name="籍贯" size="2" >
<option value="北京111" >北京</option>
<option value="上海222">上海</option>
<option value="深圳333" selected>深圳</option>
</select>
</p>
<p>
<select name="籍贯" >
<optgroup label="一线城市">
<option value="北京111" >北京</option>
<option value="上海222">上海</option>
<option value="深圳333" selected>深圳</option>
</optgroup>
<optgroup label="二线城市">
<option value="杭州">杭州</option>
<option value="烟台">烟台</option>
<option value="德州" selected>德州</option>
</optgroup>
</select>
</p>
<p>
<input type="file" name="uploadfile">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
</body>
</html>
三.css选择器
1.各种选择器的作用
(1)基本选择器
id选择器:根据指定的id名称,在当前界面中找到对应的唯一一个标签,然后设置属性
类选择器:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性
标签选择器:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
通配符选择器:选择所有标签
(2)组合选择器
后代选择器:找到指定标签的所有后代(二字,孙子,重孙子...)标签,设置属性
子元素选择器:找到制定标签的所有特定的直接子元素,然后设置属性
毗邻选择器:选定紧跟其后的那个标签
弟弟选择器:给指定选择器后面的所有选择器中的所有标签设置属性
(3)交集选择器与并集选择器
交集选择器:给所有选择器选中的标签中,相交的那部分标签设置属性
并集选择器:给所有满足条件的标签设置属性
(4)序列选择器
作用:css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个
#4.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
#4.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#4.3 其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
(5)属性选择器
#1.作用:根据指定的属性名称找到对应的标签,然后设置属性
该选择器,最常用于input标签
#2.格式与具体用法:
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
(6)伪类选择器
#1.作用:常用的几种伪类选择器
1.1 没有访问的超链接a标签样式:
a:link {
color:blue;
}
1.2 访问过的超链接a标签样式:
a:visited {
color:gray;
}
1.3 鼠标悬浮在元素上应用样式:
a:hover {
background-color:#eee;
}
1.4 鼠标点击瞬间的样式:
a:active {
color:green;
}
1.5 input 输入框获取焦点时样式:
input:focus {
outline:none;
background-color:#eee;
}
(7)伪元素选择器
#1.常用的伪元素
1.1 first-letter:杂志类文章首字母样式调整
例如:
p:first-letter {
font-size:48px;
}
1.2 before
用于在元素的内容前面插入新内容
例如:
p:before {
content:"*";
color:red;
}
在所有的p标签的内容前面加上一个红色的*
1.3 after
用于在元素的内容后面插入新内容
例如:
p:after {
content:"?";
color:red;
}
在所有p标签的内容后面加上一个红色的?
2.简述css三大特性
1.继承性
给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性
2.层叠性
css全称层叠样式表,层叠性指的就是css处理冲突的一种能力,即如果有多个选择器选中了同一个标签那么会有覆盖效果
3.优先级
当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定
3.css的四种引入方式
# 1.行内式(不推荐)
<p style="color: red;font-size: 50px">你好呀</p>
# 2.嵌入式
<head>
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
# 3.导入式
<head>
<style>
/*形式一: */
/*@import "css/mystyle.css";*/
/*形式二: */
@import url("css/mystyle.css");
</style>
</head>
# 4.外链式(企业开发中使用这种方式,推荐使用)
<head>
<link rel="stylesheet" href="css/mystyle.css">
</head>
四.css属性
1.默写常用文本属性
text-align 文字对齐
left
right
center
justify 两端对齐
text-decoration 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线
none
underline
overline
line-through
inherit 继承父元素的属性值
text-indent 首行缩进
line-height 行高
2.默写常用文字属性
font-family 文字字体
font-size 字体大小
font-weight 文字粗细
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100-900 设置具体粗细,400=normal,700=bold
inherit 继承父类元素字体的粗细值
font-style 文字风格
normal 正常
italic 倾斜
color 文本颜色
1.直接写颜色英文blue,red...
2.写颜色的编号#4e4e4e
3.写颜色的三基色 rgb(128,128,128) # 范围0-255
4.可以给颜色加透明度ragb(128,128,128,0.5) # 范围0-1
PS:可以用pycharm,微信qq截图等快速获取想要的颜色
3. 默写背景属性
background-color 背景色
red;
rgb(0,255,0);
rgba(0,255,0,0.1); 只能给背景设置透明度
#00ffff;
PS:opacity:0.1 改变整个标签的透明度
background-image 设置标签的背景图片
background-size 设置标签的背景图片的宽,高
background-repeat 设置标签的背景图片的平铺方式
repeat;
no-repeat;
repeat-x;
repeat-y;
background-attachment 设置标签的背景图片在标签中固定或随着页面滚动而滚动
scroll; 默认值,会随着滚动条滚动而滚动
fixed; 不会随着滚动条滚动而滚动
background-position 控制背景图片的位置,默认在盒子左上角
水平:left,center,right
垂直:top,center,bottom
inherit 设置从父元素继承background属性值
# 背景图片缩写
body{
background:red url(xxx.png) no-repeat fixed center/300px 300px;
PS:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
在调样式的时候,可以借助浏览器快速的微调,然后将调整好的参数修改到css样式中
4. 默写盒子模型：外面距 边框，内边距的用法
margin:外边距
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
padding:内边距
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
'''
PS:
margin:0 auto; 可以让盒子自己相对于父元素水平居中
text-align:center; 只能让盒子中存储的文字,图片水平居中
# border
border-width:上 右 下 左
border-style:上 右 下 左
none
dotted
dashed
solid
border-color:上 右 下 左
# 简写
border:宽度 样式 颜色;
# 画圆
border-radius:50%
五.css布局及js三大组件
1.默写网页布局的三种方式及应用场景；
标准流:
浮动流
定位流
2.默写清除浮动的方式；
.clearfix {
*zoom:1
}
.clearfix:before,.clearfix:after {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
3.默写防止marjln-top父级塌陷的解决方案
.父级标签:before {
content: "";
display: table;
}
4.默写绝对定位 相对定位 固定定位的特点与区别
相对定位就是相对于自己以前在标准流中的位置来移动
特点:
#1 在相对定位中同一个方向上的定位属性只能使用一个
top/bottom 只能用一个
left/right 只能用一个
#2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
#3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的
#4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding
等属性时会影响到标准流的布局.
绝对定位:相对于body或者某个定位流中的祖先元素来定位
特点:
#1.绝对定位的元素不区分块级元素/行内元素/行内块级元素
#2.绝对定位相对于body定位是以首屏为准
#3.一个绝对定位的元素会忽略祖先元素的padding
固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）
背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动
而固定定位可以让某一个元素不随着滚动条的滚动而滚动
5.想要把一个元素定位到浏览器窗口的右下角 应该采用什么解决方案
position:fixed;
right:0;
bottom:0;
6.js的三大组成部分及作用
ES语法:js的语法标准,包括变量,表达式,运算符,函数,if语句,for语句等
DOM文档对象模型:操作网页上的元素的API.比如让盒子移动,变色,轮播图等
BOM浏览器对象模型:操作浏览器部分功能的API.比如让浏览器自动滚动
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
