HTML+CSS+Javascript基础自查手册

本文最后更新于：2020年12月24日下午

1.HTML基础

（1）简述

HTML：Hyper Text Markup Lauguage，超文本标记语言

HTML的语言特征：HTML代码由头和体组成，如

<html>
    <head>
        此处写说明性内容，如
        <title> 我是标题 </title>
    </head>
    <body>
        此处写需要展示给用户看的内容，如
        <font color="red"> 今天天气不错</font>
    </body>
</html>

HTML文件(.htm或者.html)由浏览器直接解析执行，无需编译；
HTML标签不区分大小写，但一般均为小写
HTML标签是有属性的，格式为属性名="属性值"，属性值用引号引起。
HTML标签建议采用包裹嵌套，不建议交叉嵌套

（2）基本标签

字体标签font
<font 属性名=”属性值”> 文字 </font>
- size：控制字体大小。最小1~最大7
- color：控制字体颜色。使用英文设置（例如： red blue)
- face：控制字体类型。只能设置系统字库中有的字体类型
格式化标签：
- 换行：<br/>
- 段落标签：<p></p> ，自动在段前和断后加空行。<p align="center"></p>可以居中显示，默认居左显示
- 标题标签：<h1></h1>
- 空格标签：&nbsp
- 注释标签：
图片标签img：
<img scr="./1.jpg" width="200" height="200"/>
- 其默认单位为像素(px)，采用百分比显示也可以
- 图片路径：互联网路径必须包含http等协议名称，

列表标签ul/ol：

无序列表：

<ul>
    <li>手机电脑</li>
    <li>家具饰品</li>
</ul>

有序列表

<ol>
    <li>手机电脑</li>
    <li>家具饰品</li>
</ol>

超链接标签a
<a href="http://www.baidu.com"> 百度 </a>
- 互联网路径要包含http等协议名称；herf路径也可以是图片路径
- 默认跳转到本页
- 内容不仅仅是文字，图片也可以。

表格标签table：

定义一个表格 <table border="1 px" width="100%"> 表格名 </table>
- border默认为0 px
定义表格中的一行及其内容<tr> <td> 表格每列内容 </td> </tr>
- <tr></tr>包裹的是每行的内容，<td></td>包裹的是每列的内容
- th和td的区别为：th会加粗居中

单元格合并：

colspan跨列合并，引号内的是合并的行数，从当前列开始数
rowspan跨行合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1 px" width="100%">
			<tr>
				<td colspan="2">1</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr>
				<td rowspan="11">6</td>
				<td>7</td>
				<td colspan="2" rowspan="2">8</td>
				<td>10</td>
			</tr>
			<tr>
				<!-- <td>11</td> -->
				<td>12</td>
				<td>15</td>
			</tr>						
		</table>
	</body>
</html>

块标签span/div：
- 块级的块标签：<div> <div/>，会自动换行，默认占满一行
- 行级的块标签：<span> <span/>，不会自动换行，适用于少量信息展示

（3）表单标签：

定义一个表单：<form> 表单内容 <form/>

action选项：将数据提交到何处，默认提交到本页。路径可以为互联网路径或者本机内网路径；
method选项：将数据以何种方式进行提交。分为get方式（默认方式，将数据拼接到地址栏上）、post方式（没有把提交的数据拼接到地址栏中，请求体。相对安全）

定义对应的表单输入项：

输入项标签：
<input type="password"/>
- type选项包含text文本框、password密码框、radio单选框、checkbox复选框、submit提交按钮、reset重置按钮、file附件框、hidden隐藏域、button普通按钮等。
- name选项：单选框、复选框进行数据的分组 / 设置该标签对应的参数名
- value选项：设置该标签对应的参数值（单选框、复选项必须设置value，否则默认都是on）；作为按钮的名字。
- checked选项：设置单选框/复选框的默认选中状态
- readonly设置该标签的参数值只读，用户无法手动更改
- disabled：设置该标签不可用，参数值无法更改，且参数值也无法提交
选择框标签：
<select name="city"> <select/> ：
- multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选
- <option value="B" selected="selected"> 选项B <option/>
文本域标签：
<textaera name="test"> <textaera/>

文本域与文本框的区别：
- 文本框不可以换行，文本域可以；
- 文本框参数值是value属性，文本域参数值是标签的文本体

提交表单主要事项：

将特殊符号和中文进行URL编码，保证数据传输的完整性。

进行普通编码，编成字节数组；然后对字节数组中的每一个元素，从10进制转换为16进制；采用百分号%进行拼接

2.CSS基础

（1）简述

CSS（Cascading Style Sheets）：层叠样式表，主要用于修饰HTML页面，更丰富多彩地展示超文本信息。

