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

1. html1.1 HTML的结构文档结构介绍：文档声明：用于声明当前HTML的版本，<!DOCTYPE html>是HTML5的声明html根标签：除文档声明以外，其它内容全部放在根标签html内部文档头部配置：head标签，是当前页面的配置信息，外部引入文件文档显示内容：body标签，里边的内容会显示到浏览器页面上1.2 HTML语法规范扩展名是html或者htmhtml标签不区

文章共12,936字 · 阅读需要大约44分钟

一键AI生成摘要，助你高效阅读

问答

枯木何日可逢春

10160人浏览 · 2021-09-01 15:26:36

枯木何日可逢春 · 2021-09-01 15:26:36 发布

1. html

1.1 HTML的结构

在这里插入图片描述

文档结构介绍：

文档声明：用于声明当前HTML的版本，<!DOCTYPE html>是HTML5的声明
html根标签：除文档声明以外，其它内容全部放在根标签html内部
文档头部配置：head标签，是当前页面的配置信息，外部引入文件
文档显示内容：body标签，里边的内容会显示到浏览器页面上

1.2 HTML语法规范

扩展名是html或者htm

html标签不区分大小写

1.3 HTML常用标签

1.3.1 排版标签

字体标签

<font color="" size="" face=""></font>

标题标签

<h1><h1>

段落标签

<p></p>

粗体标签

<b></b>

斜体标签

<i></i>

下划线标签

<hr/>

换行标签

<br/>

1.3.2 图片标签

<img src="" width="" height="" alt="" title=""/>

1.3.3 无序列表标签

<!--type属性: circle: 空心圆; square: 实心正方形-->
<ul type="square">
    <li>乔丹</li>
    <li>詹姆斯</li>
</ul>

1.3.4 有序列表标签

<!--
	start:起始索引(默认是1)
	type属性:1:阿拉伯数字; a:小写英文字母; A:大写英文字母; i:小写罗马数字; I:大写罗马数字
-->
<ol start="1" type="1">
    <li>乔丹</li>
    <li>詹姆斯</li>
</ol>

1.3.5 超链接标签

<!--target属性: 链接打开方式-->
<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>

<!--假链接-->
<a href="#">假链接</a>

1.3.6 表格标签

单元格里可以包含文本、图片、列表、段落、表单、水平线、表格
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="600px" cellspacing="0px" cellpadding="10px" bgcolor="navajowhite" align="center">
			<caption>表格标题</caption>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>地址</th>
			</tr>
			
			<tr align="center">
				<td rowspan="2">11</td>
				<td>12</td>
				<td>13</td>
			</tr>

			<tr align="center">
				<td>22</td>
				<td>23</td>
			</tr>

			<tr align="center">
				<td>31</td>
				<td colspan="2">32</td>
			</tr>
		</table>
	</body>
</html>

注意：

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

1.4 表单标签

1.4.1 概述

表单用于收集不同类型的用户输入。

它由一个<form>标签定义，里边有不同的表单控件（表单项）

<form action="提交路径,默认是当前页面" method="提交方式,常用的是get和post,默认是get">
</form>

常用表单控件（表单项）：输入类型<input>, 选择菜单 <select>, 文本域<textarea>

1.4.2 get和post区别

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

1.4.3 input

<input type="xxx"/>

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

1.4.4 select

<select name="">
    <!--如果option没有添加value属性，那么提交数据时就会提交选中的option标签体的内容-->
    <!--如果option添加了value属性，那么提交数据时就会提交选中的option标签体的value值-->
    <!--option标签通过selected属性设置默认选中-->
	<option value="">显示的内容</option>
    <option value="">显示的内容</option>
</select>

1.4.5 textarea

<textarea rows="20" cols="30" name="introduce"></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>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="top"></a>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<p>lalala</p>
		<a href="#top">回到顶部</a>
	</body>
</html>

1.5.4 图片链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://blog.csdn.net/weixin_45953673?spm=1000.2115.3001.5343">
			<img src="./img/girl.jpg"/><br/>
		</a>
	</body>
