专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

软件测试如何快速具备前端三剑客能力

ins518 2024-10-06 10:34:24 技术文章 7 ℃ 0 评论

一. HTML语法基础

HTML是超文本标记语言，在Web开发三大语言中负责描述内容和结构，目前该语言标准已经发展到了HTML5。

1.1 语言结构

不同于其他的编程语言，HTML是一种DSL（Domain Specific Language，领域特定语言），这种语言专门用来结构化地描述网页的内容。它提供一种语义信息让浏览器很快明白整个超文本内容的框架结构。HTML是用树形结构来描述内容的，学过数据结构的同学能立马明白过来，只要是树形结构就一定存在两种关系：父子关系（parent-child)和兄弟关系(siblings)。举个例子大家就明白了：

<div>
    <h1>Article Title</h1>
    <p>Paragraph of text.</p>
<div>

上面这小段HTML代码中，div元素就是父节点，它有两个子节点h1和p。而h1和p之间互为兄弟关系。如下图所示：

所以HTML的元素是可以像这样嵌套包含的，就像一个容器一样，如果要用百分比来表示大小，那么这个百分比永远只根据最近的父元素进行计算。

现代HTML的标准模板

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

1.2 常用标签

<!-- 这是注释  -->
<html>
<!-- 头部标签，可以导入js，css等 -->
<header></header>
<!-- 网页主体  -->
<body>
<!-- 脚标签，增加可读性  -->
<footer></footer>
</body>
</html>
<!-- 标题标签(数字越小,字越大) -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<!-- 这是字体  -->
<font> 字体的设置 </font>
<b>字体会加粗</b>
<i>字体会倾斜</i>
<u>字体下划线</u>
<!-- 换行  -->
<br> 也可以 <br/> 只有一半(无需包裹.只写一半)
<!-- 空格  -->
 
<!-- 段落  -->
<p> 长段文字 </p> 
<!-- 水平线  -->
<hr>
<!-- 居中标签的效果  -->
<center> 标签名称 ... </center>
<!-- 图片  -->
<img src="路径">
<!-- 链接标签  -->
<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
<span> 有多大空间占据多大空间 </span> 
<div> 独占一行 </div>

<!-- 有序号列表  -->
<ol type="testing">
  <li> Will </li>
  <li> Roy </li>
</ol>
<!-- 无序号列表  -->
<ul type="testing">
  <li> Will </li>
  <li> Roy </li>
</ul>
<!-- 表格  -->
<table>
  <!-- 行  -->
  <tr>
    <!-- 表头  -->
    <th> 表头一列 </th>
    <th> 表头二列 </th>
    <th> 表头三列 </th>
  </tr>
  <tr>
    <!-- 列  -->
    <td> will</td>
    <td> Roy </td>
    <td> 土匪 </td>
  </tr>
</table>

更多内容可以参考：https://www.runoob.com/html/html-tutorial.html


二. CSS语法基础

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 存在于style标签中生效

CSS 是一个字典类型数据结构


CSS语法选择器

/* 对当前页面所有h1,h2标签生效 */
h1, h2 {
  color: red;
  font-size: 14px;
}

CSS id 选择器

/* 这条 CSS 规则将应用于 id="para1" 的 HTML 元素 */
#para1 {
  text-align: center;
  color: red;
}

CSS 类选择器

/* 在此例中，所有带有 class="center"的HTML元素 */
.center {
  text-align: center;
  color: red;
}

CSS 属性选择器

/* 你希望所有带title和href的元素生效 */
*[title][href] {color:red;}

CSS 复合选择器

/* 在这个例子中，只有具有 class="center" 的 <p> 元素生效 */
p.center {
  text-align: center;
  color: red;
}

CSS 后代选择器

/* 如果您希望只对 h1 元素中的 em 元素应用样式 */
h1 em {color:red;}
h1 > em {color:red;}
h1,h2 > em {color:red;}

/* 如果您希望只对 h1 元素中的h2元素的 em 元素应用样式 */
h1 h2 > em {color:red;}


三. JS语法

1.1 用法

js可以写在HTML的script标签里面

<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>

也可以写成一个单独的js文件，在HTML里面导入

<!DOCTYPE html>
<html>
	<head>
		<!-- 设置编码 -->
		<meta charset=utf-8>
		<!-- 标题 -->
		<title>Vue App</title>
		<!-- 页面加载前导入 -->
		<!-- 导入css -->
		<link href=/css/chunk-4aa69602.bbd44efb.css rel=prefetch>
		<!-- 导入js -->
		<link href=/js/app.fdcf0f46.js rel=preload as=script>
	</head>
	<body>
		<div id=app></div>
		<!-- 页面加载后导入 -->
		<script src=/js/app.fdcf0f46.js></script>
	</body>
</html>

当然，你也可以在开发者工具的console界面直接执行js


1.2 输出

  • 使用window.alert()弹出警告框。
  • 使用document.write()方法将内容写到 HTML 文档中。
  • 使用innerHTML写入到 HTML 元素。
  • 使用console.log()写入到浏览器的控制台。


1.3 JS语法含义

; 分号：表示一行语句结束

空格：会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。

// 表示注释

/* 开始，以 */ 结尾 ：表示多行注释

加减乘除等其他符号含义和Java编程语言几乎一样


1.4 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（null）、未定义（undefined）、symbol。

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串，这里和python差不多
var carname='Volvo XC60';

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

var x=true;				// 布尔值
var y=false;

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

var cars=["Saab","Volvo","BMW"];		// 数组，和python的列表类似
console.log(cars[1]);
cars.push('b')
cars.pop('b')

var person={firstname:"John", lastname:"Doe", id:5566}; 	// 对象，与python的字典类似
// 可以通过以下形式添加一个键
person.age = 18;
person['love'] = '女';

// 备注：json字符串和对象之间可以互转
jsonstr = JSON.stringify(person); //可以将json对象转换成json对符串 
JSON.parse(jsonstr); //可以将json字符串转换成json对象 

// 函数
function myfunc(params){
 	console.log(params); 
}
// 调用
myfunc('hello');


1.5 变量

使用var定义变量

var a;
a = 1;

变量必须以字母开头变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）


1.6 条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

switch 语句 - 使用该语句来选择多个代码块之一来执行

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

1.7 循环语句

与Java一致

for (var i=0; i<10; i++)
{ 
    console.log(i);
}

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表