HTML ——> 页面结构 ——> 素颜局限性

CSS ——> 美化页面 ——> 给人化妆

代码规范：

css代码写在<style> <style/>标签内容体中，该标签放在<head>标签内容体中
选择器名称{ 属性名1: 属性值1; 属性名2: 属性值2; ……}
- 选择器用来指定CSS样式用在哪些HTML标签上
- 属性值有多个时，直接用空格隔开即可。如border: 5px solid red;
用/* */进行注释

（2）CSS选择器

📚 基本选择器

元素选择器：以HTML标签名作为选择器，如span、div等等。标签名{}

类选择器：以HTML的类名（class属性值）作为选择器名称。.类名{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.redF{
				color: red;
			}
		</style>
	</head>
    
	<body>
		<span> span1:我是黑色 </span>
		<span class="redF"> span2:我是红色 </span>
		<div> div1:我是黑色 </div>
		<div class="redF"> div2:我是红色 </div>
	</body>    
</html>

id选择器：以HTML的id（id属性值）作为选择器名称，需保证id唯一。#id{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				color: red;font-size: 100px;
			}
		</style>
	</head>
	<body>
		<span> span1:我是黑色 </span>
		<div id="d1"> div2:我是红色 </div>
	</body>
</html>

📚 组合方式

层级关系：选择器1 选择器2 …{ css样式代码}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div font{
				color:red;
				font-size: 120px;
			}
		</style>
		
	</head>
	<body>
		<div>
			<font> 我想变红 </font>
			我还是黑色的吧？
		</div>
		
		<font> 我保持黑色 </font>
	</body>
</html>

（3）CSS样式

边框属性：HTML标签均拥有边框，但默认不可见
- border: 线宽样式(solid/none/double) 颜色，如border: 1px solid red;
- width、height：宽度和长度
- background-color：背景颜色（英文单词，或者颜色代码）
布局：
- float：脱离原有板式，另起图层。常用属性值有none（默认）、left和right
转换：

HTML标签一般分为：块级元素和行内元素
- 块元素：以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行，如：<h1>、<p>、<div>、<li>等
- 行内元素：根据内容多少来占用行内空间，不会自动换行，如：<span>、<a>等
display属性可以使得元素在行内元素和块元素直接转换：
- 常用属性值为block(块元素)、inline(行内元素)、none(元素将被隐藏)
字体：
- font-size：字体大小，如120px
- color：字体颜色，如red

（4）盒子模型

边框border：
- 分为border-top、border-bottom、border-left、border-right四种
- 示例：border-top: 1px solid red;
- 直接采用border可直接设置四种边框为相同的属性
内边距padding：
- 分为padding-top、padding-bottom、padding-left、padding-right四种
- 示例：padding-top: 10px
- 直接采用padding一次性设置4个内边距：padding:10px
外边距margin：
- 分为margin-top、margin-bottom、margin-left、margin-right四种
- 直接采用margin一次性设置四个外边距：margin:10px

（5）CSS与HTML结合

📚 行内样式

通过标签的style属性进行元素样式的设置，更有针对性。
- 示例：<a style="corlor:red; font-size:30px" href="www.baidu.com"> 北渡 </a>
采用 <style> </style>标签样式
- 放在head中，详见2(2)
- 适合样式复用的标签

📚 外部样式

将共用的代码提取出来，放在一个css文件中。然后通过<link>标签样式链接到HTML文档中。

格式：<link rel="stylesheet" type="text/css" href="文件路径" />
- rel=“stylesheet”，固定值，表示样式表
- type=“text/css”，固定值，表示css类型
- href，表示css文件位置
- 前两者不可省略。
适合不同的界面进行复用

3.JavaScript基础

（1）概述

脚本语言无编译过程。Python需要编译吗？？（运行过程。待查）

特点：

JavaScript无需编译，直接被浏览器解释和执行
JavaScript无法单独运行，必须嵌套到HTML代码中运行
JavaScript的执行过程由上到下依次执行，允许使用链式编程
JavaScript没有访问系统文件的权限（安全）
JavaScript和Java没有任何直接关系，比如雷锋塔和雷锋: )

组成：

ECMAScript（核心）：规定了JS的语法和基本对象；
DOM：文档对象模型，处理网页内容 的方法和接口
BOM：浏览器对象模型，与浏览器交互 的方法和接口

引入方式script：

内部脚本：在当前页面内部写script标签，内部书写JavaScript代码。

理论上script标签可以放在任意位置，但一般放在body结束标签之前（保证html展示内容优先加载，最后加载脚本，增强用户体验性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1> Hello,javascript </h1>
		<script type="text/javascript">
			// JavaScript的代码
		    var a = 10;
		    var b = 20;
		    alert(a+b);
		</script>
	</body>
