软测基础之前端基础

2023-11-02 11:59
文章标签 基础 之前 软测

本文主要是介绍软测基础之前端基础,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一、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>                        下标
  • "&nbsp;"                     空格 

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-weightnormal    不加粗
bold        加粗
文字倾斜font-stylenormal    不倾斜
italic        倾斜
文字修饰线text-decorationnone        没有线
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&gt;y,结果"+(x>y)+"<br/>");//x>y,结果truedocument.write("x&lt;y,结果"+(x<y)+"<br/>");//x<y,结果flasedocument.write("x&gt;=y,结果"+(x>=y)+"<br/>");//x>=y,结果truedocument.write("x&lt;=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&lt;11&&y&gt;6),结果"+(x<11&&y>6)+"<br/>");//x<11&&y>6,结果flasedocument.write("(x&lt;11||y&gt;6),结果"+(x<11||y>6)+"<br/>");//x<11||y>6,结果truedocument.write("!(x&lt;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&gt;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其他

 

这篇关于软测基础之前端基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/330447

相关文章

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C 语言基础之数组

文章目录 什么是数组数组变量的声明多维数组 什么是数组 数组,顾名思义,就是一组数。 假如班上有 30 个同学,让你编程统计每个人的分数,求最高分、最低分、平均分等。如果不知道数组,你只能这样写代码: int ZhangSan_score = 95;int LiSi_score = 90;......int LiuDong_score = 100;int Zhou

c++基础版

c++基础版 Windows环境搭建第一个C++程序c++程序运行原理注释常亮字面常亮符号常亮 变量数据类型整型实型常量类型确定char类型字符串布尔类型 控制台输入随机数产生枚举定义数组数组便利 指针基础野指针空指针指针运算动态内存分配 结构体结构体默认值结构体数组结构体指针结构体指针数组函数无返回值函数和void类型地址传递函数传递数组 引用函数引用传参返回指针的正确写法函数返回数组

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是

【MRI基础】TR 和 TE 时间概念

重复时间 (TR) 磁共振成像 (MRI) 中的 TR(重复时间,repetition time)是施加于同一切片的连续脉冲序列之间的时间间隔。具体而言,TR 是施加一个 RF(射频)脉冲与施加下一个 RF 脉冲之间的持续时间。TR 以毫秒 (ms) 为单位,主要控制后续脉冲之前的纵向弛豫程度(T1 弛豫),使其成为显著影响 MRI 中的图像对比度和信号特性的重要参数。 回声时间 (TE)

Java基础回顾系列-第七天-高级编程之IO

Java基础回顾系列-第七天-高级编程之IO 文件操作字节流与字符流OutputStream字节输出流FileOutputStream InputStream字节输入流FileInputStream Writer字符输出流FileWriter Reader字符输入流字节流与字符流的区别转换流InputStreamReaderOutputStreamWriter 文件复制 字符编码内存操作流(

Java基础回顾系列-第五天-高级编程之API类库

Java基础回顾系列-第五天-高级编程之API类库 Java基础类库StringBufferStringBuilderStringCharSequence接口AutoCloseable接口RuntimeSystemCleaner对象克隆 数字操作类Math数学计算类Random随机数生成类BigInteger/BigDecimal大数字操作类 日期操作类DateSimpleDateForma