网页组成的三部分
W3C 标准规定，网页主要由三部分组成：
-
结构：对应的是 HTML 语言
-
表现：对应的是 CSS 语言
-
行为：对应的是 JavaScript 语言
HTML/CSS/JavaScript，是编写网页最基础的语言，也被称为 "Web前端开发三剑客"。
HTML
HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的
HTML(HyperText Markup Language)：超文本标记语言：
-
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。
-
标记语言：由标签构成的语言 之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成 。
实现网页
实现页面，我们需要从以下三步进行实现：
1.新建文本文件，后缀名改为 .html
2.编写 HTML 结构标签
3.定义文字
html标签是根标签，下面有 head 标签和 body 标签这两个子标签。而 head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置
例子
<html>
<head>
<title>html 快速入门</title>
</head>
<body>
<h1>hello world</h1>
<img src="1.png" />
</body>
</html>
标签
编写基础标签 我们只需要在 body 标签中书写标签。
标题标签< h1> < h2> < h3> < h4> < h5> < h6> h1最大，h6最小。
字体标签：< font>
font：字体标签
-
face 属性：用来设置字体。如 "楷体"、"宋体"等
-
color 属性：设置文字颜色。颜色有三种表示方式
-
-
英文单词：red,pink,blue... 这种方式表示的颜色特别有限，所以一般不用。
-
rgb(值1,值2,值3)：值的取值范围：0~255 此种方式也就是三原色（红绿蓝）设置方式。 例如： rgb(255,0,0)。 这种书写起来比较麻烦，一般不用。
-
#值1 值2 值3：值的范围：00~FF 这种方式是rgb方式的简化写法，以后基本都用此方式。 值1表示红色的范围，值2表示绿色的范围，值3表示蓝色范围。例如： #ff0000
-
-
size 属性：设置文字大小
hr标签hr 标签在浏览器中呈现出 横线 的效果
居中标签 < center> 文本居中 </ center>
加粗、斜体、下划线标签
-
b：加粗标签
-
i：斜体标签
-
u：下划线标签，在文字的下方有一条横线
换行标签 < br>
段落标签 < br> 如果有一段文件比较长，不方便阅读，此时我们可以根据文章的内容适当的进行换行操作
段落标签< p>
图片、音频、视频标签
-
img：定义图片
-
-
src：规定显示图像的 URL（统一资源定位符）
-
height：定义图像的高度
-
width：定义图像的宽度
-
-
audio：定义音频。支持的音频格式：MP3、WAV、OGG
-
-
src：规定音频的 URL
-
controls：显示播放控件
-
-
video：定义视频。支持的音频格式：MP4, WebM、OGG
-
-
src：规定视频的 URL
-
controls：显示播放控件
-
尺寸单位：
height属性和width属性有两种设置方式：
-
像素：单位是px
-
百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
资源路径：
图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式
绝对路径：完整路径 这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。
相对路径：相对位置关系 找页面和其他资源的相对路径。
./ 表示当前路径
../ 表示上一级路径
../../ 表示上两级路径
超链接标签
a 标签属性：
-
href：指定访问资源的URL
-
target：指定打开资源的方式
-
-
_self：默认值，在当前页面打开
-
_blank：在空白页面打开
-
_parent：在父窗口中打开链接。
-
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
-
表格标签
格可以使用如下标签定义
-
table ：定义表格
-
-
border：规定表格边框的宽度
-
width ：规定表格的宽度
-
cellspacing：规定单元格之间的空白
-
-
tr ：定义行
-
-
align：定义表格行的内容对齐方式
-
-
td ：定义单元格
-
th：定义表头单元格
布局标签
>
div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果
表单标签
表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据库进行操作，比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作
表单组成：
表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。
form标签属性
action：规定当提交表单时向何处发送表单数据，该属性值就是URL 以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
method取值有如下两种
get:
默认值。如果不设置method属性则默认就是该值
请求参数会拼接在URL后边
url的长度有限制 4KB
post:
浏览器会将数据放到http请求消息体中
请求参数无限制的
表单项标签
<input>：表单项，通过type属性控制输入形式 ,不同的表单项标签有不同的展示效果
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样
：定义下拉列表 定义列表项
-
以上标签项的内容要想提交，必须得定义
name属性。 -
每一个标签都有id属性，id属性值是唯一的标识。
-
单选框、复选框、下拉列表需要使用
value属性指定提交的值。
css
CSS 是一门语言，用于控制网页表现
css 引入方式
其实就是 css 代码和 html 代码的结合方式。CSS 引入 HTML有三种方式：
1.内联样式：在标签内部使用style属性，属性值是css属性键值对
2.css 选择器
元素选择器 元素名称{color: red;}
id选择器 #id属性值{color: red;}
类选择器 .class属性值{color: red;}
JavaScript
JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
控制网页行为的：JavaScript 改变页面内容、修改指定元素的属性值、对表单进行校验等
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
-
内部脚本：将 JS代码定义在HTML页面中
-
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
内部脚本在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
外部脚本
第一步：定义外部 js 文件。如定义名为 demo.js的文件
第二步：在页面中引入外部的js文件
输出语句
window.alert() 写入警告框
document.write() 写入 HTML 输出
console.log() 写入浏览器控制台
变量
格式 var 变量名 = 数据值;
js 中的变量名命名也有如下规则，和java语言基本都相同
-
组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
-
数字不能开头
-
建议使用驼峰命名
JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样
作用域：全局变量
变量可以重复定义 var可重复定义 let 不允许重复定义
ECMAScript 6 新增了 let关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
原始数据类型
number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
运算符
-
一元运算符：++，--
-
算术运算符：+，-，*，/，%
-
赋值运算符：=，+=，-=…
-
关系运算符：>，<，>=，<=，!=，==，===…
-
逻辑运算符：&&，||，!
-
三元运算符：条件表达式 ? true_value : false_value
==和===区别
==会自动类型转换比较
判断类型是否一样，如果不一样，则进行类型转换
再去比较其值
===是js 中的全等于 ，不自动类型转换比较
判断类型是否一样，如果不一样，直接返回false 再去比较其值
类型转换
其他类型转为number
string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN。将 string 转换为 number 有两种方式
使用 + 正号运算符
使用 parseInt() 函数(方法)
boolean 转换为 number 类型：true 转为1，false转为0
-
number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
-
string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
-
null类型转换为 boolean 类型是 false
-
undefined 转换为 boolean 类型是 false
-
流程控制语句
-
-
if
-
switch
-
for
-
while
-
dowhile
-
-
建议for循环小括号中定义的变量使用let
-
函数
-
function 函数名(参数1,参数2..){ 要执行的代码 }
-
var 函数名 = function (参数1,参数2..){ 要执行的代码 }
-
形式参数不需要类型。因为JavaScript是弱类型语言
-
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
-
JS中，函数调用可以传递任意个数参数 但必须有变量去接收
1966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
