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

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-color1. 颜色常量
2. 使用十六进制
3. 红绿蓝
背景图片background-imageurl(图片的路径)
平铺方式background-repeatrepeat 默认。背景图像将在垂直方向和水平方向重复
repeat-x 背景图像将在水平方向重复
repeat-y 背景图像将在垂直方向重复
no-repeat背景图像将仅显示一次
背景位置background-positionleft top
2.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里增加<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) 了解即可删除属性属性名称
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枯木何日可逢春

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值