</html>

外部引入：通过<script src="test.js"> </script>引入外部.js文件。方法体中不要写东西，写了也不会执行。

（2）语法及规则

🏄‍♂️ 注释

单行注释：//
多行注释：/* */

🏄‍♂️ 变量

声明和赋值： var 变量名 = 值（默认值为undefined）
必须以字符或者下划线开头，不能使用空格，严格区分大小写
基本数据类型有：String（没有字符）、boolean、number、null（undefined）。
- 可以通过typeof分辨该变量属于哪种基本数据类型
引用数据类型为对象，比如var str = new String();或者var str = new String;都可以

🏄‍♂️ 运算符

比较运算符
逻辑运算符

🏄‍♂️ 正则对象

创建RegExp对象：
- var reg = /^ 表达式$/;其中^表示开始，$表示结束
  - 全部符合才返回true
  - 适用于表单数据
- var reg = /表达式/;
  - 有一个符合就直接返回true
  - 适用于字符串查找、替换
使用正则对象：reg.test(“待检测的字符串”)，全部匹配则返回true，否则返回false

🏄‍♂️ JS数组对象

特点：
- 数组中的每一个成员没有类型限制，及可以存放任意类型；
- 数组的长度可以自动修改；（看做java中的ArrayList了）
创建方式：
- var arr = [1,2,3,”a”,true]; // 长度为5
- var arr = new Array(); // 长度默认为0
- var arr = new Array(4);
常见属性/方法：
- arr.length
- arr[1]
- join()：把数组中的所有元素放入字符串，并通过指定分割符进行分隔。如var a = arr.join(“+”)
- pop()：删除并返回数组的最后一个元素
- push()：向数组的末尾添加一个或多个元素，并返回新的长度
- reverse()：翻转顺序，返回翻转后的数组。原数组也翻转了。如var a= arr.reverse()

🏄‍♂️ 全局函数

eval(String) 可以把传入的字符串，作为JavaScript代码执行
编码：encodeURI(string)
解码：decodeURI(string)
- URI：统一资源标识符，标识资源的详细名称，包含资源名
- URL：统一资源定位器，标识资源的网络位置，包含http://
字符串转数字：
- parseInt(String)
- parseFloast(String)
- 如果字符串上的某个字符从字面值上无法转换为数字，则从该字符开始停止转换，仅返回前面正确的转换值。如11.5a55

🏄‍♂️ 自定义函数/方法

function 方法名(参数1, 参数2){
	// 函数体
}

小写function
无需定义返回值类型
参数的定义无需使用var关键字，否则报错
函数体中，return可以写，也可以不写，或者仅仅写一个return（默认返回undefined）
JavaScript不存在方法重载，后面定义的函数会覆盖前面的。

🏄‍♂️ 自定义对象

<script>
    // 构造参数时，赋值
	function Person(){
    	this.name = "adam";
    	this.age = "18";
	}
	var p = new Person();
	alert(p.name);
	alert(p.age);
</script>

属性值可以在函数值外面直接声明并赋值
对象直接量：var 对象名 = {属性名1："属性值1"；属性名2："属性值2"...}

（3）BOM对象

📟 概述

BOM( Browser Object Model）浏览器对象模型，用来执行浏览器的相关操作。例如：浏览器的地址、弹出消息等。
window对象是 Javascript的内置对象，使用 window对象调用方法时可以省略window不写。

📟 消息框

alert警告框
confirm确认框：有返回值（true/false)

📟 定时器

循环定时器
- setInterval设置循环定时器：var iid = setInterval("run1()", 1000)每隔1秒调用一次run1方法
- 清除循环定时器：clearInterval(循环定时器ID)
一次性定时器
- setTimeout(调用方法，毫秒值)

📟 location对象

location对象包含浏览器 地址栏 的信息

href属性：设置或返回完整的URL。location.href(“www.baidu.com”)

（4）DOM对象

🔎 简述

DOM（Document Object Model）文档对象类型，其可以将标记型文档中的所有内容（标签、文本、属性等）都封装成对象

一个HTML文档加载到内存中就会形成一个DOM对象

🔎 获取元素对象

getElementByID()：通过元素ID获取对应的元素对象
getElementsByName()：通过元素的name属性获取符合的所有元素
getElementsTagName()：通过元素的元素名属性获取符合的所有元素，如li
getElementsByClassName()：通过元素的class属性获取符合要求的所有元素，如h1

🔎 元素对象常见属性

