1 CSS

css是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！其语法如下：

选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
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的注释是同c++的/* */

1.1 id 和 class 选择器

如果你要在为HTML的指定元素中设置CSS样式，你需要在元素中设置"id" 或者 "class"选择器(HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。)。如以下的样式规则应用于元素属性 id="para1":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

class以.类名定义css代码段，然后body的所以该类名的元素都会应用这个css样式

1.2 html文件插入css文件的方法

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，那么除了上面在头部<style></style>出直接定义还有其他方法吗，当然！

1.2.1 外部样式表插入

加入你已经写好了单独的一个css文件，你可以通过链接方式导入，后续html会依照这个样式表信息渲染html。每个页面使用 <link> 标签链接到样式表。<link>标签在（文档的）头部：

1
2
3

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

1.2.2 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样（就是上面的例子）:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

1.2.3 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

1	<p style="color:sienna;margin-left:20px">这是一个段落。</p>

1.2.4 多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：
1
2
3
4
5
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
1
2
3
color:red;
text-align:right;
font-size:20pt;

多重样式优先级:（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

2 HTML

首先直接看一段html代码,这些都是每一个html文件固定必有的

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

标签<!DOCTYPE html>：告诉浏览器表明这是一个html文件
标签对<html></html>：表示这个html的起始和结束
标签对<head></head>：表示头部信息，不会显示在页面上的信息
- **标签<meta charset="utf-8">：表示这个页面使用utf-8编码
- **标签对<title></title>：显示在你浏览器哪个窗口的信息
<body></body>：页面内容放置的区域，即页面可见的内容

标签对的格式是这样的：

1	<标签关键字属性=值...>内容</标签关键字>

单标签格式是这样的：
1
<标签关键字属性=值...>

其中属性是有固定的字符串构成的，比如上面的meta属性，一些常用属性我们会在后面详细介绍

对于中文网页需要使用声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为
。

2.1 标签（元素）

2.1.1 标题元素

HTML 标题（Heading）是标签对，是通过<h1> - <h6> 标签来定义，由1级标题到6级标题。

1
2
3

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.1.2 段落元素

HTML 段落是通过标签对<p> 来定义的。

1 2	<p>这是一个段落。</p> <p>这是另外一个段落。</p>

2.1.3 HTML 链接

HTML 链接是通过标签对 <a> 来定义的。

1	<a href="https://www.runoob.com">这是一个链接</a>

- href：href属性中指定链接的地址。(后面介绍更多属性) - target:指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。 - title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。 - rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

2.1.4 块级元素`<div></div>`

<div></div>是一个块级元素，意味着会在其前后都创建一个换行，即它会占一行或多行，其后的内容会从新的一行还是。它非常有用，通常作为一个容器，来包含其他块级元素和行内元素，也常常与CSS一起使用，来控制页面布局、颜色和字体样式。

<span> 用来组合文档中的行内元素，内联元素(inline)

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<div id="container" style="width:500px">
 
	<div id="header" style="background-color:#FFA500;">
		<h1 style="margin-bottom:0;">主要的网页标题</h1>
	</div>
 
	<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜单</b>
		<br>HTML
		<br>CSS
		<br>JavaScript
	</div>
 
	<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
		内容在这里
	</div>
 
	<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
		版权 © runoob.com
	</div>
 
</div>
 
</body>
</html>

2.1.5 头部元素

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<base> 元素:描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
1
2
3
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<link> 元素:定义了文档与外部资源之间的关系。通常用于链接到样式表:
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> 元素:定义了HTML文档的样式文件引用地址.你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

<meta> 元素:meta标签描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
1
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<script> 元素:<script>标签用于加载脚本文件，如： JavaScript。(后续会详细讲)

2.1.6 表格

HTML 表格由 <table> 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由 <td>标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

<table border="1">
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

以上的表格实例代码中，<table>元素表示整个表格，它包含两个主要部分：<thead>和<tbody>。

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th >元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
<bordr>:边框属性，如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框，值表示边框的宽带

2.1.8 列表

<ul>:无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>:有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

2.1.7 其他(标签对)

