软件测试如何快速具备前端三剑客能力（软件测试如何快速具备前端三剑客能力）
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>
<!-- 这是注释 -->
<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="para1" 的 HTML 元素 */
#para1 {
text-align: center;
color: red;
}
/* 在此例中，所有带有 class="center"的HTML元素 */
.center {
text-align: center;
color: red;
}
/* 你希望所有带title和href的元素生效 */
*[title][href] {color:red;}
/* 在这个例子中，只有具有 class="center" 的 <p> 元素生效 */
p.center {
text-align: center;
color: red;
}
/* 如果您希望只对 h1 元素中的 em 元素应用样式 */
h1 em {color:red;}
h1 > em {color:red;}
h1,h2 > em {color:red;}
/* 如果您希望只对 h1 元素中的h2元素的 em 元素应用样式 */
h1 h2 > em {color:red;}
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
- 使用window.alert()弹出警告框。
- 使用document.write()方法将内容写到 HTML 文档中。
- 使用innerHTML写入到 HTML 元素。
- 使用console.log()写入到浏览器的控制台。
; 分号：表示一行语句结束
空格：会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。
// 表示注释
/* 开始，以 */ 结尾 ：表示多行注释
加减乘除等其他符号含义和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);
}
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