</html>

1.5.5 详情和概要标签

<details>
    <summary>概要信息</summary>
    详情信息
</details>

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属性来结合

<p style="属性名称:属性值;属性名称:属性值 属性值"></p>

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

<head>
	<style type="text/css">
        标签名称{
            属性:属性值 属性值;
        }
	</style>
</head>

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

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

<head>
	<link rel="stylesheet" href="../css/myCss.css" />
</head>

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-color`	1. 颜色常量 2. 使用十六进制 3. 红绿蓝
背景图片	`background-image`	`url(图片的路径)`
平铺方式	`background-repeat`	`repeat` 默认。背景图像将在垂直方向和水平方向重复 `repeat-x` 背景图像将在水平方向重复 `repeat-y` 背景图像将在垂直方向重复 `no-repeat`背景图像将仅显示一次
背景位置	`background-position`	left top

2.8.2 文本样式

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

2.8.3 字体属性

功能	属性名	作用
字体名	`font-family`	设置字体，本机必须要有这种字体
设置大小	`font-size`	像素
设置样式	`font-style`	`italic` 斜体 `normal` 默认值。浏览器显示一个标准的字体样式。
设置粗细	`font-weight`	`bolder`加粗

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里增加<script>标签，讲js代码写在标签体中

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

</body>
</html>

3.3.2 外联式

把js代码写在单独的js文件中，js文件后缀名是.js

在HTML里使用<script>标签引入外部js文件<script src="js文件的路径"></script>

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.14`
`boolean`	布尔类型	`true`, `false`
`string`	字符串类型	`"hello"`, ‘hello’
`object`	对象类型	`new Date()`, `null`
`undefined`	未定义类型	var a;

typeof操作符：用来判断变量是什么类型

3.5.3 运算符

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

var i = 2;
var j = "2"; 
alert(i==j); 	// true
alert(i===j); 	// false

3.5.4 for循环

<script>
    document.write("<table border='1' cellspacing='0' width='900px'>")
	for(let j=1;j<=9;j++){
        document.write("<tr>")
        for(let i=1;i<=j;i++){
            document.write("<td>")
            document.write(j+"x"+i+"="+(j*i))
            document.write("</td>")
        }
    	document.write("</tr>")
	}
	document.write("</table>")
</script>

3.5.5 if

var a = 6;
if(a==1){
    alert('语文');
}else if(a==2){
    alert('数学');
}else{
    alert('英语');
}

3.5.6 switch

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

3.6 函数

因为函数内部有一个arguments数组，用于存放传入的参数，所以函数声明时的参数个数和函数调用时候传入的参数个数可以不一致

js的函数没有重载，同名函数后面的会覆盖前面的

参数列表里面直接写参数的变量名, 不写var

3.6.1 普通函数

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

3.6.2 匿名函数

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

3.7 JavaScript事件

HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

3.7.1 常见事件

属性	此事件发生在何时…
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onchange	域的内容被改变。
onblur	元素失去焦点。
onfocus	元素获得焦点。
onload	一张页面或一幅图像完成加载。
onsubmit	确认按钮被点击；表单被提交。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按住。
onkeyup	某个键盘按键被松开。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmouseout	鼠标从某元素移开。
omouseover	鼠标移到某元素之上。
onmousemove	鼠标被移动。

3.7.2 事件绑定

3.7.2.1 普通函数方式

<标签 属性="js代码，调用函数"></标签>

<body>
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>
</body>
<script>
    function changeCity(obj) {
        console.log("城市改变了" + obj.value);
    }
</script>

3.7.2.2 匿名函数方式

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

//给输入框绑定键盘按键按下和抬起事件
ipt.onkeydown = function () {
    //当按键按下的时候，数据并没有到达输入框
    //输出输入框里面的内容
    console.log(ipt.value)
}

ipt.onkeyup = function () {
    //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框
    console.log(ipt.value)
}