HTML支持定义水平线<hr>
定义注释：
定义粗体：<b>
定义斜体：<i>
定义小号字体：<small>
定义加重语气：<stong>
定义下标字：<sub>
定义插入字：<ins>
定义删除字:<del>
定义计算机代码:<code>
定义变量：<var>
定义预格式文本：<pre>
定义缩写：<abbr>
定义引用：<cite>

2.1.8 表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

我们可以使用 <form>标签来创建表单:

<form>
.
input 元素
.
</form>

2.1.9 输入元素（单标签）

多数情况下被用到的表单标签是输入标签 <input>。输入类型是由 type 属性定义。接下来我们介绍几种常用的输入类型。

文本域（Text Fields）:文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
1
2
3
4
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段：密码字段通过标签来定义:

1
2
3

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮（Radio Buttons）:<input type="radio">标签定义了表单的单选框选项:

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框（Checkboxes）:<input type="checkbox">定义了复选框。复选框可以选取一个或多个选项：

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮(Submit): 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:
1
2
3
4
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：
- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

2.1.9 按钮

<button></button> 是HTML中的一个元素，用于创建一个可点击的按钮。这个元素通常用于提交表单、执行JavaScript代码或者触发其他类型的用户交互。

提交表单：当<button>元素被放置在<form>元素内部，并且没有指定type属性或者type属性被设置为submit时，点击该按钮会提交表单。
1
2
3
4
<form action="/submit_page" method="post">

<button type="submit">提交</button>
</form>
执行JavaScript代码：你可以使用onclick属性为按钮指定一个JavaScript函数，当按钮被点击时，这个函数会被执行。
1
<button onclick="alert('按钮被点击了！')">点击我</button>

其他类型：<button>元素还有一个type属性，可以设置为reset（重置表单）或button（默认，不执行任何操作，除非指定了onclick）。

<form>  
    <!-- 表单内容 -->  
    <button type="reset">重置</button>  
</form>  
<button type="button" onclick="alert('我是一个普通按钮')">点击我</button>

与<input type="button">的区别：<button>元素与<input type="button">元素在功能上是相似的，但<button>元素在内容、样式和可访问性方面提供了更多的灵活性。

2.1.9 图像元素（单标签）

HTML 图像是通过标签 <img> 来定义的.

1	<img src="/images/logo.png" alt="图片不见啦" width="258" height="39">

- src：图片的路径 - alt：图片加载失败时显示的文字

2.1.10 空元素（单标签）

有一些标签是行内元素，一些是块元素，有时候我们会苦恼一些东西放在了同一行，这是空元素<br>就起作用了

<br>

2.2 属性

属性	描述
`class`	html元素定义一个或多个类名（classname）(类名从样式文件引入)
`id`	定义元素的唯一id
`style`	规定元素的行内样式（inline style）
`title`	描述了元素的额外信息 (作为工具条使用)
`accesskey`	设置访问元素的键盘快捷键。
`contenteditable`	规定是否可编辑元素的内容。
`contextmenu`	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单

3 javascript

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

使用必知：

HTML 中的 Javascript 脚本代码必须位于 <script>与 </script> 标签之间，告诉浏览器 JavaScript 在何处开始和结束。

Javascript 脚本代码可被放置在 HTML 页面的<body> 和 <head> 部分中。

一般建议把它们放在 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容

把一个 JavaScript 函数放置到 HTML 页面的部分。该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

<body> 中的 JavaScript 函数。在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

外部的 JavaScript:也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在<script>标签的 "src" 属性中设置该 .js 文件路径：
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

3.1 数据类型

javascript同python一样使用动态类型，即不用声明变量的类型，它会根据表达式推断类型，此外统一使用var关键字来声明一个变量：

1
2
3

var x;               // x 为 undefinedvar            
x = 5;				 // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

在javascript中数据类型有：

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象正则（RegExp）和日期（Date

3.1.1 数组

下面的代码创建名为 cars 的数组的三种方法：

//方法1
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

//方法2
var cars=new Array("Saab","Volvo","BMW");

//方法三
var cars=["Saab","Volvo","BMW"];

3.1.2 javascript对象

javascript的对象概念不是c++/java等面向对象中的对象概念。在javascript中对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

1	var person={firstname:"John", lastname:"Doe", id:5566};

