一 HTML简介：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
"超文本"是页面内可以包含图片，链接，甚至音乐，程序等非文字元素。
超文本标记语言的结构包括头部分(head),和主体部分(body)，其中头部分提供关于网页的信息，主体部分提供网页的具体内容。
常见的编辑工具：VS Code,Sublime Text;
来看一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
<a href="https://www.runoob.com" target="_blank">这是一个链接使用了 href 属性</a>
<br>
<hr>
<!-- 这是一个注释 -->
<b>加粗文本</b>
<i>斜体文本</i>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">bmw</option>
</select>
</form>
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
</body>
</html>
字段含义解析：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题 可用<h1> - <h6> 标签来定义的。
<p> 元素定义一个段落
<img> 元素定义一个图片，图片地址通过src来指定
<a> 元素定义一个链接，href中指定链接的地址,target指明在新页面打开链接
<br>换行标签
<hr>水平线
<table>定义一个表格，<th>定义表头，<tr>定义行，<td>定义行中的单元格
<ol>有序列表，<ul>无序列表，<li>列表中的每一项
<div> 块级元素，定义一个区域，可用于组合其他html元素
<span> 内联元素，用于组合文档内的行内元素
<form> 表单，包含表单元素的区域，允许用户在表单进行输入选择：文本域，下拉列表，单选框，复选框；
<select>下拉列表
<button>按钮
<iframe>框架元素，定义了页面中嵌套显示另一个页面
注意只有body中的内容才会在网页中显示。HTML属性：html可以设置属性，属性是键值对形式，一般出现在开始标签；常见的属性有id，class，style,hidden,dir等等；
HTML head：<head>标签中可以添加的元素：<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
<title>标签定义了浏览器工具栏的标题，收藏夹的标题，被搜索结果页面的标题；
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<link> 标签定义了文档与外部资源之间的关系。通常用于链接样式；
<style> 标签定义了HTML文档的样式文件引用地址.也可以直接添加样式来渲染html文档；
<script>标签用于加载脚本文件，如： JavaScript。该元素即可包含脚本语句，也可以通过src属性指向外部脚本文件；脚本常用于图片操作，表单验证，内容动态更新等；
<div>标签：可定义文档中的分区，是一个块级元素，这意味着它的内容自动开始新的一行。
二 CSS:
层叠样式表（cascading style sheets）是一种用来表现HTML或xml等文件样式的计算机语言。被用来控制网页样式和布局，css不仅可以静态的修饰网页，还可以配合各种脚本语言动 态的对网页各元素进行格式化。具体点说，css可以帮助我们设置网页的背景颜色，字体，文本，列表，表格，边框，链接等等的样式，对齐；通过css文件，我们可以把格式化从html中剥离出来；
CSS规则由两个主要的部分构成：选择器，以及一条或多条属性声明；
选择器通常是需要改变样式的html元素；每条声明由key:value组成；
在网页中嵌入css代码：通过style标签在网页中嵌入css代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这个段落采用CSS样式化。</p>
</body>
</html>css选择器：
id和class选择器，标签选择器：如果需要为html元素设置css样式，你需要在元素中设置id和class选择器；
id选择器：可以为特定id的HTML元素指定特定的样式；id选择器以"#"来定义；
class选择器：用于描述一组元素的样式，与id选择器的区别是class可以在多个元素中使用；类选择器以"."号显示；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>插入样式表有三种方式：外部样式表（External style sheet）,内部样式表 (Internal style sheet),内联样式 (Inline style)
当式表需要适用于很多页面是，外部样式表将是很好的选择；每个页面通过<link>标签来链接到样式表，link标签在head里；
当单个文档需要指定样式时，就应该使用内部样式表；通过<style>标签在文档头部定义；
当样式仅需要在元素上应用一次时使用内联样式；在标签内使用style属性；
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>测试！</h3>
</body>
当一个属性被多个样式表定义，不同的属性取取并集，相同的属性被替代：优先级：外部<内部<内联Css背景属性：
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
<head>
<meta charset="UTF-8">
<title>order</title>
<!-- style在网页中嵌入css代码 -->
<style>
/* 统一网页风格 */
body{
font-size:18px;/*设置字号18像素 */
width:200px;/*设置网页宽度*/
}
/*通过.获取class选择器的值*/
.test{
font-size:25px;/*设置字号变大*/
padding-left:60px;/*设置左边距的距离*/
text-indent:20px;/*设置缩进*/
padding-top:10px;/*设置上边距*/
</style>
</head>
<body>
<div class="test">你好，请到服务台办理相关业务</dev>
</body>
更好的方法是把css相关的代码单独拿出来放到xx.css文件中以达到代码复用的效果，在html文件中可以通过link标签引入外部css文件：
<head>
<!-- link在网页中引入css代码
rel：值是固定写法
href：指定文件的位置
-->
<link rel="stylesheet" href="test.css">
</head>
三 JavaScript：
前面我们学习了html,css,html定义了网页的内容，css定义了网页的布局，接下来要学习的javaScript定义了网页的行为；
js简介：
js是互联网最流行的脚本语言，是一种轻量级的语言，可插入HTML页面，由浏览器执行；
第一个js程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>JS的用法：在html中使用js时，使用<script>标签，该标签可以出现在head和body中；可以在<script></script>之间写js代码，也可以通过<script>标签的src属性引入外部的js文件；
在浏览器中执行js程序：在chrome浏览器中按下f12，点击console，即可输入js代码
JS打印输出：js可以通过不同的方式输出数据：
使用window.alert()弹框；
使用document.write()将内容写到html文档中
使用innerHTML写入到html元素中：document.getElementById("demo").innerHTML = "段落已修改。";
使用console.log()写入到浏览器控制台
JS语法：js语法和java还是有很多相似之处，比如语句以";"分号结束，注释，条件控制语句等基本相同，下面着重说下不同点：
js定义变量使用var关键字；字符串可以使用双引号和单引号；js拥有动态类型，这意味着相同的变量可用作不同的类型；
js数据类型：数字，字符串，boolean,数组，对象，null, undefined(未定义，没有变量没有赋值);
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
var x = true;声明变量类型：声明新变量时，可以使用new关键字来声明其类型；
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person = new Object;js数组创建及赋值方式：
方式一：
var stu = new Array();
stu[0] = "tom";
stu[1] = "lilei";
方式二：
var stu = new Array("tom","lilei");
方式三：
var stu = ["tom","lilei"];js对象创建及对象属性访问方式：对象属性以key:value对定义；
var person={name:"jim",age:18,id:"1212"};
//空格和折行无关紧要，声明可跨多行；
var person={
name : "jim",
age : 18,
id : "1212"，
getName : function(){
return "jim gelin";
}
};
var name=person.name;
var name=person["name"];
var name=person.getName();Undefined和null:Undefined表示声明一个变量但是没有赋值。我们可以使用null来清空变量；
js函数：和java方法类似，只是使用function关键字声明，并且不用写返回值类型；
js变量的声明周期:函数内部的变量称为局部变量，反之全局变量，局部变量在函数运行结束后清除，全部变量在页面关闭后清除；
向未声明的js变量分配值：该变量将被作为window的一个属性；是全局对象的可配置属性，可删除：
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义js事件：html事件是发生在html元素上的事情，可以是浏览器行为，也可以是用户行为；html常见事件如下：
onclick：用户点击事件；onchange:html元素改变；onkeydown:用户按下按键；onload:页面加载完成；onmouseover:用户在一个html元素上移动鼠标；onmouseout:从一个html元素上移开鼠标
html页面加载完成；input字段改变时；按钮被点击；
js String类型介绍：
定义字符串可以使用单引号，也可以使用双引号；在字符串中使用引号，字符串中的引号不要与字符串的引号相同；和java String一样，js string类型索引从0开始；
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
var character = carname[0];
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
var y = "He is called \"Johnny\"";//使用转移字符
var sln = answer .length;//字符串长度属性
//字符串可以是对象
var x = "John";
var y = new String("John");//不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
typeof x // 返回 String
typeof y // 返回 Object
// === 为绝对相等，即数据类型与值都必须相等
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
和java String一样，js String也有很多的方法，charAt()，concat()，indexOf()等等。
js中运算法：js中的运算符合java中的大部分相同，“/”除法运算符不同，java中的除法运算符只取商，js中的结果带小数点；5/2得到2.5；
逻辑运算符：大部分和java中的相同，说下不同点，“==”等于，“===”绝对相等（值和类型都相同）
条件语法和循环语法也和java类似，不同的是，js for循环还支持 for/in循环；
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}JS类型转换：
typeof操作符：返回变量的数据类型；
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 objectconstructor属性：constructor 属性返回 JavaScript 变量的构造函数
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
扫一扫
1492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