//给输入框绑定鼠标移入事件
ipt.onmouseover = function () {
    console.log("鼠标移入了...")
}
//给输入框绑定鼠标移出事件
ipt.onmouseout = function () {
    console.log("鼠标移出了...")
}

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 二维数组

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

    var citys02 = [
        ["深圳", "广州", "东莞", "惠州"],
        ["武汉", "黄冈", "黄石", "鄂州", "荆州"],
        ["济南", "青岛", "烟台", "淄博", "聊城"]
    ];
    for (var i = 0; i < citys02.length; i++) {
        var cityArray = citys02[i];
        
        console.log(cityArray);

        for(var j = 0;j<=cityArray.length;j++){
            console.log(cityArray[j]);
        }
    }

3.9 内置对象之Date日期

3.9.1 创建日期对象

创建当前日期：var date = new Date()
创建指定日期：var date = new Date(年, 月, 日)

注意：月从0开始，0表示1月
创建指定日期时间：var date = new Date(年, 月, 日, 时, 分, 秒)

注意：月从0开始，0表示1月

3.9.2 日期常用方法

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数（时间戳）。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。

3.10 JS的BOM

JavaScript HTML DOM | 菜鸟教程 (runoob.com)

3.10.1 概述

Browser Object Model，浏览器对象模型

JavaScript封装了浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

3.10.2 window:窗体对象

方法	作用
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()	弹出输入框
setInterval(‘函数名()’,time)	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout(‘函数名()’,time)	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 Interval()。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

3.10.3 navigator:浏览器导航对象

属性	作用
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息

3.10.4 screen:屏幕对象

方法	作用
width	返回显示器屏幕的分辨率宽度
height	返回显示屏幕的分辨率高度

3.10.5 history:历史对象

方法	作用
back()	加载 history 列表中的前一个 URL
forword()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

3.10.6 location:当前路径信息

属性	作用
host	设置或返回主机名和当前 URL 的端口号
href	设置或返回完整的 URL
port	设置或返回当前 URL 的端口号

3.11 JS的DOM

JavaScript HTML DOM | 菜鸟教程 (runoob.com)

3.11.1 DOM概述

DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容

3.11.2 DOM树

当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。

整个网页封装成的对象叫document
标签封装成的对象叫Element
属性封装成的对象叫Attribute
文本封装成的对象叫Text

3.12 获取标签

方法	描述	返回值
`document.getElementById(id)`	根据id获取标签	`Element`对象
`document.getElementsByName(name)`	根据标签name获取一批标签	`Element`类数组
`document.getElementsByTagName(tagName)`	根据标签名称获取一批标签	`Element`类数组
`document.getElementsByClassName(className)`	根据类名获取一批标签	`Element`类数组

3.13 操作标签

方法	描述	返回值
`document.createElement(tagName)`	创建标签	`Element`对象
`parentElement.appendChild(sonElement)`	插入标签
`element.remove()`	删除标签

3.14 操作标签体

获取标签体内容：标签对象.innerHTML
设置标签体内容：标签对象.innerHTML = "新的HTML代码";

3.15 操作属性

方法名	描述	参数
`getAttribute(attrName)`	获取属性值	属性名称
`setAttribute(attrName, attrValue)`	设置属性值	属性名称, 属性值
根据标签名称获取一批标签	`Element`类数组
`document.getElementsByClassName(className)`	根据类名获取一批标签	`Element`类数组

3.13 操作标签

方法	描述	返回值
`document.createElement(tagName)`	创建标签	`Element`对象
`parentElement.appendChild(sonElement)`	插入标签
`element.remove()`	删除标签

3.14 操作标签体

获取标签体内容：标签对象.innerHTML
设置标签体内容：标签对象.innerHTML = "新的HTML代码";

3.15 操作属性

方法名	描述	参数
`getAttribute(attrName)`	获取属性值	属性名称
`setAttribute(attrName, attrValue)`	设置属性值	属性名称, 属性值
`removeAttribute(attrName)` 了解即可	删除属性	属性名称