HTML + CSS + JavaScript 两小时快速入门教程 |
您所在的位置：网站首页 › css视频的简单代码 › HTML + CSS + JavaScript 两小时快速入门教程 |
HTML + CSS + JavaScript 两小时快速入门教程
|
1. html
1.1 HTML的结构
文档结构介绍： 文档声明：用于声明当前HTML的版本，是HTML5的声明html根标签：除文档声明以外，其它内容全部放在根标签html内部文档头部配置：head标签，是当前页面的配置信息，外部引入文件文档显示内容：body标签，里边的内容会显示到浏览器页面上 1.2 HTML语法规范 扩展名是html或者htm html标签不区分大小写 1.3 HTML常用标签 1.3.1 排版标签 字体标签 标题标签 段落标签 粗体标签 斜体标签 下划线标签 换行标签 1.3.2 图片标签 1.3.3 无序列表标签 乔丹 詹姆斯 1.3.4 有序列表标签 乔丹 詹姆斯 1.3.5 超链接标签 需要展现给用户查看的内容 假链接 1.3.6 表格标签单元格里可以包含文本、图片、列表、段落、表单、水平线、表格 注意： 就算只有1行1列, td标签也不能少合并之前, 每一行的列的个数应该一样table中定义tr，tr中定义td，td中存放内容 1.4 表单标签 1.4.1 概述表单用于收集不同类型的用户输入。 它由一个标签定义，里边有不同的表单控件（表单项） 常用表单控件（表单项）：输入类型, 选择菜单 , 文本域 1.4.2 get和post区别 携带数据的位置：get在地址栏后面携带，post在http协议的请求体中携带携带数据的类型：get只能携带字符串，post可以携带任意类型的数据携带数据的大小：get携带数据的大小一般不超过4kb，post携带数据的大小没有限制安全性：post比get更安全 1.4.3 input text（默认） 文本框password 密码框radio 单选框：同一组单选框name属性相同checkbox 复选框：同一组多选框name属性相同file 文件选择框date 日期选择框hidden 隐藏域：向服务器提交数据，不在页面上展示出来submit 提交按钮：内置提交表单的功能button 普通按钮：不内置任何功能，需要在学习js之后给它绑定点击事件reset 重置按钮：内置重置表单的功能 1.4.4 select 显示的内容 显示的内容 1.4.5 textarea 1.4.6 通用属性name： 如果表单项的数据需要提交给服务器，那么它就必须具备name属性同一组单选、多选框需要具备相同的namevalue： 按钮的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> lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala lalala 回到顶部 1.5.4 图片链接 DOCTYPE html> 1.5.5 详情和概要标签 概要信息 详情信息 2. CSS层叠样式表 2.1 什么是div和spandiv是html里面的一个标签，没有特定的含义, 作为容器，一般用于配合css完成网页的基本布局 span也是一个标签，没有特定含义，一般作为**文本容器 ** 2.2 div和span的区别div是块级元素，会独占一行；span是行内元素，不会独占一行 div中可以嵌套其它的标签，span标签中只能嵌套文本/图片/超链接 2.3 为什么要学习CSSfont标签的字体不能比1小不能比7大；超链接标签的下划线去不掉；大量进行嵌套来设置样式 2.4 CSS语法 { 属性:属性值 属性值; 属性:属性值 属性值 }注意 属性和属性值用:连接如果一个属性有多个属性值用空格隔开如果有多个属性，属性和属性之间用;隔开。最后一个;可以不写 2.5 CSS引入方式优先级：行内样式优先级永远是最高的，而内部和外部样式谁写在后面谁优先 2.5.1 内联(行内)样式：通过标签的style属性来结合 2.5.2 内部样式：通过style标签来结合 标签名称{ 属性:属性值 属性值; } style标签必须写在head标签的开始标签和结束标签之间style标签中的type属性其实可以不用写，默认就是`type=“text/css” 2.5.3 外部样式：通过link标签结合 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里增加标签，讲js代码写在标签体中 DOCTYPE html> js引入方式-内部js alert("hello, world"); 3.3.2 外联式把js代码写在单独的js文件中，js文件后缀名是.js 在HTML里使用标签引入外部js文件 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 3.5.4 for循环 document.write("") for(let j=1;j document.write("") document.write(j+"x"+i+"="+(j*i)) document.write("") } document.write("") } document.write("") 3.5.5 if var a = 6; if(a==1){ alert('语文'); }else if(a==2){ alert('数学'); }else{ alert('英语'); } 3.5.6 switch var str = "java"; switch (str){ case "java": alert("java"); break; case "C++": alert("C++"); break; case "Android": alert("Android"); break; } 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 普通函数方式 北京 上海 深圳 function changeCity(obj) { console.log("城市改变了" + obj.value); } 3.7.2.2 匿名函数方式 标签对象.事件属性 = function(){ //执行一段代码 } //给输入框绑定键盘按键按下和抬起事件 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 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的BOMJavaScript 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的DOMJavaScript 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) 了解即可删除属性属性名称
|
【本文地址】
今日新闻 |
推荐新闻 |