# Web开发基础
> 学习目标
1. 复习HTML、CSS、JavaScript的基础知识
2. 掌握HTML的常用标签及属性
3. 掌握CSS基本语法及选择器
4. 了解JavaScript常用功能
# 网页组成要素
网页主要有HTML、CSS、JavaScript构成。
## 结构层 HTML/HTML5
网页的骨架，HTML是网页内容的载体，内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
## 样式层 CSS/CSS3
CSS样式是表现。就像网页的外衣，比如，标题字体、颜色变化，或为标题加入背景图片、边框等，所有这些用来改变内容外观的东西称之为表现。
## 行为层 Javascript
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
# HTML标记语言
HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言: HyperText Markup Language
HTML不是一种编程语言，而是一种标记语言
HTML标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页
HTML文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
## HTML网页结构
下面是一个可视化的HTML页面结构
说明：只有 `<body> `区域 (白色部分) 才会在浏览器中显示。
HTML代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
```
浏览器的运行效果
## HTML标签
HTML标记标签通常被称为 HTML 标签 (HTML tag)。
HTML标签是由尖括号包围的关键词，比如 `<html>`
HTML标签通常是成对出现的，比如 `<b>` 和 `</b>`
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签也称为HTML元素
> 格式
```html
<标签>内容</标签>
```
> 例如
```html
<p>这是一个段落。</p>
```
> 提示
HTML 标签对大小写不敏感：`<P>` 等同于 `<p>`，推荐使用小写方式。
## HTML属性
HTML标签可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
> 属性示例
```html
<a href="http://www.runoob.com">这是一个链接</a>
```
下面列出了适用于大多数 HTML 元素的属性
| 属性 | 描述 |
| ----- | ------------------------------------------------------------ |
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
## HTML常用标签
### HTML标题
标题（Heading）是通过`<h1> - <h6>` 标签进行定义的。
> 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标题元素/title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
```
**说明:** 浏览器会自动地在标题的前后添加空行。
> 标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成**粗体**或**大号**的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 `h1 `用作主标题（最重要的），其后是 `h2`（次重要的），再其次是 `h3`，以此类推。
### HTML段落
HTML段落标签可以将文档分割为若干段落。
段落是通过 <p> 标签定义的。
`<hr>` 标签在 HTML 页面中创建水平线。
```html
<html>
<head>
<title>HTML段落</title>
</head>
<body>
<p>静夜思</p>
<hr/>
<p>床前明月光，疑似地上霜。</p>
<hr/>
<p>举头望明月，低头思故乡。</p>
</body>
<html/>
```
### HTML文本格式化
HTML相关标签可以对文本进行格式化
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML文本格式化</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>
```
> 文本格式化标签
| 标签 | 描述 |
| ---------- | ------------ |
| `<b>` | 定义粗体文本 |
| `<em>` | 定义着重文字 |
| `<i>` | 定义斜体字 |
| `<small>` | 定义小号字 |
| `<strong>` | 定义加重语气 |
| `<sub>` | 定义下标字 |
| `<sup>` | 定义上标字 |
| `<ins>` | 定义插入字 |
| `<del>` | 定义删除字 |
> "计算机输出" 标签
| 标签 | 描述 |
| -------- | ------------------ |
| `<code>` | 定义计算机代码 |
| `<kbd>` | 定义键盘码 |
| `<samp>` | 定义计算机代码样本 |
| `<var>` | 定义变量 |
| `<pre>` | 定义预格式文本 |
> 引文, 引用, 及标签定义
| 标签 | 描述 |
| -------------- | ------------------ |
| `<abbr>` | 定义缩写 |
| `<address>` | 定义地址 |
| `<bdo>` | 定义文字方向 |
| `<blockquote>` | 定义长的引用 |
| `<q>` | 定义短的引用语 |
| `<cite>` | 定义引用、引证 |
| `<dfn>` | 定义一个定义项目。 |
### HTML链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。
点击链接可以从一张页面跳转到另一张页面。
HTML使用标签 `<a>`来设置超文本链接。
> 示例
```html
<a href="https://www.runoob.com/">访问菜鸟教程</a>
```
点击这个超链接会把用户带到菜鸟教程的首页。
> target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
```html
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
```
target属性值
| 值 | 描述 |
| :---------- | :----------------------------------- |
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| *framename* | 在指定的框架中打开被链接文档。 |
### HTML表格
HTML表格由 `<table>` 标签来定义。每个表格均有若干行（由 `<tr>` 标签定义），每行被分割为若干单元格（由 `<td> `标签定义）。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
```html
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody>
</table>
```
### HTML列表
HTML 支持有序、无序和定义列表:
示例
```html
<h4>有序列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>无序列表：</h4>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
```
### HTML区块
大多数 HTML 元素被定义为**块级元素**或**内联元素**。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
常用的区块元素有: `<h1>`, `<p>`, `<ul>`, `<table>`,`<div>`
内联元素在显示时通常不会以新行开始。
内联元素常用的有： `<span>`,`<b>`, `<td>`, `<a>`, `<img> `
> HTML <div> 元素
HTML `<div>` 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 `CSS` 一同使用，`<div>` 元素可用于对大的内容块设置样式属性。
`<div>` 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 `<table>` 元素进行文档布局不是表格的正确用法。
`<table>` 元素的作用是显示表格化的数据。
> HTML <span> 元素
HTML `<span> `元素是内联元素，可用作文本的容器
`<span> `元素也没有特定的含义。
当与` CSS` 一同使用时，`<span>` 元素可用于为部分文本设置样式属性。
### HTML表单
HTML 表单用于收集不同类型的用户输入。
表单元素是允许用户在表单中输入文本域内容。
常用的文本域如下：
- 文本输入框`<input>`
- 文本域`<textarea>`
- 下拉列表`<select>`
- 单选框`<input type="radio">`
- 复选框`<input type="checkbox">`
- 密码字段` <input type="password" >`
- 隐藏字段` <input type="hidden" >`
- 提交按钮` <input type="submit" value="提交"> `
表单使用表单标签 `<form>` 来设置
> 注册表单示例
```html
<form>
<div>
用户名: <input type="text" name="username"/>
</div>
<div>
密码: <input type="password" name="password"/>
</div>
<div>
性别:
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</div>
<div>
<input type="checkbox" name="agree" value="1">我已阅读并同意相关服务条款和隐私政策
</div>
<input type="submit" value="立即注册">
</form>
```
运行结果
## HTML小结
HTML参考菜鸟教程如下：
http://www.runoob.com/html/html-tutorial.html
# CSS样式表
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
一个HTML文档可以显示不同的样式，示例如下
http://www.runoob.com/try/demo_source/demo_default.htm
## CSS规则
语法格式
```
选择符{属性:属性值;}
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
```
> 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式表</title>
<style>
/* 其中body h1 h2 p都是选择器，background-color、font-size、color、margin-left都是属性*/
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>
<p>这个段落的左外边距为 50 像素：50px</p>
</body>
</html>
```
## CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
> 代码示例
```css
p {color:red;text-align:center;}
```
## CSS选择器
### 标签选择器
HTML页面由很多标签组成，例如图像标记`<img>`、超链接标记`<a>`、表格标记`<table>`等
> 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<style>
/*所有p标记设置背景颜色，黄色*/
p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
```
### 类别选择器
使用标记选择器非常快捷，但是有一定的局限性。如果声明标记选择器，那么页面中所有该标记内容会有相应变化。假如页面有三个`<h2>`，如果想每个`<h2>`显示效果不一样，这样标记选择器就无法实现，这时候需要引入类别选择器。
> 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<style>
/*三个h2，不同颜色*/
.one
{
color:yellow;
}
.two
{
color:red;
}
.three
{
color:black;
}
</style>
</head>
<body>
<h2 class="one">应用了选择器one</h2>
<p>正文内容1</p>
<h2 class="two">应用了选择器two</h2>
<p>正文内容2</p>
<h2 class="three">应用了选择器three</h2>
<p>正文内容3</p>
</body>
</html>
```
### id选择器
id选择器是通过HTML页面中的id属性来选择添加样式，与类别选择器相同。但是要注意的是，由于HTML页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。
命名id选择器要以"#"号开始，后加HTML标记id的属性值。
> 示例代码
```html
<!DOCTYPE html>
<html>
<head>
<style>
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
```
## 在页面中包含CSS
行内式就是代码写在具体网页中的一个元素内；比如：`<div style="color:#f00"></div>`
内嵌式就是在`</head>`前面写；比如：`<style type="text/css">.div{color:#F00}</style>`
外部式就是引用外部css文件；比如：`<link href="css.css" type="text/css" rel="stylesheet" />`
### 行内式
> 示例代码
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
```
### 内嵌式
> 示例代码
```xml
<!!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
</body>
</html>
```
### 链接式
> 示例代码
```xml
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
```
## CSS小结
CSS 可以来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距等。
如果需要更多关于 CSS 的信息，请参阅 CSS 实例, CSS 参考手册和CSS3 教程。
CSS参考教程如下：
http://www.runoob.com/css/css-tutorial.html
# JavaScript
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 Web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
## 为什么学习 JavaScript?
Web前端开发人员必须学会HTML、CSS和JavaScript技术。
HTML 定义了网页的内容
CSS 描述了网页的布局和样式
JavaScript 网页的行为
## JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
## 常用的一些功能
### 直接写入 HTML 输出流
> 代码示例
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript教程</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
```
> 运行结果
> 说明
您只能在 HTML 输出中使用 `document.write`。如果您在文档加载后使用该方法，会覆盖整个文档。
### 对事件的反应
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
代码示例
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript教程</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
```
> 常见的HTML事件
| 事件 | 描述 |
| :---------- | :--------------------------- |
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
### 改变 HTML 内容
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
```
`document.getElementById("some id")`。这个方法是 HTML DOM 中定义的。
`DOM (Document Object Model)`（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
### 改变 HTML 样式
```html
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
```
### 验证输入
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
```
## 小结
更多学习内容参考
http://www.runoob.com/js/js-tutorial.html
