HTML + CSS + JavaScript 两小时快速入门教程

乱世烽火

1. html

1.1 HTML的布局

HTML + CSS + JavaScript 两小时快速入门教程 145436tua0i34l30hec731.jpg

文档布局介绍：

文档声明：用于声明当前HTML的版本，是HTML5的声明
html根标签：除文档声明以外，其它内容全部放在根标签html内部
文档头部设置：head标签，是当前页面的设置信息，外部引入文件
文档表现内容：body标签，里边的内容会表现到欣赏器页面上

1.2 HTML语法规范

扩展名是html或者htm

html标签不区分大小写

1.3 HTML常用标签

1.3.1 排版标签

字体标签

复制代码

标题标签

复制代码

段落标签

复制代码

粗体标签

复制代码

斜体标签

复制代码

下划线标签

<hr/>

复制代码

换行标签

<hr/>

复制代码

1.3.2 图片标签

<hr/>

复制代码

1.3.3 无序列表标签

<hr/> <hr/>乔丹<hr/> <hr/>詹姆斯

复制代码

1.3.4 有序列表标签

<hr/> <hr/>乔丹<hr/> <hr/>詹姆斯

复制代码

1.3.5 超链接标签

<hr/>需要展现给用户查看的内容<hr/>

复制代码

<hr/>假链接<hr/>

复制代码

1.3.6 表格标签

单元格里可以包含文本、图片、列表、段落、表单、水平线、表格

HTML + CSS + JavaScript 两小时快速入门教程 145436taz3p2hzkrj3vank.jpg

DOCTYPE html><hr/> <hr/> <hr/> <hr/> <hr/> <hr/> <hr/>表格标题<hr/> <hr/> <hr/>姓名<hr/> <hr/>性别<hr/> <hr/>地点<hr/> <hr/> <hr/> <hr/>11<hr/> <hr/>12<hr/> <hr/>13<hr/> <hr/> <hr/> <hr/>22<hr/> <hr/>23<hr/> <hr/> <hr/> <hr/>31<hr/> <hr/>32<hr/> <hr/> <hr/>

复制代码

注意：

就算只有1行1列, td标签也不能少
归并之前, 每一行的列的个数应该一样
table中定义tr，tr中定义td，td中存放内容

1.4 表单标签

1.4.1 概述

表单用于收集不同类型的用户输入。
它由一个标签定义，里边有不同的表单控件（表单项）
1. 
复制代码
常用表单控件（表单项）：输入类型, 选择菜单 , 文本域

1.4.2 get和post区别

携带数据的位置：get在地点栏反面携带，post在http协议的哀求体中携带
携带数据的类型：get只能携带字符串，post可以携带任意类型的数据
携带数据的大小：get携带数据的大小一般不凌驾4kb，post携带数据的大小没有限制
安全性：post比get更安全

1.4.3 input

<hr/>

复制代码

text（默认）文本框
password 密码框
radio 单选框：同一组单选框name属性相同
checkbox 复选框：同一组多选框name属性相同
file 文件选择框
date 日期选择框
hidden 隐藏域：向服务器提交数据，不在页面上展示出来
submit 提交按钮：内置提交表单的功能
button 普通按钮：不内置任何功能，需要在学习js之后给它绑定点击事件
reset 重置按钮：内置重置表单的功能

1.4.4 select

<hr/> <hr/>表现的内容<hr/> <hr/>表现的内容

复制代码

1.4.5 textarea

复制代码

1.4.6 通用属性

name：

假如表单项的数据需要提交给服务器，那么它就必须具备name属性
同一组单选、多选框需要具备相同的name

value：

按钮的value属性就是按钮上的文字
输入框、密码框、文件选择框、日期选择框等等的value属性的值，就是你输入的值
单选或多选框，默认value均为on，所以我们需要手动给单选框和多选框设置value

1.4.7 其它属性

readonly属性：表示只读，数据可以向服务器提交
disabled属性：表示不可用,数据无法向服务器提交
placeholder属性：表示输入提示
checked属性：单选和多选框也可以设置默认选中

1.5 标签拓展

1.5.1 音频标签

1.5.2 视频标签

1.5.3 回到顶部

DOCTYPE html><hr/> <hr/> <hr/> <hr/> <hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>lalala<hr/> <hr/>回到顶部<hr/>

复制代码

1.5.4 图片链接

DOCTYPE html><hr/> <hr/> <hr/> <hr/> <hr/> <hr/> <hr/>

复制代码

1.5.5 详情和概要标签

<hr/> <hr/>概要信息<hr/> 详情信息<hr/>

复制代码

2. CSS层叠样式表

2.1 什么是div和span

div是html里面的一个标签，没有特定的含义, 作为容器，一般用于共同css完成网页的基本布局
span也是一个标签，没有特定含义，一般作为**文本容器 **
2.2 div和span的区别

div是块级元素，会独占一行；span是行内元素，不会独占一行
div中可以嵌套其它的标签，span标签中只能嵌套文本/图片/超链接
2.3 为什么要学习CSS

font标签的字体不能比1小不能比7大；超链接标签的下划线去不掉；大量举行嵌套来设置样式
2.4 CSS语法

{
属性:属性值属性值;
属性:属性值属性值
}

复制代码

注意

属性和属性值用:毗连
假如一个属性有多个属性值用空格隔开
假如有多个属性，属性和属性之间用;隔开。最后一个;可以不写

