目 录
4.数据类型 alert(typeof 变量名);//验证变量是什么类型
HTML ( 用标签对页面进行构建和布局 )
HTML：英文全称是 Hyper Text Markup Language ，即超文本标记语言。
标记语言：标记语言是文本和文本相关的其他信息，用电脑编码的形式整合起来。
学习HTML语言，就是学习标签，这些标签的作用是给用户提供标识或标记的作用。
HTML 语法结构
<标签名> 文本内容 标签 </标签名>
HTML 三要素
1.标签名：<body> 2.属性：<meta charset="UTF-8"></meta> 3.文本：<title>文本 </title>
HTML 基础标签
<a id="唯一标识" href="目标地址" >文本内容</a> 超链接
<h1> - <h6>标题 h1最大，h6最小
<p></p>
<img src="路径" alt="提示信息" height="100px" width="200px"> 引入页面，调试宽高(../ 跳出 img/123.jpg 进入)
<span></span> 块元素
格式化标签
(1) <b>加粗
(2) <em>斜体
(3) <i> 斜体
(4) <small> 小体
(5) <strong> 粗体
(6) <sub>
(7) <sup>head标签中的子标签作用：
(1) title 标题
(2) meta 元数据 字符集
(3) base 公共的超链接地址抽取。例如：<base href="../img/"> 则body标签中可以直接写图片名字，自动拼接前缀地址表格：格式化标签
<table>
caption 表头
th(加粗)
tr(行)
td(列)
rowspan 合并行
colspan 合并列
</table>
内置有一些特殊标签，thead，tbody，tfoot 没有用，写不写都行<table border="1px" cellpadding="0" cellspacing="0" style="height: 100px; width: 500px; text-align: center;"> <thead> <caption> 课程表 </caption> <!-- 表头 --> </thead> <tbody> <tr> <th></th> <th>第一节</th> <th>第二节</th> <th>第三节</th> <th>第四节</th> </tr> <tr> <th>星期一</th> <td colspan="2">X</td> <td>X</td> <td>X</td> </tr> <tr> <th>星期二</th> <td>X</td> <td>X</td> <td rowspan="2">X</td> <td>X</td> </tr> <tr> <td><strong>星期三</strong></td> <!-- 和 th 效果是一样的 --> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <th>星期四</th> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <th>星期五</th> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> </tbody> <tfoot> <tr> <td>注: </td> <td colspan="4"></td> </tr> </tfoot> </table> <!-- thead,tbody,tfoot写不写都一样 -->列表
有序列表:
<ol type="">
<li>
无序列表:
<ul type="">
<li><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> ol{ list-style: none; <!-- 无type --> } li{ float: left; <!-- 向左浮动，即打横排列 --> margin-left: 20px; <!-- 间隔20个像素 --> } #aaa:hover{ color: red; <!-- 鼠标靠近变红 --> } </style> </head> <body> <ol type="none"> <!-- 无type --> <li id="aaa">北京</li> <li>上海</li> <li>天津</li> <li>大连</li> </ol> <br/> <ul type="none" > <li>红色</li> <li>绿色</li> <li>蓝色</li> <li>黑色</li> </ul> </body> </html>区块
span 块级元素
div 行级元素<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ <!-- 设置div的风格,默认div没有宽度 --> margin-top: 10px; height: 20px; width: 20px; float: left; margin-left: 20px; } </style> </head> <body> <div style="background-color: aqua;">AA</div> <div style="background-color: red;">BB</div> <div style="background-color: pink;">CC</div> <div style="background-color: orange;">DD</div> <br/><br/><br/> <span style="background-color: pink;">哈哈哈哈哈哈哈哈</span> <span style="color: blue;">xx</span> <span style="color: pink;">yy</span> <span style="color: green;">zz</span> </body> </html>下拉列表
select
option<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 学历：<select name="xueli"> <option>===请选择===</option> <option value="本科">本科</option> <option value="研究生">研究生</option> <option value="博士">博士</option> </select> </body> </html>表单 ( button 按钮不允许在form表单中出现 )
作用：向后台提交数据
<form action="目标地址" method="get | post">
form表单只支持 post 提交 和 get 提交
get请求会将form表单的信息拼接在 url 地址栏上，相对不安全，最大200k，有限制
post请求会将信息藏在浏览器 header 请求头中，没有大小限制， 安全<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> <style> img{ height: 100px; width: 200px; } </style> </head> <body> <form action="表格.html" method="GET"> <!-- 同一级，没有 ../ --> 隐藏标签：<input type="hidden" name="myForm" value="register"> <br/> 用户名：<input type="text" name="userName"> <br/> 密码：<input type="password" name="pwd"> <br/> 性别：<input type="radio" name="gender" checked="true" value="1"/> 男 <input type="radio" name="gender" value="0"/> 女 <br/> <!-- 同名即是单选，checked="true"默认性别为男 --> 爱好：<input type="checkbox" name="hobby" value="篮球"/> 篮球 <input type="checkbox" name="hobby" value="足球"/> 足球 <br/> 生日： <input type="date" name="birthDay"> <input type="datetime-local" name="myDate"> <br/> 文件上传：<input type="file"/> <br/> <input type="image" name="touxiang" value=""> <img src="../img/123.jpg"> <br/> <input type="submit" value="注册"> <!-- 自动提交 --> <input type="reset" value="重置"> </form> </body> </html>框架集合
<html> <head> <meta charset="utf-8"> <title>表单</title> </head> <frameset rows="30%,70%"> <!-- 行面积划分 --> <frame src="frame_a.htm" noresize="noresize"></frame> <!-- 用noresize固定 --> <frameset cols="30%,*,20%"> <frame src="left.htm"></frame> <frame src="mid.htm"></frame> <frame src="right.htm"></frame> </frameset> </frameset> </html>文本域
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 留言: <textarea cols="10" rows="10" maxlength="10"> </textarea> </body> </html>其他
<!-- 空格 -->
placeholder="请输入姓名" <!-- 文本框内提示 -->
<td><span style="color: red;">*</span>姓名：</td>
float: right; <!-- style中向右浮动 -->
<base href="../img/"/> <!-- 后续自动链接 -->
<a id="abc" href="http://www.jd.com"><img width="200px" height="100px" src="2023.jpg" alt=""></a> <!-- 超链接 -->
CSS
CSS: Cascading Style Sheets 层叠式样式表
CSS是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。（来源：百度百科）
来源：网页搜索
CSS三种写法
以下是HTML语法
(1) 标签内(行内)
<p style="color: red;">你好</p>(2) style内(内嵌在head标签的style标签中)
<style> p{ color: red; } </style>(3) link(外联)
<link rel="stylesheet" type="text/css" herf="css/test.css">优先级：行内 > 内嵌 > 外联
CSS 语法结构
<style> //用 style 包裹的才是css样式
选择器{
属性名: 属性值;
}
</style>
选择器
基本选择器
1. 标签选择器: .标签名{}
2. id选择器: #id名{}
3. 类选择器: .class属性值{ }
4. * 所有选择器: *{ }5. 组合选择器: element1,element2{ } <!-- 同时选中多个标签 -->
6. 后代选择器: element child{ } <!-- 选中父代中所有后代指定标签 -->
7. 父 > 子选择器: element > child <!-- 只选中父代中指定子代标签，不选孙代标签 -->
8. 相邻选择器1: element1 + element2 <!-- 只选中紧跟在element1元素后的第一个element2元素 -->
9. 相邻选择器2: element1 ~ element2 <!-- 选中紧跟在element1元素后的所有element2元素 --><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/webknowledge.css"><!-- 进入css读取--> <style type="text/css"> #div1{ font-size: 50px; <!-- 标签选择器 --> } p,#div2{ color: lightpink; <!-- 组合选择器 --> } #div2 > span{ color: seagreen; <!-- 父 > 子选择器 --> } #div2 + span{ color: royalblue; <!-- 相邻选择器1 --> } </style> </head> <body> <p>早安</p><br/> <div id="div1" name="hello">你好</div> <div id="div2"> <p> <span>我爱你</span> </p> <span>我爱你</span> </div> <span>我爱你</span><br/> <span>我爱你</span><br/> </body> </html>效果
属性选择器
1. [属性名]{} <!-- 选中有指定属性的标签 -->
2. [name='值']{ } <!-- 选中name属性指定值 -->
3. [name~='值']{ } <!-- 选中较长name属性部分值 -->
4. [name^='值 ']{ } <!-- 选中name属性以指定值开头的-->
5. [name$='值']{ } <!-- 选中name属性以指定值结尾的--><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> [name]{ background-color: lightyellow; } [name~='hello']{ background-color: lightgreen; } [name^='h']{ color: mediumpurple; } /* [name$='by']{ color: indianred; } */ </style> </head> <body> <p>你好</p> <div id="div1" name="say hello to you">对你说你好</div> <div name="hobby">爱好</div> <div name="love">爱情</div> <div name="hobby">爱好</div> <div name="baby">宝贝</div> <div name="hobby">爱好</div> <div name="miss">想你</div> <input type="text" name="love" value="爱"><br/> <input type="text" name="hobby" value="爱好"><br/> <input type="text" name="baby" value="宝贝"><br/> <input type="text" name="hobby" value="爱好"><br/> <input type="text" name="miss" value="想你"> </body> </html>效果
(左:以h开头) (右:以by结尾)
特殊选择器
例 作用 :enabled input:enabled 选中input标签中所有可用的 :disabled input:disabled 选中input标签中所有不可用的 :checked input:checked 选中input标签中被选中的 :not(selector) input:not(p) 选择input标签中除了not()中包含的 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input:disabled{ background-color: bisque; } /* input:not(#b){ background-color: yellowgreen; } */ </style> </head> <body> 文本：<input type="text"><br/> <input type="radio" disabled>666<br/> <button disabled>登录</button><br/> <input id="a" type="text" name="haha" disabled> <input id="b" type="text" name="username"> <input id="c" type="text" name="word"> </body> </html>效果
( 上: input:disabled )
( 下: input:not(#b) )
伪类
例 作用 :hover a:hover 鼠标悬停时 :active a:active 鼠标摁住选中时 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #jd:hover{ font-size: 50px; } a:active{ font-size: 25px; } a:link{ color: skyblue; } a:visited{ color: lightpink; } </style> </head> <body> <a id="jd" href="https://jd.com">京东</a><br/> <a href="https://taobao.com">淘宝</a><br/> <a href="#">天猫</a><br/> <a href="#">唯品汇</a> </body> </html>效果
(左1:原始 左2:悬停) (右1:摁住选中 右2:访问第一个网址后)
浮动
float 用于 li，div等
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; float: left; <!-- 浮动方向 --> } #a{ background-color: palevioletred; } #b{ background-color: lightgoldenrodyellow; } #c{ background-color: cadetblue; } </style> </head> <body> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </body> </html>效果
定位
postion: absolut / relative;
绝对定位: 元素和浏览器的外边距距离
相对定位: 元素和元素之间的外边距距离<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; position: absolute; <!-- 绝对定位:浏览器边框距离 --> /* position: relative;<!-- 相对定位，默认使用相对定位 --> margin-left: 10px ; */ } #a{ background-color: palevioletred; margin-left: 100px; margin-top: 300px; } #b{ background-color: lightgoldenrodyellow; margin-left: 200px; margin-top: 400px; } #c{ background-color: cadetblue; margin-left: 300px; margin-top: 500px; } </style> </head> <body> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </body> </html><!-- margin为外边距，元素与浏览器边界的距离 --> margin-left: 10px 20px 30px 10px; <!-- 上10px 右20px 下30px 左10px --> margin-left: 10px 20px 10px; <!-- 上10px 右/左20px 下10px --> margin-left: 10px 20px; <!-- 上/下10px 右/左20px --> margin-left: 10px; <!-- 上/下/右/左10px --> margin-left: 左边距 margin-right: 右距 margin-top: 上边距 margin-bottom: 下边距 <!-- padding为内边距，文本内容与元素边界的距离 --> padding-left padding-right padding-top padding-bottom <!-- 文本左右居中 --> text-align: center; <!-- 设置字体中字符框的高度，来改变元素的字体大小 --> font-size: 20px;效果
边框
语法结构：border: 像素 类型 颜色; 如: border: 10px solid cadetblue;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 100px; position: relative; font-size: 30px; color: palevioletred; } #a{ background-color: lightgoldenrodyellow; text-align: center; padding-top: 50px; border: 10px solid cadetblue; } </style> </head> <body> <div id="a">hi</div> </body> </html>
效果
表格CSS样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table,th,td{ border: 5px solid pink; text-align: center; } </style> </head> <body> <table cellspacing="0"><!-- 边框间距 --> <caption> 课程表 </caption> <tr> <th></th> <th>第一节</th> <th>第二节</th> <th>第三节</th> <th>第四节</th> </tr> <tr> <th>星期一</th> <td colspan="2">X</td> <td>X</td> <td>X</td> </tr> <tr> <th>星期二</th> <td>X</td> <td>X</td> <td rowspan="2">X</td> <td>X</td> </tr> <tr> <td><strong>星期三</strong></td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <th>星期四</th> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <th>星期五</th> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>注: </td> <td colspan="4"></td> </tr> </table> </body> </html>
( 左：边框间距≠0 ) ( 右：cellspacing="0" )
列表CSS样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul li{ list-style-type: circle; } </style> </head> <body> <ul > <li>A</li> <li>AA</li> <li>AAA</li> </ul> </body> </html>效果
JavaScript
JavaScript是一种动态语言，简称: js，与java无关。
JS代码写在哪?
JS功能就是操作(添加 删除 修改 查询)HTML的。
JS就是对HTML三要素的操作:
1.标签的添加，删除，修改，查询
2.属性的添加，删除，修改，查询
3.文本的添加，删除，修改，查询
JS三种写法
1.行内写法
<a href="#" onclick="javascript:alert(-1)">hi</a>2.内嵌写法(head标签内/body标签内/head标签与body标签间/body标签后)
<script type="text/javascript"> alert(123); </script>3.外联写法(必须单独写一个script标签)
<script type="text/javascript" src="js/test.js"></javascript>
基本知识
1.关键字
在js中，具有特殊含义的单词就是关键字。如：var , boolean , number scirpt
2.标识符
在js中，凡是自主命名的地方就是标识符
以26英文字母，_ ,$ 组成
不能以数字开头
不能有空格
不能是关键字
驼峰式命名3.变量
a = 3;
4.数据类型 alert(typeof 变量名);//验证变量是什么类型
number
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var a = 3; var b = 3.14; alert(a); alert(typeof a); alert(b); alert(typeof b); </script> </html>string
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var name = "张三"; alert(name); alert(typeof name); </script> </html>null
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var a = null; alert(a); alert(typeof a); </script> </html>boolean
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var flag = true; alert(flag); alert(typeof flag); </script> </html>object (obj)对象
var person = new Object(); var n = person.name = "admin"; person.age = 10; alert(n); alert(person.age); alert(person); ==================================================== var person = {"name": "admin", "age": 23 }; //js对象 alert(person.name); alert(person.age); alert(person); alert(typeof person);Array
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var array = [1,2,3]; var array = new Array(1,2,3); </script> </html>4.运算符
算数运算符：+ , - , * , / ,% ,++, --
比较运算符：> , < , >= , <= , == , != , ===（）//既比较值也比较类型
赋值运算符：=
拓展赋值运算符：+= ,-=, /= ,%= , 等
逻辑运算符：&& , || , 等
三目运算符：boolean类型表达式?结果1:结果2;var a = 1; var b = "1"; alert(a == b); //true，仅比较值 alert(a === b); //false，既比较值也比较类型 =========================================== var a = false ? "√" : "×"; alert(a);5.流程控制语句
① 条件语句：if / if...else / if...else if...else / switch
var age = 6; if(age > 10){ document.write("大于10");//当前页面对象 }else{ document.write("小于10"); } document.write("<br/>"); var a = 5; switch(a){ case 1:{ document.write("等于1"); }break; case 2:{ document.write("等于2"); }break; default:{ document.write("大于2"); }break; } ============================================= var x = [1,2,3,2,1]; for(var i = 0; i < x.length ;i++){ document.write(x[i]); } ============================================= var x = new Array(6,6,6); for(var i = 0;i < x.length;i++){ document.write(x[i]); }② 循环语句：for / while / do...while
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> for(var i = 0; i < 10; i++){ document.write("<span style='color : palevioletred;'>"+i+"</span><br/>"); } </script> </html>6.JS中的函数(方法)
① 无返回值，无参数
function 方法名(){ 代码块; }方法名();hanshu();<!-- 放在function后也可以 --> function hanshu(){ alert(123); } ======================================= function hanshu(){ var a = 3; alert(a); }② 无返回值，有参数
function 方法名(变量名-可多个){ alert(变量名); }方法名(实参);<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function hanshu(a){ alert(a) } hanshu("函数"); </script> </html>③ 有返回值，无参数
function 方法名(){ return "xx"; } var result = 方法名(); alert(result);<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function hanshu(){ return "x"; } var result = hanshu(); alert(result); </script> </html>④ 有返回值，有参数
function 方法名(变量名){ return "xx"; } var result = 方法名("变量名"); alert(result);<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> function hanshu(x){ return "xxx"; } var result = hanshu("x"); alert(result); </script> </html>其他写法
var hanshu = function(){ alert("你好"); } hanshu(); ========================= var hanshu = function(){ return "函数"; } alert(hanshu());<!-- 若写 alert(hanshu); 则输出整个hanshu内容 -->7.JS输出操作
window.alert(); 即：alert();
document.write();
consle.log();将信息打印到浏览器的控制台上<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> hi </body> <script type="text/javascript" > console.log("我是浏览器控制台"); </script> </html>
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
