first push
This commit is contained in:
hututu
commit
846b75aa68
112
1.Html/1-认识前端.md
Normal file
112
1.Html/1-认识前端.md
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
## 1、什么是前端
|
||||||
|
前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
|
||||||
|
|
||||||
|
前端设计一般可以理解为网站的视觉设计，比如 UI 设计；
|
||||||
|
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
|
||||||
|
|
||||||
|
前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。
|
||||||
|
|
||||||
|
**HTML** 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构；
|
||||||
|
**CSS** 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等；
|
||||||
|
**JavaScript** 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 2、网页组成
|
||||||
|
|
||||||
|
一个网页的组成部分主要包括下面几个部分：**文字、图片、输入框、视频、音频、超链接** 等。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 3、Web 标准
|
||||||
|
|
||||||
|
说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
|
||||||
|
|
||||||
|
W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。简单的说就是就是确定 Web 页面的语法格式和规范的。
|
||||||
|
|
||||||
|
与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。
|
||||||
|
|
||||||
|
那么 Web 标准规范了下面三个部分：
|
||||||
|
|
||||||
|
- HTML 标准（结构标准 ），相当人的骨架结构。
|
||||||
|
- CSS 样式（表现）标准 ， 相当于给人化妆变的更漂亮。
|
||||||
|
- JavaScript 行为标准 ， 相当与人在唱歌，页面更灵动。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 4、浏览器内核
|
||||||
|
|
||||||
|
浏览器内核是一个浏览器的核心部分，也就是「**渲染引擎**」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
|
||||||
|
|
||||||
|
这里涉及到一个「**兼容性问题**」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**内核和对应的浏览器：**
|
||||||
|
|
||||||
|
<u>`trident`</u>: IE windows
|
||||||
|
<u>`gecko`</u>: firefox 跨平台
|
||||||
|
<u>`webkit`</u>: safari/chrome
|
||||||
|
<u>`presto`</u>: opera 渲染速度最快
|
||||||
|
<u>`blink`</u> : google/opera 共同开发
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 5、认识 HTML
|
||||||
|
HTML 全程为：**超文本标记语言**（Hyper Text Markup Language）。这里超文本就是超链接的意思，就是可以实现页面的跳转。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 6、HTML 结构标准
|
||||||
|
|
||||||
|
HTML 基本结构如下：
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html> <!-- 文档声明 -->
|
||||||
|
<html> <!-- <html></html> 定义文档整体 -->
|
||||||
|
<head> <!-- <head></head> 对页面进行设置，定义标题，外链css,js文件等 -->
|
||||||
|
<meta charset="UTF-8"> <!-- 定义网页的编码格式 -->
|
||||||
|
<title>Document</title> <!-- 定义页面标题 -->
|
||||||
|
</head>
|
||||||
|
<body> <!-- 编写网页上显示的内容 -->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
- `<!DOCTYPE html>` 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。
|
||||||
|
- `<html></html>` 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。
|
||||||
|
- `<head></head>` 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。
|
||||||
|
- `<body></body>` 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 7、html 标签分类
|
||||||
|
|
||||||
|
**单标签** 没有闭合标签 单标签内以 /结尾
|
||||||
|
|
||||||
|
` <! Doctype html>`
|
||||||
|
**双标签** 双标签 由开始标签+内容+结束标签 构成
|
||||||
|
|
||||||
|
`<html> </html> ，<head></head>， <title></title>`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##8、html 标签关系分类
|
||||||
|
|
||||||
|
包含（嵌套关系）` <head><title></title></head>` 父子关系
|
||||||
|
并列关系 `<head></head><body></body>` 兄弟姐妹
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 9、开发工具
|
||||||
|
|
||||||
|
前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。
|
||||||
|
|
||||||
|
那么我推荐大家使用的是「[Sublime Text 3](https://www.sublimetext.com/)」 代码编辑器，它虽小巧精致，但有着炫酷的界面，并且有大量的插件可以使用，大大提高了代码的编写效率。
|
||||||
|
|
||||||
|
提到 Web 开发工具不得不提到 JebBrain 全家桶的「 [Webstorm](http://www.jetbrains.com/webstorm/) 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。
|
||||||
|
|
||||||
|
还有近些年来崛起的【visual studio code】，已经成为前端开发的主流工具。
|
||||||
|
|
||||||
|
建议初学者初期使用Sublime等文本编辑器，太过于智能的编辑器确实会带给我们极大地便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。
|
||||||
|
|
||||||
302
1.Html/2-常用标签.md
Normal file
302
1.Html/2-常用标签.md
Normal file
@ -0,0 +1,302 @@
|
|||||||
|
## 1、标签
|
||||||
|
|
||||||
|
### 1.1、单标签
|
||||||
|
|
||||||
|
- 注释标签 ：`<!-- 注释 --> `
|
||||||
|
- 换行标签：`<br> 或 <br />`
|
||||||
|
- 水平线标签：`<hr> 或 <hr />`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 1.2、双标签
|
||||||
|
|
||||||
|
- 段落标签：`<p></p>`
|
||||||
|
> 特点：上下自动生成空白行。br 换行不会生成空白行。
|
||||||
|
|
||||||
|
- 标题标签：`<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>`
|
||||||
|
> h1 在一个页面里只能出现一次。（作用是：便于SEO 搜索引擎优化）
|
||||||
|
|
||||||
|
- 文本标签：`<font size="" color=""></font>`
|
||||||
|
- 文本格式化标签
|
||||||
|
|
||||||
|
**文本加粗** ：`<strong></strong> <b></b>`
|
||||||
|
> 工作里尽量使用strong，对于盲人来说 strong有语义强调的功能。
|
||||||
|
|
||||||
|
**文本倾斜：**`<em></em> <i></i> <!-- 工作里尽量使用em，原因同strong -->`
|
||||||
|
**删除线标签：**`<del></del> <s></s> <!--工作里尽量使用del -->`
|
||||||
|
**下划线标签：**`<ins></ins> <u></u> <!--工作里尽量ins-->`
|
||||||
|
**图片标签：**`<img src="" alt="" title=""width="" height="" >`
|
||||||
|
|
||||||
|
> src : 图片的来源（必写属性）
|
||||||
|
> alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求）
|
||||||
|
> title : 提示文本，鼠标放到图片上显示的文字
|
||||||
|
> width : 图片宽度
|
||||||
|
> height : 图片高度
|
||||||
|
>
|
||||||
|
> PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 2、超链接
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="" title="" target="">填写内容</a>
|
||||||
|
```
|
||||||
|
> `href` ：去往的路径、跳转的页面， 必写属性
|
||||||
|
> `title` ： 提示文本，鼠标放到链接上显示的文字
|
||||||
|
> `target="_self"` （默认值），在自身页面打开（关闭自身页面，打开链接页面）
|
||||||
|
>
|
||||||
|
> `Target=”_blank”` 打开新页面，（自身页面不关闭，打开一个新的链接页面）
|
||||||
|
>
|
||||||
|
> PS：当 href 的值为 `javascript:void(0);` 或 `javascript:;` ，表示超链接不做任何事情，不做任何跳转。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2.1、锚链接
|
||||||
|
|
||||||
|
我们先搞清楚什么是锚链接：
|
||||||
|
|
||||||
|
锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。
|
||||||
|
|
||||||
|
锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p id="AAA">
|
||||||
|
|
||||||
|
</p>
|
||||||
|
...
|
||||||
|
<a href="#AAA"></a> // 超链接到锚点
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2.2、空链
|
||||||
|
|
||||||
|
不知道链接到那个页面的时候，用空链
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="#">空链</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
> PS：空链相当于 `#top`，实际点击此链接的时候会跳转到页首的位置。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2.3、压缩文件下载
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="../../xxx.rar"></a>
|
||||||
|
```
|
||||||
|
|
||||||
|
> PS：不推荐使用
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2.4、超链接优化写法
|
||||||
|
|
||||||
|
```html
|
||||||
|
<base target="_blank"> // 让所有的超链接都在新窗口打开
|
||||||
|
```
|
||||||
|
|
||||||
|
> PS：写的位置在 head 里面。
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 3、特殊字符
|
||||||
|
|
||||||
|
| 特殊符号 | 字符代码 |
|
||||||
|
| ---- | ---------- |
|
||||||
|
| (空格) | ` ` |
|
||||||
|
| < | `<` |
|
||||||
|
| > | `>` |
|
||||||
|
| & | `&` |
|
||||||
|
| ¥ | `¥` |
|
||||||
|
| © | `©` |
|
||||||
|
| ® | `®` |
|
||||||
|
| × | `×` |
|
||||||
|
| ÷ | `&devide;` |
|
||||||
|
|
||||||
|
参考链接：[HTML特殊字符编码对照表](http://www.jb51.net/onlineread/htmlchar.htm)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 4、列表
|
||||||
|
|
||||||
|
### 4.1、无序列表
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ul type="">
|
||||||
|
<li></li> <!-- 列表项 -->
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
......
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
> `type="square"` ：小方块
|
||||||
|
> `type="disc"` ： 实心小圆圈
|
||||||
|
> `type="circle"` ： 空心小圆圈
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 4.2、有序列表
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ol type="" start="">
|
||||||
|
<li></li> <!-- 列表项 -->
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
......
|
||||||
|
</ol>
|
||||||
|
```
|
||||||
|
|
||||||
|
> `type="1,a,A,i,I"` ，type的值可以为1,a,A,i,I
|
||||||
|
>
|
||||||
|
> `start="3"` 决定了开始的位置。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 4.3、自定义列表
|
||||||
|
|
||||||
|
```html
|
||||||
|
<dl>
|
||||||
|
<dt></dt> <!-- 小标题 -->
|
||||||
|
<dd></dd> <!-- 解释标题 -->
|
||||||
|
<dd></dd> <!-- 解释标题 -->
|
||||||
|
</dl>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 5、音乐标签
|
||||||
|
|
||||||
|
```html
|
||||||
|
<embed src="1.mp3" hidden="true"></embed>
|
||||||
|
```
|
||||||
|
|
||||||
|
> `hidden="true"` 隐藏音乐标签
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 6、滚动标签
|
||||||
|
|
||||||
|
```html
|
||||||
|
<marquee width="" height="" bgcolor="" behavior="" direction="" loop="">
|
||||||
|
</marquee>
|
||||||
|
```
|
||||||
|
|
||||||
|
> width：宽度
|
||||||
|
> height：高度
|
||||||
|
> bgcolor：背景颜色
|
||||||
|
>
|
||||||
|
> behavior：设置滚动的方式
|
||||||
|
> alternate：在两端之间来回滚动
|
||||||
|
> scroll：由一端滚动到另一端，会重复
|
||||||
|
> slide：由一端滚动到另一端，不会重复
|
||||||
|
>
|
||||||
|
> direction：设置滚动的方向
|
||||||
|
> left | right | up | down
|
||||||
|
> loop：滚动次数（-1：一直滚动下去）
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 7、head相关知识
|
||||||
|
|
||||||
|
### 7.1、charset编码
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
```
|
||||||
|
|
||||||
|
> ASCII/ANSI/Unicode：英语
|
||||||
|
> GBK ：亚洲通用字符集
|
||||||
|
> GB2312：中文简体
|
||||||
|
> Big5 ：台澳港繁体
|
||||||
|
> UTF-8：世界通用字符集
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 7.2、name
|
||||||
|
|
||||||
|
- 关键字
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="keywords" content="">
|
||||||
|
```
|
||||||
|
|
||||||
|
> 告诉搜索引擎你的站点的关键字。SEO优化使用
|
||||||
|
|
||||||
|
- 网页描述
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="discription" content="">
|
||||||
|
```
|
||||||
|
|
||||||
|
> 告诉搜索引擎你的站点的主要内容。这个description是给SEO和用户看的。
|
||||||
|
|
||||||
|
- 作者
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="author" content="名字">
|
||||||
|
```
|
||||||
|
|
||||||
|
> 告诉搜索引擎你的站点的制作者
|
||||||
|
|
||||||
|
- 文件检索
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="robots" content="all | none | index | noindex | follow | nofollow">
|
||||||
|
```
|
||||||
|
|
||||||
|
> 有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
|
||||||
|
> 其中的属性说明如下：
|
||||||
|
> all：（默认）文件将被检索，且页面上的链接可以被查询；
|
||||||
|
> none：文件将不被检索，且页面上的链接不可以被查询；
|
||||||
|
> index：文件将被检索；
|
||||||
|
> follow：页面上的链接可以被查询；
|
||||||
|
> noindex：文件将不被检索，但页面上的链接可以被查询；
|
||||||
|
> nofollow：文件将不被检索，页面上的链接可以被查询。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 7.3、http-equiv 网页重定向
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta http-equiv="reflesh" content="5; http://www.google.com">
|
||||||
|
```
|
||||||
|
|
||||||
|
> 网页自动跳转：网页5秒后自动跳转到谷歌主页
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 7.4、链接外部样式表
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" type="text/css" href="1.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
> `rel="stylesheet"`：链接的是什么？样式表还是图标
|
||||||
|
> `type="text/css" type="text/css"`：规定链接文件的MIME类型，就是说链接文件时css还是js
|
||||||
|
> `href="1.css"`：链接的文件路径
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 7.5、设置 icon 图标
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="icon" href="1.ico">
|
||||||
|
```
|
||||||
|
|
||||||
289
1.Html/3-表格.md
Normal file
289
1.Html/3-表格.md
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
## 1、表格
|
||||||
|
|
||||||
|
### 简单的表格
|
||||||
|
|
||||||
|
```
|
||||||
|
<table> 写· <!-- table 声明是一个表格 -->
|
||||||
|
<tr> <!-- tr 声明一行 -->
|
||||||
|
<td>第一行第一列格中的内容</td> <!--td 声明一列 -->
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 表格（table） 的相关标签
|
||||||
|
|
||||||
|
| table | 声明是个表格 |
|
||||||
|
| ------- | ------------------ |
|
||||||
|
| tr | 声明一行 |
|
||||||
|
| td | 声明一列 |
|
||||||
|
| caption | 声明表格标题 |
|
||||||
|
| th | 声明表格表头单元格 |
|
||||||
|
| thead | 表格头部 |
|
||||||
|
| tbody | 表格主体 |
|
||||||
|
| tfoot | 表格结尾 |
|
||||||
|
|
||||||
|
> thead, tbody, tfoot 没有实际效果 只是响应 html5的语义化标签
|
||||||
|
|
||||||
|
### 1.1、标准结构
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<caption>表格标题</caption>
|
||||||
|
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
> 写 `<thead> <tbody> <tfoot>`对SEO更好，不写也没问题。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 1.2、常见写法
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table width="300px" height="300px" border="5" cellspacing="10px" cellpadding="0" bgcolor="pink" align="center" >
|
||||||
|
<tr>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
<td>窗外的麻雀</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
>width（宽度）
|
||||||
|
>height（高度）
|
||||||
|
>border（边框宽度）
|
||||||
|
>cellspacing（单元格与单元格的距离）
|
||||||
|
>cellpadding（内容距边框的距离）
|
||||||
|
>bgcolor（表格背景颜色）
|
||||||
|
>align=”left | right | center”
|
||||||
|
> 如果直接给表格用align=”center” 表格居中
|
||||||
|
> 如果给tr或者td使用 ，tr或者td内容居中。
|
||||||
|
|
||||||
|
#### **边框变成单实线的方法** border-collapse
|
||||||
|
|
||||||
|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
|
||||||
|
| -------- | ------------------------------------------------------------ |
|
||||||
|
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
|
||||||
|
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
|
||||||
|
|
||||||
|
## 2、快速建表格的方式
|
||||||
|
|
||||||
|
`table>tr*3>td*5 + tab` ： 建立3行5列的表格
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 3、表头
|
||||||
|
|
||||||
|
`<caption></caption>`：位于table标签和tr标签之间
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<caption>表头</caption>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 4、单元格合并
|
||||||
|
|
||||||
|
table 通过colspan 属性实现横向合并
|
||||||
|
|
||||||
|
通过rowspan 属性实现纵向合并
|
||||||
|
|
||||||
|
> colspan和rowspan 的属性值都是数字
|
||||||
|
>
|
||||||
|
> 如： colspan="3"
|
||||||
|
>
|
||||||
|
> rowspan="4"
|
||||||
|
|
||||||
|
`<td colspan=“2”>填写内容</td>`：合并到同一行的单元格，合并行数为2
|
||||||
|
|
||||||
|
`<td rowspan=“3”>填写内容</td>` ：合并到同一列的单元格，合并列数为3
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table border="2" cellspacing="0" width="400" height="100" align="center">
|
||||||
|
<caption><strong>表头</strong></caption>
|
||||||
|
<tr align="center" bgcolor="yellow" height="100">
|
||||||
|
<td colspan="2">在电线杆上多嘴</td>
|
||||||
|
<!-- <td><strong>2</strong></td> -->
|
||||||
|
<td>在电线杆上多嘴</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr align="center" bgcolor="#CCC" height="100">
|
||||||
|
<td>在电线杆上多嘴</td>
|
||||||
|
<td>在电线杆上多嘴</td>
|
||||||
|
<td rowspan="2">在电线杆上多嘴</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr align="center" bgcolor="#CCC" height="100">
|
||||||
|
<td>在电线杆上多嘴</td>
|
||||||
|
<td>在电线杆上多嘴</td>
|
||||||
|
<!-- <td><strong>3</strong></td> -->
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 5、表格标题
|
||||||
|
|
||||||
|
```html
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
```
|
||||||
|
|
||||||
|
> 注意：将td改为th
|
||||||
|
>
|
||||||
|
> 特点：标题的文字自动加粗水平居中对齐
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 6、边框颜色
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table bordercolor=""></table>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 7、内容在上下方向的对齐方式
|
||||||
|
|
||||||
|
```html
|
||||||
|
<tr>
|
||||||
|
<td valign="bottom">张三</td>
|
||||||
|
</tr>
|
||||||
|
```
|
||||||
|
|
||||||
|
> `valign="top | middle | bottom"`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 8、补充
|
||||||
|
|
||||||
|
**细线表格：**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table width="500" height="300" bgcolor="green" cellspacing="1" >
|
||||||
|
<tr bgcolor="white">
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr bgcolor="white">
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr bgcolor="white">
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr bgcolor="white">
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
> 将背景作为边框来实现。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**单元格间隔**：
|
||||||
|
|
||||||
|
```css
|
||||||
|
border-spacing: 10px;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**无内容时单元格的设置：**
|
||||||
|
|
||||||
|
```css
|
||||||
|
empty-cells:show/hide /* 当单元格无内容时，是否显示该单元格的边框区域*/
|
||||||
|
```
|
||||||
|
|
||||||
|
定义单元格行和列的算法（加快运行速度）
|
||||||
|
|
||||||
|
```css
|
||||||
|
table-layout:auto/fixed;
|
||||||
|
/*定义表格的布局算法，设置为fixed，内容超出单元格的宽度则固定不变，如果没有设置宽度则平均分配；设置auto时则随内容宽度而定。*/
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**20181010 补充：**
|
||||||
|
|
||||||
|
设置表格较小，但是内容过大的话，为了不使的表格被撑大，可以设置一个属性：`table-layout:fixed;` 固定表格的宽高，加快计算机的运行速度。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 作业
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 
|
||||||
|
|
||||||
|
|
||||||
34
3.javascript/00-编程语言.md
Normal file
34
3.javascript/00-编程语言.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
## 编程语言
|
||||||
|
|
||||||
|
### 编程
|
||||||
|
|
||||||
|
**编程**：让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
|
||||||
|
|
||||||
|
**计算机程序**：就是计算机所执行的一系列的**指令集合**，而程序全部都是用我们所掌握的语言来编写的，所以人们如果要控制计算机，则需要通过计算机语言向计算机发出命令。
|
||||||
|
|
||||||
|
### 计算机语言
|
||||||
|
|
||||||
|
**计算机语言**：人与计算机之间通讯的语言。它是人与计算机之间传递信息的媒介，是用来控制计算机的一系列指令。
|
||||||
|
|
||||||
|
计算机语言的种类非常的多，总的来说可以分成三大类：机器语言、汇编语言和高级语言。
|
||||||
|
|
||||||
|
计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。
|
||||||
|
|
||||||
|
### 编程语言
|
||||||
|
|
||||||
|
通过类似于人类语言的 ”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言。不同的编程语言，有不同的语法，必须遵守。
|
||||||
|
|
||||||
|
如今通用的编程语言有两种形式：汇编语言和高级语言。
|
||||||
|
|
||||||
|
- **汇编语言**：与机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆。
|
||||||
|
|
||||||
|
- **高级语言**：主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，比如：C语言、C++、Java、C#、PHP、JavaScript、Python、Objective-C、Swift、Go语言等。
|
||||||
|
|
||||||
|
### 编译器
|
||||||
|
|
||||||
|
高级语言所编写的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个编译器。
|
||||||
|
|
||||||
|
编译器可以将我们所编写的源代码转换（翻译）为机器语言，这也被称为二进制化。
|
||||||
|
|
||||||
|
|
||||||
453
3.javascript/01-JS简介.md
Normal file
453
3.javascript/01-JS简介.md
Normal file
@ -0,0 +1,453 @@
|
|||||||
|
|
||||||
|
## JavaScript背景
|
||||||
|
|
||||||
|
Web前端有三层：
|
||||||
|
|
||||||
|
- HTML：从语义的角度，描述页面**结构**
|
||||||
|
|
||||||
|
- CSS：从审美的角度，描述**样式**（美化页面）
|
||||||
|
|
||||||
|
- JavaScript：从交互的角度，描述**行为**（实现业务逻辑和页面控制）
|
||||||
|
|
||||||
|
### 发展历史
|
||||||
|
|
||||||
|
JavaScript诞生于**1995年**。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。
|
||||||
|
|
||||||
|
JavaScript是由**网景**公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，因市场宣传需要，改名为 JavaScript。
|
||||||
|
|
||||||
|
JavaScript是Sun注册并授权给Netscape使用的商标。后来 Sun 公司 被Oracle收购，JavaScript版权归Oracle所有。
|
||||||
|
|
||||||
|
> 备注：由于 Sun 公司当时的Java 语言特别火，所以为了傍大牌，就借势改名为JavaScript。如同“北大”和“北大青鸟”的关系。“北大青鸟”就是傍“北大”大牌。
|
||||||
|
|
||||||
|
> 同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。
|
||||||
|
|
||||||
|
1996年，微软为了抢占市场，推出了`JScript`在IE3.0中使用。
|
||||||
|
|
||||||
|
1996年11月网景公司将JS提交给ECMA(国际标准化组织)成为国际标准，用于对抗微软。
|
||||||
|
|
||||||
|
|
||||||
|
JavaScript是世界上用的最多的**脚本语言**。
|
||||||
|
|
||||||
|
|
||||||
|
### JavaScript的发展：蒸蒸日上
|
||||||
|
|
||||||
|
2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以很多浏览器就推出了屏蔽广告功能。
|
||||||
|
|
||||||
|
2004年，JavaScript命运开始改变。那一年，**谷歌公司开始带头使用Ajax技术**，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如，当我们在百度搜索框搜文字时，输入框下方的智能提示，可以通过Ajax实现。比如，当我们注册网易邮箱时，能够及时发现用户名是否被占用，而不用调到另外一个页面。从2005年开始，几乎整个B/S开发界都在热情地追捧AJAX。
|
||||||
|
|
||||||
|
2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。**JavaScript在移动页面中，也是不可或缺的**。并且这一年，互联网开始标准化，按照W3C规则三层分离，JavaScript越来越被重视。
|
||||||
|
|
||||||
|
2010年，人们更加了解**HTML5技术**，**HTML5推出了一个东西叫做Canvas**（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。
|
||||||
|
|
||||||
|
2011年，**Node.js诞生**，使JavaScript能够开发服务器程序了。
|
||||||
|
|
||||||
|
如今，**WebApp**已经非常流行，就是用**网页技术开发手机应用**。手机系统有iOS、安卓。比如公司要开发一个“携程网”App，就需要招聘三队人马，比如iOS工程师10人，安卓工程师12人，前端工程师8人。共30人，开发成本大；而且如果要做需求迭代，就要改3个版本。现在，假设公司都用web技术，用html+css+javascript这一套技术就可以开发多种终端的页面。也易于迭代（网页一改变，所有的终端都生效了）。
|
||||||
|
|
||||||
|
虽然目前WebApp（Web应用）在功能和性能上的体验远不如Native App（原生应用），但是“在原生App中内嵌一部分H5页面”已经是一种趋势。
|
||||||
|
|
||||||
|
JavaScript的发展，正在大放异彩，正如周爱民的《JavaScript语言精髓与编程实战》中所描述的那样：
|
||||||
|
|
||||||
|
> 是ECMA赋予了JavaScript新的能力和活力。
|
||||||
|
|
||||||
|
> 在2015年6月，ES6发布了。这个ECMAScript版本几乎集成了当时其他语言梦寐以求的所有明星特性，并优雅地、不留后患地解决了几乎所有的JavaScript遗留问题—当然，其中那些最大的、最本质的和核心的问题其实都已经在ES5推出时通过“严格模式（strict mode）”解决了。
|
||||||
|
|
||||||
|
> ES6提出了四大组件：Promise、类、模块、生成器/迭代器。这事实上是在并行语言、面向对象语言、结构化语言和函数式语言四个方向上的奠基工作。相对于这种重要性来说，其他类似于解构、展开、代理等看起来很炫很实用的特性，反倒是浮在表面的繁华了。
|
||||||
|
|
||||||
|
> 主流引擎厂商开始通过ES6释放出它们的能量，于是JavaScript在许多新的环境中被应用起来，大量的新技术得以推动，例如，WebAssembly、Ohm、Deeplearn.js、TensorFlow.js、GPU.js、GraphQL、NativeScript等。有了Babel这类项目的强大助力，新规范得以“让少数人先用起来”，而标准的发布也一路披荆斩棘，以至于实现了“一年一更”。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## JavaScript介绍
|
||||||
|
|
||||||
|
### JavaScript入门易学性
|
||||||
|
|
||||||
|
- JavaScript对初学者比较友好、简单易用。可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
|
||||||
|
|
||||||
|
- JavaScript是有界面效果的（相比之下，C语言只有白底黑字）。
|
||||||
|
|
||||||
|
- JavaScript是**弱变量类型**的语言，变量只需要用 var/let/const 来声明。而Java中变量的声明，要根据变量的类型来定义。
|
||||||
|
|
||||||
|
比如Java中需要定义如下变量：
|
||||||
|
|
||||||
|
```java
|
||||||
|
int a;
|
||||||
|
float a;
|
||||||
|
double a;
|
||||||
|
String a;
|
||||||
|
boolean a;
|
||||||
|
```
|
||||||
|
|
||||||
|
而JavaScript中，只需要用一种方式来定义：
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
// ES5 写法
|
||||||
|
var a;
|
||||||
|
|
||||||
|
// ES6 写法
|
||||||
|
const a;
|
||||||
|
let a;
|
||||||
|
```
|
||||||
|
|
||||||
|
### JavaScript是脚本语言
|
||||||
|
|
||||||
|
JavaScript是脚本语言。
|
||||||
|
|
||||||
|
JavaScript运行在用户的终端网页上，而不是服务器上，此时我们称之为“**前端语言**”。就是服务于页面的交互和视觉，不能直接操作数据库。
|
||||||
|
|
||||||
|
**后台语言**是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。
|
||||||
|
|
||||||
|
备注：Node.js是用 JavaScript 开发的，我们也可以用 Node.js 技术进行服务器端编程。
|
||||||
|
|
||||||
|
### JavaScript的组成
|
||||||
|
|
||||||
|
JavaScript基础分为三个部分：
|
||||||
|
|
||||||
|
- **ECMAScript**：JavaScript 的**语法标准**。包括变量、表达式、运算符、函数、if语句、for语句等。
|
||||||
|
|
||||||
|
- **DOM**：Document Object Model（文档对象模型），操作**页面上的元素**的API。比如让盒子移动、变色、改变大小、轮播图等等。
|
||||||
|
|
||||||
|
- **BOM**：Browser Object Model（浏览器对象模型），操作**浏览器部分功能**的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。
|
||||||
|
|
||||||
|
通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。
|
||||||
|
|
||||||
|
## JavaScript 的特点
|
||||||
|
|
||||||
|
### 特点1：解释型语言
|
||||||
|
|
||||||
|
JavaScript 是解释型语言，不需要事先被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。
|
||||||
|
|
||||||
|
什么是「解释型语言」？详见下一段。
|
||||||
|
|
||||||
|
> 由于少了实现编译这一步骤，所以解释型语言开发起来尤为方便，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。
|
||||||
|
|
||||||
|
### 特点2：单线程
|
||||||
|
|
||||||
|
### 特点3：ECMAScript标准
|
||||||
|
|
||||||
|
ECMAScript是一种由 ECMA 国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定和发布的脚本语言规范。
|
||||||
|
|
||||||
|
JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
|
||||||
|
|
||||||
|
简单来说，**ECMAScript不是一门语言，而是一个标准**。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
|
||||||
|
|
||||||
|
ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能力更强（也包含了很多新特性）。但是，浏览器的厂商不会那么快去追上这个标准，需要一段时间。
|
||||||
|
|
||||||
|
ECMA赋予了JavaScript新的能力和活力。
|
||||||
|
|
||||||
|
|
||||||
|
## 编程语言的分类
|
||||||
|
|
||||||
|
### 翻译器
|
||||||
|
|
||||||
|
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所编写的语言翻译成机器语言，计算机才能执行程序。**程序语言翻译成机器语言的工具，被称为翻译器**。
|
||||||
|
|
||||||
|
由此可见，所谓的“翻译”，指的是翻译成计算机能够执行的指令。
|
||||||
|
|
||||||
|
翻译器翻译的方式有两种：一种是**编译**，另一种是**解释**。两种方式之间的区别在于**翻译的时机**不同。
|
||||||
|
|
||||||
|
- **编译器**：在代码执行之前，事前把所有的代码一次性翻译好，生成中间代码文件，然后整体执行。
|
||||||
|
|
||||||
|
- **解释器**：边翻译，边执行（在代码执行时进行及时翻译，并立即执行）。当编译器以解释的方式运行时，也称之为解释器。
|
||||||
|
|
||||||
|
对应的语言，称之为“编译型语言”、“解释型语言”。
|
||||||
|
|
||||||
|
### 编译型语言
|
||||||
|
|
||||||
|
- 定义：事先把所有的代码一次性翻译好，然后整体执行。
|
||||||
|
|
||||||
|
- 优点：运行更快。
|
||||||
|
|
||||||
|
- 不足：移植性不好，不跨平台。
|
||||||
|
|
||||||
|
- 编译型语言举例：c、c++
|
||||||
|
|
||||||
|
比如说，c语言的代码文件是`.c`后缀，翻译之后文件是`.obj`后缀，系统执行的是 obj 文件；再比如， java 语言的代码文件是`.java`后缀，翻译之后的文件是`.class`后缀。（注意，Java 语言不是严格的 编译型语言，这个一会儿会讲）
|
||||||
|
|
||||||
|
### 解释型语言
|
||||||
|
|
||||||
|
- 定义：**边翻译边执行**（翻译一行，执行一行），不需要事先一次性翻译。
|
||||||
|
|
||||||
|
- 优点：移植性好，跨平台。
|
||||||
|
|
||||||
|
- 缺点：运行更慢。
|
||||||
|
|
||||||
|
- 解释型语言举例：JavaScript、php、Python。
|
||||||
|
|
||||||
|
### Java语言
|
||||||
|
|
||||||
|
Java 语言既不是编译型语言，也不是解释型语言。翻译过程：
|
||||||
|
|
||||||
|
（1）编译：`.java`代码文件先通过 javac 命令编译成`.class`文件。
|
||||||
|
|
||||||
|
（2）执行：`.class`文件再通过 jvm 虚拟机，解释执行。有了 jvm 的存在，让 java 跨平台了。
|
||||||
|
|
||||||
|
## 开始写第一行JavaScript代码
|
||||||
|
|
||||||
|
> JavaScript 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 js 代码，有哪几种方式。
|
||||||
|
|
||||||
|
### 方式1：行内式
|
||||||
|
|
||||||
|
**代码举例**：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<input type="button" value="点我点我" onclick="alert('千古壹号')" />
|
||||||
|
```
|
||||||
|
|
||||||
|
完整的可执行代码如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input type="button" value="点我点我" onclick="alert('千古壹号的方式1')" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**分析**：
|
||||||
|
|
||||||
|
- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），比如放在上面的 `onclick`点击事件中。
|
||||||
|
|
||||||
|
- 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS代码时，容易出错；引号多层嵌套时，也容易出错。
|
||||||
|
|
||||||
|
- 关于代码中的「引号」，在HTML标签中，我们推荐使用双引号, JS 中我们推荐使用单引号。
|
||||||
|
|
||||||
|
### 方式2、内嵌式
|
||||||
|
|
||||||
|
我们可以在html 页面的 `<body>` 标签里放入`<script type=”text/javascript”></script>`标签对儿，并在`<script>`里书写JavaScript 代码：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// 在这里写 js 代码
|
||||||
|
alert('千古壹号的方式2');
|
||||||
|
console.log('qianguyihao 方式2');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
**分析**：
|
||||||
|
|
||||||
|
- text表示纯文本，因为JavaScript也是一个纯文本的语言。
|
||||||
|
|
||||||
|
- 可以将多行JS代码写到 `<script>` 标签中。
|
||||||
|
|
||||||
|
- 内嵌式 JS 是学习时常用的方式。
|
||||||
|
|
||||||
|
### 方式3：引入外部的 JS 文件
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 引入外部的 js 文件 -->
|
||||||
|
<script src="tool.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
上面这段代码，依然是放到body标签里，可以和内嵌的js代码并列。
|
||||||
|
|
||||||
|
另外，引用外部 JS文件的 script 标签中间不可以再写代码。
|
||||||
|
|
||||||
|
**总结**：
|
||||||
|
|
||||||
|
我们在实战开发中，基本都是采用方式3，因为这种方式，可以确保 html 文件和 js 文件是分开的，有利于代码的结构化和复用。很少会有人把一大堆 js 代码塞到 html 文件里。
|
||||||
|
|
||||||
|
## JS一些简单的语法规则
|
||||||
|
|
||||||
|
学习程序，是有规律可循的，程序会有有相同的部分，这些部分就是一种规定，不能更改，我们成为：语法。
|
||||||
|
|
||||||
|
（1）**JavaScript对换行、缩进、空格不敏感。每一条语句以分号结尾**。
|
||||||
|
|
||||||
|
也就是说：
|
||||||
|
|
||||||
|
代码一：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script type="text/javascript">
|
||||||
|
alert("今天蓝天白云");
|
||||||
|
alert("我很高兴");
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
等价于代码二：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script type="text/javascript">
|
||||||
|
alert("今天蓝天白云");alert("我很高兴");
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
备注：每一条语句末尾要加上分号，虽然分号不是必须加的，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。
|
||||||
|
|
||||||
|
（2）所有的符号，都是英语的。比如**括号**、引号、分号。
|
||||||
|
|
||||||
|
如果你用的是搜狗拼音，**建议不要用shift切换中英文**（可以在搜狗软件里进行设置），不然很容易输入中文的分号；建议用ctrl+space切换中英文输入法。
|
||||||
|
|
||||||
|
（3）严格区分大小写。
|
||||||
|
|
||||||
|
## 注释
|
||||||
|
|
||||||
|
我们不要把 HTML、CSS、JavaScript三者的注释格式搞混淆了。
|
||||||
|
|
||||||
|
### HTML 的注释
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 我是注释 -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### CSS的注释
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
/*
|
||||||
|
我是注释
|
||||||
|
*/
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
注意：CSS只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`<style>`标签里面才算生效哦。
|
||||||
|
|
||||||
|
### JavaScript 的注释
|
||||||
|
|
||||||
|
单行注释：
|
||||||
|
|
||||||
|
```
|
||||||
|
// 我是注释
|
||||||
|
```
|
||||||
|
|
||||||
|
多行注释：
|
||||||
|
|
||||||
|
```
|
||||||
|
/*
|
||||||
|
多行注释1
|
||||||
|
多行注释2
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
补充：VS Code中，单行注释的快捷键是「Ctrl + /」，多行注释的默认快捷键是「Alt + Shift + A」。
|
||||||
|
|
||||||
|
当然，如果你觉得多行注释的默认快捷键不方便，我们还可以修改默认快捷键。操作如下：
|
||||||
|
|
||||||
|
VS Code --> 首选项 --> 键盘快捷方式 --> 查找“注释”这两个字 --> 将原来的快捷键修改为「Ctrl + Shift + /」。
|
||||||
|
|
||||||
|
## Javascript 输入输出语句
|
||||||
|
|
||||||
|
### 弹出警告框：alert语句
|
||||||
|
|
||||||
|
我们要学习的第一个语句，就是alert语句。
|
||||||
|
|
||||||
|
代码举例如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
alert('千古壹号');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**alert**（英文翻译为“警报”）的用途：**弹出“警告框”**。
|
||||||
|
|
||||||
|
`alert("")`警告框的效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这个警告框，在IE浏览器中长这样：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上面的代码中，如果写了两个alert()语句的话，网页的效果是：弹出第一个警告框，点击确定后，继续弹出第二个警告框。
|
||||||
|
|
||||||
|
### 控制台输出：console.log("")
|
||||||
|
|
||||||
|
`console.log("")`表示在控制台中输出。console表示“控制台”，log表示“输出”。
|
||||||
|
|
||||||
|
在Chrome浏览器中，按F12即可打开控制台，选择「console」栏，即可看到打印的内容。
|
||||||
|
|
||||||
|
`console.log("")`效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确。
|
||||||
|
|
||||||
|
普通人是不会在意控制台的，但是有些网站另藏玄机。有个很有意思的地方是，百度首页的控制台，悄悄地放了一段招聘信息：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
毕竟做前端的人是经常使用控制台的。
|
||||||
|
|
||||||
|
**总结**：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己调试用的。
|
||||||
|
|
||||||
|
### 弹出输入框：prompt()语句
|
||||||
|
|
||||||
|
`prompt()`就是专门用来弹出能够让用户输入的对话框。用得少，测试的时候偶尔会用。
|
||||||
|
|
||||||
|
JS代码如下：
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var a = prompt("请随便输入点什么东西吧");
|
||||||
|
console.log(a);
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码中，用户输入的内容，将被传递到变量 a 里面，并在控制台打印出来。
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**prompt()语句中，用户不管输入什么内容，都是字符串。**
|
||||||
|
|
||||||
|
**alert()和prompt()的区别：**
|
||||||
|
|
||||||
|
- alert() 可以直接使用。
|
||||||
|
- prompt() 会返回用户输入的内容。我们可以用一个变量，来接收用户输入的内容。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# **js代码中需要注意的问题**
|
||||||
|
|
||||||
|
1. 在一对script的标签中有错误的js代码，那么该错误的代码后面的js代码不会执行。
|
||||||
|
2. 如果第一对的script标签中有错误，不会影响后面的script标签中的js代码执行。
|
||||||
|
3. script标签里面可以写的内容：`type="text/javascript"` 标准写法，或者` language="JavaScript"`，都是可以省略的，原因是在html开头写了遵循h5标准。
|
||||||
|
4. script标签可以出现多对。
|
||||||
|
5. 如果使用引入外部js文件的方式，那么不要在script标签里面写任何js代码，如果想写，就新开一对script标签。
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user