当然对象中的属性可以是函数，只要做好键值映射就好了：

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};

变量的生命周期

局部变量：在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

在 JavaScript 中，函数内部的局部变量通常不可以直接被外部作用域访问，但有几种方式可以将函数内的局部变量暴露给外部作用域，具体如下：

通过全局对象：在函数内部，可以通过将局部变量赋值给 window 对象的属性来使其成为全局可访问的。例如，使用 window.a = a; 语句，可以在函数外部通过 window.a 访问到这个局部变量的值。
定义全局变量：在函数内部不使用 var、let 或 const 等关键字声明变量时，该变量会被视为全局变量，从而可以在函数外部访问。但这种做法通常不推荐，因为它可能导致意外的副作用和代码难以维护。
返回值：可以通过在函数内部使用 return 语句返回局部变量的值，然后在函数外部接收这个返回值。这样，虽然局部变量本身不会被暴露，但其值可以通过函数调用传递到外部。
闭包：JavaScript 中的闭包特性允许内部函数访问外部函数的局部变量。即使外部函数执行完毕后，其局部变量仍然可以被内部函数引用。
属性和方法：定义在全局作用域中的变量和函数都会变成 window 对象的属性和方法，因此可以在调用时省略 window，直接使用变量名或函数名。

3.1.3 this关键字

面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

如果单独使用，this 表示全局对象window。

在函数中，this 表示全局对象。

1
2
3

function myFunction() {
  return this;
}

在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

3.1.4 JavaScript let 和 const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。
1
2
3
4
5
var i = 5;
for (let i = 0; i < 10; i++) {
// 一些代码...
}
// 这里输出 i 为 5
- 在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。
- 在第二个实例中，使用 let 关键字，它声明的变量作用域只在循环体内，循环体外的变量不受影响。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域：全局变量与函数内的局部变量。

3.1.5 JavaScript 表单验证

HTML 表单验证可以通过 JavaScript 来完成。以下实例代码用于判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

//javascript实例
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
//HTML表单实例
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

3.2 函数

javascript的函数有一下形式：

以function开头

function myFunction(argument1,argumrnt2){
 代码
 return
}

箭头函数

1 2	(参数1, 参数2, …, 参数N) => { 函数声明 } (参数1, 参数2, …, 参数N) => 表达式(单一)

>如果是单个参数的话前面的()可以省略

Trluper

前端初识

1 CSS

1.1 id 和 class 选择器

1.2 html文件插入css文件的方法

1.2.1 外部样式表插入

1.2.2 内部样式表

1.2.3 内联样式

1.2.4 多重样式

2 HTML

2.1 标签（元素）

2.1.1 标题元素

2.1.2 段落元素

2.1.3 HTML 链接

2.1.4 块级元素`<div></div>`

2.1.5 头部元素

2.1.6 表格

2.1.8 列表

2.1.7 其他(标签对)

2.1.8 表单

2.1.9 输入元素（单标签）

2.1.9 按钮

2.1.9 图像元素（单标签）

2.1.10 空元素（单标签）

2.2 属性

3 javascript

3.1 数据类型

3.1.1 数组

3.1.2 javascript对象

3.1.3 this关键字

3.1.4 JavaScript let 和 const

3.1.5 JavaScript 表单验证

3.2 函数

1 CSS

1.1 id 和 class 选择器

1.2 html文件插入css文件的方法

1.2.1 外部样式表插入

1.2.2 内部样式表

1.2.3 内联样式

1.2.4 多重样式

2 HTML

2.1 标签（元素）

2.1.1 标题元素

2.1.2 段落元素

2.1.3 HTML 链接

2.1.4 块级元素<div></div>

2.1.5 头部元素

2.1.6 表格

2.1.8 列表

2.1.7 其他(标签对)

2.1.8 表单

2.1.9 输入元素（单标签）

2.1.9 按钮

2.1.9 图像元素（单标签）

2.1.10 空元素（单标签）

2.2 属性

3 javascript

3.1 数据类型

3.1.1 数组

3.1.2 javascript对象

3.1.3 this关键字

3.1.4 JavaScript let 和 const

3.1.5 JavaScript 表单验证

3.2 函数

2.1.4 块级元素`<div></div>`