value：元素对象.value
className：元素对象.className
checked：元素对象.checked
- HTML中checked=“checked”，JavaScript中返回true
- 通过元素对象.checked = true可以修改单选/多选框的默认选中状态
innerHTML：元素对象.innerHTML返回对象的内容体。

（5）JavaScript事件

🤧 简述

鼠标或者键盘的动作称为事件（Event）。如点击、提交表单、值发生改变、鼠标移动等
JS事件驱动机制
- 事件源：按钮
- 事件：点击事件 onclick
- 监听器：方法，如run1()
- 注册监听器： onclick=“run1()”

🤧 常见JavaScript事件

点击事件onclick

<body>
	<input type="button" value="点我弹出对话框" onclick="run1()"/>
    
    <script>
        function run1(){
        	alert("弹出")
	    }
	</script>
</body>

焦点事件
- 获取焦点事件onfocus：onfocus = “run1()”
失去焦点事件onblur：onblur = “run1()”
域内容改变事件（元素值改变时就会触发）：
加载完毕事件：onload = “方法名()”
表单提交事件：onsubmit = “return 方法名”
- 调用的具体方法中，要返回true或者false。总共两个return
- 该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作
键位弹起事件：onkeyup = "方法名()"
常用鼠标事件
- 鼠标移入事件(移入时，弹框)：onmouseover = “方法名()”
- 鼠标移出事件(移出时，弹框)：onmouseout = “方法名()”
- 比如烦人的QQ扫描登陆的二维码

🤧 JavaScript事件的绑定方式

元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数
优缺点：
- 开发便捷、传参方便、可以绑定多个函数
- JS和Script代码高度糅合在一起，不利于多部门的项目开发维护。


	<script>
		function run1(){
        	alert("run1");
        function run2(str){
            alert(str);
        }
        function run3(obj){
            alert(obj.value);
        }
    }
	</script>
<head>

<body>
        <!---- 为事件绑定一个无参函数 -->
        <input type="text" name="111" onclick="run1()" /><br/>
        <!---- 为事件绑定一个有参函数，此处参数是个字符串 -->
        <input type="text" name="222" onclick="run2("aaa")" /><br/>
        <!---- 为事件绑定一个有参函数，此处参数是个元素对象 -->
        <input type="text" name="333" onclick="run3(this)" /><br/>
       <!--- 绑定多个函数，依次执行 -->
       input type="text" name="444" onclick="run1(),run2("aaa"),run3(this)" /><br/> 
</body>

DOM绑定

对象.事件属性一次只能绑定一个函数，同时也无法传递参数
匿名函数可以绑定多个函数，同时也可以传递参数。

<script>
	function run1(){
    	alert("加载完毕");
	}
	
	// window.onload = run1;
	window.onload=function(){
        run1();
        run2();
        run3();
    }
</script>


// 为文本框 onclick事件绑定上两个函数 run1和run2
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="UTF-8">
        <title></title>
    	<script>
            function run1(){
                alert("run1");
        	}
            function run2(str){
                alert(str);
            }
            function run3(obj){
                alert(obj.value);
            }
		// 当页面加载完毕时，
    	window.onload=function(){
            var t1 = document.getElementById("t1");
            t1.onclick=function(){
        		run1();
        		run2();
    		}
    	}
		</script>
    </head>
	<body>
        <input type="text" id="t1" />
    </body>

JavaWeb

HTML CSS JavaScript

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Bootstrap 上一篇

Java基础自查手册下一篇

HTML+CSS+Javascript基础自查手册

1.HTML基础

（1）简述

（2）基本标签

字体标签font

格式化标签：

图片标签img：

列表标签ul/ol：

超链接标签a

表格标签table：

块标签span/div：

（3）表单标签：

输入项标签：

选择框标签：

文本域标签：

2.CSS基础

（1）简述

（2）CSS选择器

📚 基本选择器

📚 组合方式

（3）CSS样式

（4）盒子模型

（5）CSS与HTML结合

📚 行内样式

📚 外部样式

3.JavaScript基础

（1）概述

特点：

组成：

引入方式script：

（2）语法及规则

🏄‍♂️ 注释

🏄‍♂️ 变量

🏄‍♂️ 运算符

🏄‍♂️ 正则对象

🏄‍♂️ JS数组对象

🏄‍♂️ 全局函数

🏄‍♂️ 自定义函数/方法

🏄‍♂️ 自定义对象

（3）BOM对象

📟 概述

📟 消息框

📟 定时器

📟 location对象

（4）DOM对象

🔎 简述

🔎 获取元素对象

🔎 元素对象常见属性

（5）JavaScript事件

🤧 简述

🤧 常见JavaScript事件

🤧 JavaScript事件的绑定方式