软测基础之前端基础

墨瑶_165

已于 2022-09-29 11:54:52 修改

阅读量687

点赞数 4

分类专栏：前端开发入门编程语言、命令相关文章标签： css html javascript html5 软件测试

于 2022-03-09 20:06:50 首次发布

本文链接：https://blog.csdn.net/Echo_165/article/details/123311990

版权

编程语言、命令相关同时被 2 个专栏收录

7 篇文章 3 订阅

订阅专栏

前端开发入门

3 篇文章 0 订阅

订阅专栏

②textarea 标签表单 — — 多行文本框

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代码没有实现分离，不方便修改	运行速度比内嵌式快一些

内嵌式

外链式

行内式

位置

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 不加粗
文字加粗	font-weight	bold 加粗
文字倾斜	font-style	normal 不倾斜
文字倾斜	font-style	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=5
 document.write("x+y="+(x+y)+"<br/>");//x+y=25
 document.write("x-y="+(x-y)+"<br/>");//x-y=25
 document.write("x*y="+(x*y)+"<br/>");//x*y=100
 document.write("x/y="+(x/y)+"<br/>");//x/y=4
 document.write("x%y="+(x%y)+"<br/>");//x%y=0
 document.write("x++="+(x++)+"<br/>");//x++=20
 document.write("x="+x+"<br/>");//x=21
 document.write("++y="+(++y)+"<br/>");//++y=6
 document.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=4
 document.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=5
 document.write("x==10,结果"+(x==10)+"<br/>");//x==10,结果true
 document.write("x=='10',结果"+(x=='10')+"<br/>");//x=='10',结果true
 document.write("x===10,结果"+(x===10)+"<br/>");//x===10,结果true
 document.write("x==='10',结果"+(x==='10')+"<br/>");//x==='10',结果flase
 document.write("x!=10,结果"+(x!=10)+"<br/>");//x!=10,结果flase
 document.write("x!='10',结果"+(x!='10')+"<br/>");//x!='10',结果flase
 document.write("x!==10,结果"+(x!==10)+"<br/>");//x!==10,结果flase
 document.write("x!=='10',结果"+(x!=='10')+"<br/>");//x!=='10',结果true
 document.write("x&gt;y,结果"+(x>y)+"<br/>");//x>y,结果true
 document.write("x&lt;y,结果"+(x<y)+"<br/>");//x<y,结果flase
 document.write("x&gt;=y,结果"+(x>=y)+"<br/>");//x>=y,结果true
 document.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=5
 document.write("(x&lt;11&&y&gt;6),结果"+(x<11&&y>6)+"<br/>");//x<11&&y>6,结果flase
 document.write("(x&lt;11||y&gt;6),结果"+(x<11||y>6)+"<br/>");//x<11||y>6,结果true
 document.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=4
 document.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=5
 x=20,y=5;
 document.write("x="+x+"<br/>");//x=20
 x=20,y=5;
 document.write("x+=y,x="+(x+=y)+"<br/>");//x+=y,x=25
 x=20,y=5;
 document.write("x-=y,x="+(x-=y)+"<br/>");//x-=y,x=15
 x=20,y=5;
 document.write("x*=y,x="+(x*=y)+"<br/>");//x*=y,x=100
 x=20,y=5;;
 document.write("x/=y,x="+(x/=y)+"<br/>");//x/=y,x=4
 x=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其他

墨瑶_165

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
软测基础之前端基础

HTML基础HTML基础语法标签属性图片标签超链接锚点表单CSS基础CSS基础语法CSS四类选择器常用文字属性行高属性边框盒子模型内外边距JS基础JS基础语法JS引用方式
复制链接

扫一扫

专栏目录

软测基础之前端基础

一、web基本介绍

1.网页

2.浏览器

3.Web标准（重点）

二、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 函数

2.9其他

“相关推荐”对你有帮助么？