首页 > 分享 > HTML + CSS + JavaScript 两小时快速入门教程

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

花匠小妙招
2024-11-21 04:23

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> 1 标题标签

<h1><h1> 1 段落标签

<p></p> 1 粗体标签

<b></b> 1 斜体标签

<i></i> 1 下划线标签

<hr/> 1 换行标签

<br/> 1 1.3.2 图片标签

<img src="" width="" height="" alt="" title=""/> 1 1.3.3 无序列表标签

<ul type="square"> <li>乔丹</li> <li>詹姆斯</li> </ul> 12345 1.3.4 有序列表标签

<ol start="1" type="1"> <li>乔丹</li> <li>詹姆斯</li> </ol> 12345678 1.3.5 超链接标签

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

<a href="#">假链接</a> 12 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>

12345678910111213141516171819202122232425262728293031323334

注意：

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

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

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

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

常用表单控件（表单项）：输入类型<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"/> 1 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> </select> 1234567 1.4.5 textarea

<textarea rows="20" cols="30" name="introduce"></textarea> 1 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>

12345678910111213141516171819202122232425262728293031323334 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> 123456789101112 1.5.5 详情和概要标签

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

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语法

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

注意

属性和属性值用:连接如果一个属性有多个属性值用空格隔开如果有多个属性，属性和属性之间用;隔开。最后一个;可以不写 2.5 CSS引入方式

优先级：行内样式优先级永远是最高的，而内部和外部样式谁写在后面谁优先

2.5.1 内联(行内)样式：通过标签的style属性来结合

<p style="属性名称:属性值;属性名称:属性值属性值"></p> 1 2.5.2 内部样式：通过style标签来结合

<head><style type="text/css"> 标签名称{ 属性:属性值属性值; }</style> </head> 1234567 style标签必须写在head标签的开始标签和结束标签之间style标签中的type属性其实可以不用写，默认就是`type=“text/css” 2.5.3 外部样式：通过link标签结合

<head><link rel="stylesheet" href="../css/myCss.css" /> </head> 123 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> 12345678910111213 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.14boolean布尔类型true, falsestring字符串类型"hello", ‘hello’object对象类型new Date(), nullundefined未定义类型var a;

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

3.5.3 运算符

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

var i = 2; var j = "2"; alert(i==j);// true alert(i===j);// false 1234 3.5.4 for循环

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

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

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

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

3.6.1 普通函数

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

function(形参列表){ 函数体 [return 返回值;] } 1234 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代码，调用函数"></标签> 1

<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> 123456789101112 3.7.2.2 匿名函数方式

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

//给输入框绑定鼠标移入事件 ipt.onmouseover = function () { console.log("鼠标移入了...") } //给输入框绑定鼠标移出事件 ipt.onmouseout = function () { console.log("鼠标移出了...") } 12345678 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]); } }

12345678910111213141516171819' 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 日期常用方法 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 列表中的前一个 URLforword()加载 history 列表中的下一个 URLgo()加载 history 列表中的某个具体页面 3.10.6 location:当前路径信息属性作用host设置或返回主机名和当前 URL 的端口号href设置或返回完整的 URLport设置或返回当前 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) 了解即可删除属性属性名称