2.5 CSS引入方式

优先级：行内样式优先级永远是最高的，而内部和外部样式谁写在反面谁优先
2.5.1 内联(行内)样式：通过标签的style属性来团结

复制代码

2.5.2 内部样式：通过style标签来团结

<hr/> <hr/> 标签名称{ 属性:属性值属性值; }

复制代码

style标签必须写在head标签的开始标签和竣事标签之间
style标签中的type属性其实可以不用写，默认就是`type=“text/css”

2.5.3 外部样式：通过link标签团结

<hr/> <hr/>

复制代码

2.6 CSS基本选择器

选择器描述语法示例标签选择器根据HTML标签名称选择标签标签名称{}div{ color:red; }ID选择器根据id属性值选择标签#id值{}#d1{ color:blue; }类选择器根据class属性值（类名）选择标签.类名{}.c1{ color:yellow; }通用选择器选取所有标签*{}*{ color: pink;}优先级：ID选择器 > 类选择器 > 标签选择器 > 通用选择器
2.7 CSS组合选择器

选择器描述语法示例层级选择器层级关系选择标签祖先后代div a{ }属性选择器根据指定属性的值筛选元素[属性='值']input[type='text'] { }并集选择器多个选择器的结果举行归并选择器1,选择器2,....c1, span { }2.8 CSS常用属性

2.8.1 背景属性

功能属性名属性取值背景色background-color1. 颜色常量
2. 利用十六进制
3. 红绿蓝背景图片background-imageurl(图片的路径)平铺方式background-repeatrepeat 默认。背景图像将在垂直方向和水平方向重复
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat背景图像将仅表现一次背景位置background-positionleft top2.8.2 文本样式

功能属性名属性取值颜色color颜色设置行高line-height像素文字修饰text-decorationunderline 下划线
overline 上划线
ine-through 删除线
none 不要线条文本缩进text-indent用于缩进文本，可以利用em单位文本对齐text-alignleft 把文本排列到左边
right 把文本排列到右边
center 把文本排列到中间
默认值：由欣赏器决定2.8.3 字体属性

功能属性名作用字体名font-family设置字体，本机必须要有这种字体设置大小font-size像素设置样式font-styleitalic 斜体
normal 默认值。欣赏器表现一个标准的字体样式。设置粗细font-weightbolder加粗3. JavaScript

3.1 JavaScript作用

JS代码可以操作欣赏器(BOM)：举行网址跳转、汗青记录切换、欣赏器弹窗等
JS代码可以操作网页(DOM)：操作HTML的标签、标签的属性、样式、文本等

注意：JS的是在欣赏器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原
3.2 JavaScript的组成

ECMAScript：JS的基本语法规范
BOM：Browser Object Model，欣赏器对象模子，提供了与欣赏器举行交互的方法
DOM：Document Object Model，文档对象模子，提供了操作网页的方法

3.3 JavaScript引入

3.3.1 内嵌式

在html里增加
3.3.3 注意事项

一个script标签，不能既引入外部js文件，又在标签体内写js代码
3.4 控制台

console.log()控制台输出正常语句
console.warn()控制台警告框
console.error()控制台错误提示

3.5 JS基本语法

3.5.1 变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 ‘var’或者’let’
3.5.2 数据类型

数据类型描述示例number数值类型1, 2, 3, 3.14boolean布尔类型true, falsestring字符串类型"hello", ‘hello’object对象类型new Date(), nullundefined未定义类型var a;typeof操作符：用来判定变量是什么类型
3.5.3 运算符

== 比较数值, === 比较数值和类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引入方式-内部js</title>
<script>
alert("hello, world");
</script>
</head>
<body>
</body>
</html>

复制代码

3.5.4 for循环

document.write("[table]") for(let j=1;j<hr/>

复制代码

<hr/> <hr/> <hr/>北京<hr/> <hr/>上海<hr/> <hr/>深圳<hr/> <hr/> function changeCity(obj) { console.log("城市改变了" + obj.value); }<hr/>

复制代码

3.7.2.2 匿名函数方式

<hr/> 标签对象.事件属性 = function(){ //执行一段代码 }<hr/>

复制代码

<script>
var str = "java";
switch (str){
case "java":
alert("java");
break;
case "C++":
alert("C++");
break;
case "Android":
alert("Android");
break;
}
</script>

复制代码

function 函数名(形参列表){
函数体
[return 返回值;]
}

复制代码

3.8 内置对象之Array数组

3.8.1 创建数组对象

var arr = new Array(size)
var arr = new Array(element1, element2, element3, ...)
var arr = [element1, element2, element3, ...];

3.8.2 数组的特点

数组中的每个元素可以是任意类型
数组的长度是可变的，更加类似于Java里的集合List

3.8.3 数组常见的方法

方法描述concat()毗连两个或更多的数组，并返回结果。join()把数组的所有元素放入一个字符串。元素通过指定的分隔符举行分隔。reverse()颠倒数组中元素的顺序。3.8.4 二维数组

[code] var citys = new Array(3); citys[0] = ["深圳", "广州", "东莞", "惠州"]; citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"]; citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"]; var citys02 = [ ["深圳", "广州", "东莞", "惠州"], ["武汉", "黄冈", "黄石", "鄂州", "荆州"], ["济南", "青岛", "烟台", "淄博", "聊城"] ]; for (var i = 0; i