本文主要是介绍软测基础之前端基础,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
目录
一、HTML
1、HTML基础标签
1.1 head 标签
1.2 body 标签
2、图片标签
3、超链接
3.1 锚点链接
4、表格
5、列表
6、表单
① input表单
②textarea 标签表单 — — 多行文本框
③ 下列列表
7、插入音频、视频、flash
8、插入背景音乐
9、悬浮框架 iframe
10、HTML5 新标签
二、CSS
1、CSS基础语法
2、CSS三种引用方法
3、CSS选择器
3.1 标签选择器
3.2 类选择器(.class)
3.3 ID选择器(#ID)
3.4 后代选择器(用空格连接)
3.5 并集(并列选择器)(用逗号连接)
4、高级权重对比
4.1 引入方式不同
4.2 复合选择器权重
5、CSS常用的文字属性
6、行高属性
7、边框属性
8、盒子模型
三、JavaScript
1、JS三种引用方式
2、JS基础语法
2.1 JS注释
2.2 js变量
2.3 js 基本数据类型
2.4 js运算符
2.5 js 选择语句
2.6 js 循环语句
foreach 语法:
2.7 js 函数
2.8 js 的 break 函数和 continue 函数
一、web基本介绍
web就是world wide web 的缩写,俗称全球广域网,即WWW(万维网)
1.网页
1.1什么是网页?什么是HTML?
网页是构成网站的基本元素,网页由图片、文字、视频、声音等元素组成,是HTML文件(后缀名为html)。
HTML是用来描述网页的一种语言,不是编程语言,是一种超文本标记语言(Hyper Text Markup Language)
网页生成制作:前端人员书写HTML文件,然后浏览器打开,就能看到网页了。
2.浏览器
常用浏览器:五大浏览器:IE、火狐、谷歌、Safari、Opera等
浏览器内核:负责读取网页内容,整理讯息,计算网页的显示方式并显示页面,国内一般浏览器都会采用webkit/Blink内核,如360、UC、QQ、搜狗等
3.Web标准(重点)
主要包括结构、表现、行为。
Web标准提出的最佳体验方案:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。
二、HTML
1、HTML基础标签
1.1 head 标签
- title(标题)
- meta(网页基本信息(供搜索引擎))
- style(CSS样式)
- link(链接CSS文件或脚本文件)
- script(定义脚本语言)
- base(定义页面所有链接的基础定位)
1.2 body 标签
(1)段落文字标签
- <h1> ~ <h6> 标题
- <p> 段落
- <br> 换行
- <hr> 水平线
- <div> 分割(块元素)
- <span> 区域(行内元素)
(2)文本格式化标签
- <strong> 加粗
- <em> 倾斜
- <del> 删除线
- <ins> 下划线
- <sup> 上标
- <sub> 下标
- " " 空格
2、图片标签
<img src="图片地址" alt="图片不能显示时出现的文字" title="鼠标放在图像上显示的内容" width="宽度" height="高度" border="图片边框粗细">
属性间用空格分开
3、超链接
<a href="指定链接目标的URL地址" target="打开窗口的方式">文本或图像</a>
- target="_blank" 新窗口打开
- target="_self" 当前窗口打开
3.1 锚点链接
4、表格
- <table> 表格
- <tr> 行
- <td> 单元格
- <caption> 标题
- <thead> 表头
- <th> 表头单元格
- <tbody> 表身
- <tfoot> 表脚
- 合并行 <td rowspan="跨度的行数">
- 合并列 <td colspan="跨度的列数">
5、列表
- <ol> 有序列表
- <ul> 无序列表
- <dl> 定义列表
语法:
<!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>列表练习</title>
</head>
<body><!-- 有序列表 --><ol><li>兴趣是最好的老师,其次是耻辱。</li><li>好听的话不该记着,也不该当真。</li></ol><!-- 无序列表 --><!-- disc(实心圆);circle(空心圆);square(实心正方形) --><ul type="disc"><li>兴趣是最好的老师,其次是耻辱。</li><li>好听的话不该记着,也不该当真。</li></ul><!-- 定义列表 --><dl><dt>杨绛先生</dt><dd>你的问题主要在于读书太少而想的太多。</dd><dd>故人笑比中庭树,一日秋风一日疏。</dd></dl>
</body>
</html>
页面效果
6、表单
① input表单
<input type="表单类型">
type 属性值 :
- text(单行文本框)
- passward(密码文本框)
- button(按钮)或者<button>按钮</button>
- submit(提交按钮)
- reset(重置按钮)
- image(图像形式的提交按钮)
- radio(单选按钮)
- checkbox(复选框)
- hidden(隐藏字段)
- file(文件上传)
(用户体验细节:刷新后想让第一个输入框默认选中状态,给输入框设置autofocus="autofucus")
②textarea 标签表单 — — 多行文本框
<textareas rows="行数" cols="列数">多行文本框内容</textarea>
注意:每个浏览器解析不一样,多行文本框可以在CSS上设置width & height
③ 下列列表
由<select>标签和<option>标签配合使用
语法:
<select multiple="multiple" size="可见列表项数目"><option value="选项值" selected="selected">选项显示的内容</option><option value="选项值" >选项显示的内容</option><option value="选项值" >选项显示的内容</option>
</selected>
7、插入音频、视频、flash
<embed src="多媒体文件地址" width="播放界面宽度" height="播放界面高度"></embed>
#px作为单位
8、插入背景音乐
<bgsound src="背景音乐地址" loop="播放次数"/>
bgsound标签 只适用于IE浏览器(除了bgsound,还有embed标签和object标签)
loop = "2" 重复2次
loop = "infinite" 或 loop = "-1" 无限次循环
9、悬浮框架 iframe
<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scroling="设置浮动框架是否显示滚动条"></iframe>
- scrolling = "auto" 根据需要显示(默认值),在浏览器页面左对齐
- scrolling = "yes" 总是显示
- scrolling = "no" 不显示
10、HTML5 新标签
<body><header>头部</header><nav>导航条</nav><aside>侧导航</aside><article>文章块</article><footer>底部</footer>
</body>
这些 HTML5 新标签IE低版本不识别,只能用在手机网站的书写。
三、CSS
写在head标签内部
1、CSS基础语法
- color 颜色(不是标准色时,利用PS提取颜色参数,eg:#cc3300)
- font-size 字大小
- font-family 字体
- text-align:left/center/right 内容水平对齐方式
- text-indent 首行缩进(2em:2个文字大小)
- width 宽度
- height 高度
- background 背景色
2、CSS三种引用方法
内嵌式 | 外链式 | 行内式 | |
---|---|---|---|
位置 | style标签放在head标签中 | 通过link放在head标签中 ,把外部CSS文件引入到HTML文件中(link回车) | 在body的语句中 |
优点 | 加载速度快 (电商网站首页必须用这种方式,因为电商首页要求加载速度必须快,内嵌式比外链式快一些) | 实现了代码分离,方便修改、管理 | 一定不要用,权重很大且不方便修改 |
缺点 | HTML和CSS代码没有实现分离,不方便修改 | 运行速度比内嵌式快一些 |
3、CSS选择器
3.1 标签选择器
<!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"><style type="text/css">h3{color:aqua;font-size: 12px;font-family: "楷体";}</style><title>css选择器</title>
</head>
<body><h3>你的问题主要在于读书太少而想的太多。</h3><h4>我甘心当个零,别人不把我当个东西,我正好可以吧看不起我的人看个透。</h4>
</body>
</html>
3.2 类选择器(.class)
<!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"><style type="text/css">p.one{color:red;font-size: 12px;font-family: "楷体";}</style><title>css选择器</title>
</head>
<body><p class="one">你的问题主要在于读书太少而想的太多。</p><p class="two">我甘心当个零,别人不把我当个东西,我正好可以吧看不起我的人看个透。</p>
</body>
</html>
3.3 ID选择器(#ID)
<!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"><style type="text/css">p#two{color:red;font-size: 12px;font-family: "楷体";}</style><title>css选择器</title>
</head>
<body><p id="one">你的问题主要在于读书太少而想的太多。</p><p id="two">我甘心当个零,别人不把我当个东西,我正好可以吧看不起我的人看个透。</p>
</body>
</html>
3.4 后代选择器(用空格连接)
<!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"><style type="text/css">h2 div{color:red;font-size: 12px;font-family: "楷体";}div span{color:aquamarine;font-size: 14px;font-family: "宋体";}dl dd{color:darkorange;font-size: 16px;font-family: "微软雅黑";}</style><title>css选择器</title>
</head>
<body><h2><div>秋有三五七言,有几朵浪漫<span>苹果</span><span>草莓</span></div><dl><dt>杨绛先生</dt><dd>你的问题主要在于读书太少而想的太多。</dd><dd>故人笑比中庭树,一日秋风一日疏。</dd></dl></h2>
</body>
</html>
3.5 并集(并列选择器)(用逗号连接)
<!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"><style type="text/css">dt,dd{color:darkorange;font-size: 16px;font-family: "微软雅黑";}</style><title>css选择器</title>
</head>
<body><h2><div>秋有三五七言,有几朵浪漫<span>苹果</span><span>草莓</span></div><dl><dt>杨绛先生</dt><dd>你的问题主要在于读书太少而想的太多。</dd><dd>故人笑比中庭树,一日秋风一日疏。</dd></dl></h2>
</body>
</html>
4、高级权重对比
4.1 引入方式不同
- 外链式和内嵌式权重一样,先写的会被后写的覆盖
- 行内式的权重是最大的,如果想覆盖它,则需要在样式上添加!important 来把权重提高
4.2 复合选择器权重
- 认为 标签1斤;类10斤;ID100斤(综合起来大的权重就高,若权重一样,先写的被后写的覆盖)
5、CSS常用的文字属性
文字加粗 | font-weight | normal 不加粗 |
---|---|---|
bold 加粗 | ||
文字倾斜 | font-style | normal 不倾斜 |
italic 倾斜 | ||
文字修饰线 | text-decoration | none 没有线 |
underline 下划线 | ||
overline 上划线 | ||
line-through 删除线 | ||
强迫字母换行 | word-break:break all |
6、行高属性
一行文字的结束到下一行文字结束的间距:line-height
7、边框属性
border:10px solid green;
- border(全边框)
- border-botton
- border-top
- border-left
- border-right
- solid(实线)
- dashed(虚线)
8、盒子模型
盒子模型的组成=宽高+边框+内边距+外边距
- 内边距 padding : 内容和边框的距离
- 外边距 margin : 盒子和盒子的距离
<!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"><style type="text/css">div.one{color:red;font-size: 12px;font-family: "楷体";width: 300px; height: 200px;background: rgb(167, 230, 172);border: 10px;padding:10px 20px 30px 40px;margin: 10px 20px 30px 40px;}div.two{font-size: 12px;font-family: "楷体";width: 300px; height: 200px;background: rgb(167, 230, 172);border: 10px;padding:10px 20px 30px 40px;margin: 10px 20px 30px 40px;}</style><title>盒子模型</title>
</head>
<body><div class="one">一辈子太短,想吃的就去买,想的人就去找,如果能快乐,不要等。</div><div class="two">没有人永远18岁,但永远有人18岁。</div>
</body>
</html>
(运行后可按 F12 查看)
四、JavaScript
1、JS三种引用方式
内嵌式 | 写在<script>标签,可以在head和body之间,也可以放在body内,head内 |
---|---|
外链式 | 用src表示外部js文件地址。<script src="main.js"></script> |
行内式 | 权重很大。写在标签的事件属性当中(以on开头的属性) |
2、JS基础语法
2.1 JS注释
- 单行注释: //
- 多行注释: /*.....*/
2.2 js变量
js是弱类型语言(没有严格意义上的类型),定义变量用 var 关键字
var a=3;
var b="java1010";
2.3 js 基本数据类型
数值类型、字符串类型、布尔类型、underfined(变量不含有值)、null(变量值为空)
<script type="text/javascript">var a=1;var b="Java1010";var c=true;var d;var e=null;document.write(a+"<br />");document.write(b+"<br />");document.write(c+"<br />");document.write(d+"<br />");document.write(e+"<br />");
</script>
2.4 js运算符
- 算术运算符:+、-、*、/、%、++、--
- 比较运算符:==、===、!=、!==、>、<、>=、<=
- 逻辑运算符:&&、||、!
- 三元运算符:表达式?true值:false值
- 赋值运算符:=、+=、-=、*=、/=、%=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>算术运算符</title>
</head>
<body>
<script type="text/javascript">var x=20,y=5;document.write("x="+x+",y="+y+"<br/>");//x=20,y=5document.write("x+y="+(x+y)+"<br/>");//x+y=25document.write("x-y="+(x-y)+"<br/>");//x-y=25document.write("x*y="+(x*y)+"<br/>");//x*y=100document.write("x/y="+(x/y)+"<br/>");//x/y=4document.write("x%y="+(x%y)+"<br/>");//x%y=0document.write("x++="+(x++)+"<br/>");//x++=20document.write("x="+x+"<br/>");//x=21document.write("++y="+(++y)+"<br/>");//++y=6document.write("y="+y+"<br/>");//y=6/*i++ 返回原来的值,++i 返回加1后的值i++前者是先赋值,然后再自增;++i后者是先自增,后赋值。表达式 a = i++ ;它等价于 a = i;i = i + 1;表达式 a = ++i;它等价于i = i + 1;a = i;*/
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串连接“+”</title>
</head>
<body>
<script type="text/javascript">var x=10,y='4';document.write("x="+x+",y="+y+"<br/>");//x=10,y=4document.write("(x+y),结果"+(x+y)+"<br/>");//(x+y),结果104
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>比较运算符</title>
</head>
<body>
<script type="text/javascript">var x=10,y=5;document.write("x="+x+",y="+y+"<br/>");//x=10,y=5document.write("x==10,结果"+(x==10)+"<br/>");//x==10,结果truedocument.write("x=='10',结果"+(x=='10')+"<br/>");//x=='10',结果truedocument.write("x===10,结果"+(x===10)+"<br/>");//x===10,结果truedocument.write("x==='10',结果"+(x==='10')+"<br/>");//x==='10',结果flasedocument.write("x!=10,结果"+(x!=10)+"<br/>");//x!=10,结果flasedocument.write("x!='10',结果"+(x!='10')+"<br/>");//x!='10',结果flasedocument.write("x!==10,结果"+(x!==10)+"<br/>");//x!==10,结果flasedocument.write("x!=='10',结果"+(x!=='10')+"<br/>");//x!=='10',结果truedocument.write("x>y,结果"+(x>y)+"<br/>");//x>y,结果truedocument.write("x<y,结果"+(x<y)+"<br/>");//x<y,结果flasedocument.write("x>=y,结果"+(x>=y)+"<br/>");//x>=y,结果truedocument.write("x<=y,结果"+(x<=y)+"<br/>");//x<=y,结果flase//===,叫绝对等于或全等于,在比较前不进行类型转换
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
</head>
<body>
<script type="text/javascript">var x=10,y=5;document.write("x="+x+",y="+y+"<br/>");//x=10,y=5document.write("(x<11&&y>6),结果"+(x<11&&y>6)+"<br/>");//x<11&&y>6,结果flasedocument.write("(x<11||y>6),结果"+(x<11||y>6)+"<br/>");//x<11||y>6,结果truedocument.write("!(x<11),结果"+!(x<11)+"<br/>");//!(x<11,),结果flase
</script></body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三目运算符</title>
</head>
<body>
<script type="text/javascript">var x=10,y=4;document.write("x="+x+",y="+y+"<br/>");//x=10,y=4document.write("(x>y?x:y),结果"+(x>y?x:y)+"<br/>");//(x>y?x:y),结果10
//对于条件表达式b ? x : y,先计算条件b,然后进行判断。如果b的值为true,计算x的值,运算结果为x的值;否则,计算y的值,运算结果为y的值。
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>赋值运算符</title>
</head>
<body>
<script type="text/javascript">var x=20,y=5;document.write("x="+x+",y="+y+"<br/>");//x=20,y=5x=20,y=5;document.write("x="+x+"<br/>");//x=20x=20,y=5;document.write("x+=y,x="+(x+=y)+"<br/>");//x+=y,x=25x=20,y=5;document.write("x-=y,x="+(x-=y)+"<br/>");//x-=y,x=15x=20,y=5;document.write("x*=y,x="+(x*=y)+"<br/>");//x*=y,x=100x=20,y=5;;document.write("x/=y,x="+(x/=y)+"<br/>");//x/=y,x=4x=20,y=5;document.write("x%=y,x="+(x%=y)+"<br/>");//x%=y,x=0
</script>
</body>
</html>
2.5 js 选择语句
if..else、switch...case
var a=2;
if(a==1){alert("a="+a);
}
else{document.write("a="+a);
}
var grade='A';switch(grade){case 'A':document.write('优秀');break;case 'B':document.write('良好');break;case 'C':document.write('合格');break;}
2.6 js 循环语句
for、foreach
document.write("<br />");
for(var i=0;i<10;i++){document.write("i="+i+"<br />");
}
foreach是用于遍历数组的方法,遍历的数组不能是空的要有值。
foreach 语法:
[].forEach(function(value,index,array){//code something});
forEach方法中的function回调有三个参数:
第一个参数是遍历的数组内容,
第二个参数是对应的数组索引,
第三个参数是数组本身
2.7 js 函数
document.write("<br />");
function speak(){document.write("我是一个函数");
}function speak2(message){document.write("我是一个函数"+message);
}speak();
document.write("<br />");
speak2("信息传递");
document.write("<br />");
2.8 js 的 break 函数和 continue 函数
document.write("<br />");
for(var i=0;i<10;i++){if(i==3){break;}document.write("i="+i+"<br />");
}
document.write("<br />");
for(var i=0;i<10;i++){if(i==3){continue;}document.write("i="+i+"<br />");
}
2.9其他
这篇关于软测基础之前端基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!