前端板书1
《网页设计与制作》
一、课程介绍
- B/S架构
B/S架构是Browser/Server的简写，也就是浏览器/服务器端的交互
- C/S架构
C/S架构是Client/Server的简写，也就是客户端/服务器端的交互
- 前端
在浏览器运行的所有对象，前端包括三个部分：HTML+CSS+JavaScript(JS)
- HTML：内容
- CSS：表现
- JS：行为
二、前端框架
- JS框架:jQuery、Angular.js、Vue.js、Node.js、React
- web UI框架:
- 移动web框架
三、开发工具和浏览器
- 开发工具：
文本编辑器（sublime、Hbuilder、EditPlus、notepad++、webstorm） - 浏览器：
Chrome（谷歌）、Firefox（火狐）、Safari（苹果）、Opera（欧朋）、IE（微软）
四、HBuilderX(IDEA方案)的快捷键
-
输入一对HTML标签：输入标签名，再按Tab键
-
缩进：Tab
-
反向缩进：Shift+Tab
-
注释/反注释：Ctrl+/
-
复制当前行：Ctrl+D
-
代码格式化：Ctrl+Alt+L
-
插入多个光标：Ctrl+点击
-
删除当前行：Ctrl+Y
-
移动当前行：Ctrl+Shift+上下方向键
-
给选定的内容加父标签：Ctrl+]
-
动态改变字的大小：Ctrl+鼠标滚动
-
打开浏览器的开发者工具：F12
-
浏览器的刷新：Ctrl+R或者F5
HTML（超文本标记语言）
常见的标记：
<h1>~<h6>：标题(heading)
<p>:段落
<hr>:水平线
<br>:换行
:空格
<style>:样式标记
<script>:JS脚本标记
<ul>:项目列表（无序列表)
举例：
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul>
主要属性：
type:设置数字列表符号的类型，可取值为：disc(实心),circle(空心),square(方块)
<ol>:数字列表（有序列表）
举例：
<ol>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ol>
主要属性：
type:设置数字列表符号的类型，可取值为：I,i,A,a,1
<dl>：定义列表
举例：
<dl>
<dt>第1章</dt>
<dd>1.1节</dd>
<dd>1.2节</dd>
</dl>
<li>：列表项
常出现在<ul>或<ol>中
©:版权所有的标记
<a>:超级链接
主要属性：
href:目标页面的地址
target:目标窗口（在什么窗口打开新页面）,可取值为_blank(在新窗口打开新页面)
<img>:图片标记
主要属性：
src:图片地址
alt:替换文本
<iframe>:内联框架，也称浮动框架，可以实现文档中的文档
主要属性：
name：框架名称
src：目标地址
width/height：框架的宽/高
举例：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
<marquee>：滚动字幕
举例：
<marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();">...滚动的内容</marquee>
<div>:盒子模型，主要用来排版和布局的
<span>:行内元素
html的元素可分为块级元素和行内元素
块级元素：单独占一行，宽度默认为100%，例如：h1,p,div
行内元素：多个行内元素可以处于同一行，默认的宽度为内容的宽度，例如：a,span
------------------表格------------------------
一、表格相关的标记
<table>：表格
<tr>:表格中一行
<td>：单元格
<th>:标题单元格
<theader>:表头
<tbody>:表格的主体
<tfooter>:表尾
二、表格的属性
border:边框的粗细
cellspacing:间距
cellpadding:边距
width:宽度
height:高度
三、单元格的属性
rowspan:跨行
colspan:跨列
------------------表单------------------------
表单相关的标记：
<form>：表单
主要属性：
action:提交地址
method:请求方式
<input>
主要属性：
type:text(文本框) | password(密码框) | radio(单选按纽) | checkbox(复选框) | button(普通按纽) | submit(提交按纽) | reset(重置按纽)
<select>：下列列表
<option>：下拉列表的选项
<textarea>：多行文本框
<button>：按纽
<fieldset>：字段集
<legend>：字段集标题
CSS（层叠样式表）
在html页面中输入css代码
- 在标记内，输入一对
CSS常用的属性
/***字体***/ font-family: "华文行楷"; font-size: 24px;/*字号为24像素*/ font-style: oblique;/*斜体,可以取值为:normal,italic,oblique*/ font-weight:bold;/*加粗*/ text-align: center;/*对齐方式为居中;取值为left时表示左对齐;取值为right表示右对齐*/ text-decoration: none;/*设置下划线为无*/ text-indent:2em;/*设置首行缩进*/ /*尺寸*/ width:220px;/*宽度*/ height:50px;/*高度*/ line-height:20px;/*行高*/ /****边距****/ /*外边距*/ margin:10px; /*上右下左均为10px*/ margin:10px 20px; /*上下为10px,左右为20px*/ margin:10px 20px 30px; /*上10px,左右20px,下30px*/ margin:10px 20px 30px 40px; /*上10px,右20px,下30px,左40px*/ margin-right: 40px;/*设置右外边距为40px*/ margin-top:20px;/*设置上外边距为20px*/ /*内边距*/ padding:5px; /*上右下左内边距均为5px*/ padding:10px 20px 15px 25px; /*上右下左的内边距分别为10px,20px,15px,25px*/ /****边框****/ border-bottom:1px solid #999 /*1个像素灰色的实线边框*/ 四个方向： top(上) right(右) bottom(下) left(左),它可以和padding、margin、border结合： /***列表****/ list-style-position:inside; list-style-image:url("img/icon1.gif");/*用图像作为列表的符号*/ list-style-type:none;(disc | circle | square) /***背景***/ background-image: url("../images/bg111.gif"); /*用图像作背景*/ background-position:right bottom; /*背景位于右下*/ background-repeat: no-repeat;/*背景不重复*/ background: url(img_flwr.gif) right bottom no-repeat; /*简写*/ /***显示***/ dispaly:none | inline | block /*不显示 |行内元素 | 块级元素*/ /***浮动***/ float:left | right 作用：1.实现图片的文字环绕效果 2.页面布局 clear:left | right |both 作用：清除浮动 举例：https://www.runoob.com/try/try.php?filename=trycss_class-clearJavaScript
网页脚本语言
（1）代码嵌入页面内
可在HTML页面的任何位置，输入一对<script>标记，在此标记内编写JavaScript代码。
例如：<script> alert('hello!'); </script>（2）代码写在单独的js脚本文件
在js文件中写好，引入到网页中。<script src="js文件地址"></script>JavaScript输入/输出
- 警告框
格式：alert('内容'); - 提示框（输入）
格式：prompt("提示内容","默认值");
说明：如果选择"确定",函数返回输入框内容；选择"取消"，函数返回null。 - 确认框
格式：confirm("提示内容?");
说明：如果选择"确定",函数返回true；选择"取消"，函数返回false。 - 写入HTML文档
格式：document.write('内容'); - 写入HTML元素
格式：<DOM元素>.innerHTML='内容'; - 写入浏览器的控制台
格式：console.log('内容');
一、数据类型
JS弱类型的语言、动态数据类型
1.值类型
（1）string（字符串）
var a='abc',b="中国"; typeof(a); //string typeof(b); //string（2）number（数值型）
var n1=3,n2=-1.2,n3=1.3e-5; typeof(n1); //number typeof(n2); //number typeof(n3); //number（3）boolean（布尔类型）
var b1=true,b2=false; typeof(b1); //boolean typeof(b2); //boolean（4）undefined（已定义，未赋值）
var a; //声明，但未初始化 typeof(a); //undefine（5）null（空类型）
清空一个对象
cat1=null; //清空 typeof(cat1) //object2.引用类型
（1）Object（对象）
var cat1={"name":"kitty","age":3} //cat1为对象类型 typeof(cat1) //object（2）Array（数组）
var a=[1,2,3]; //a为数组类型 typeof(a) //object（3）Function（函数）
function f(){}; typeof(f) //function（4）RegExp（正则表达式）
var reg=new RegExp("^\w{3}$"); //reg为正则表达式对象 typeof(reg) //object（5）Date（日期）
var d1=new Date(); //d1为日期对象 typeof(d1) //object测试数据类型的函数：typeof(<值>)
二、变量
变量的声明：var <变量名>
用var声明的变量是局部变量，只在函数内有效。
不使用var声明，直接赋值的变量是全局变量。function f(){ var a=0; //局部变量 b=1; //全局变量 }三、运算符
算术运算符
+、-、*、/、%字符串拼接
+
说明：
当一个字符串和其它类型数据使用"+"运算时，会将其它类型数据转换字符串再拼接。
当数字字符串之间或与数字进行"-"、"*"、"/"、"%"运算时，优先自动转换为数字再进行算术运算。
举例："11"+2 //"112" "11"-"2" //9 "11"-2 //9 "11"%2 //1比较运算符
>、>=、<、<=、==、===、!=、!==
说明：==(值相等）、===（绝对相等，即值和类型都要相同）、!=（不等于）、!==（不绝对相等）
举例："12"==12 //true "12"===12 //false "9">"10" //true "9">10 //false逻辑运算符
&&、 ||、 ！四、程序结构
１.分支结构
(1)IF单分支
格式：
if(条件){
<语句>;
...
}(2)IF双分支
格式：
if(条件){
<语句1>;
}
else{
<语句2>;
}(3)IF多分支
格式：
if(条件1){
<语句1>;
}
else if(条件2){
<语句2>;
}
...
else
<语句n>;(4)switch分支
格式：
switch(<表达式>)
{
case <值1>:<语句1>;
case <值2>:<语句2>;
...
default:<语句n>;
}2.循环结构
（1）for循环
格式：
for(<语句1>;<语句2>;<语句3>){
<循环体>
}
举例：for(var i=0;i<10;i++){ console.log(i); }(2)for...in循环
格式：
for(var <变量> in <数组 | 对象>{
<循环体>
}
举例：//遍历数组 var nums=[1,2,3,4,5]; for(var i in nums){ console.log(nums[i]); } //遍历对象的属性 var person={"name":"mike","age":18}; for(var key in person){ console.log(person[key]); //输出属性值 }（3）while循环
格式：
while(<条件>){
<循环体>
}(4)do...while循环
格式：
do{
<循环体>
}while(<条件>
说明：先执行循环体，再判断条件五、函数
定义函数
格式：
function <函数名>(<参数1>,...){ <函数体> }举例：
//求半径为r的圆的面积 function area(r){ var s=Math.PI*r*r; return s; }调用函数
格式：
函数名(实参1,..); //无返回值
<变量>=函数名(实参1,..);//有返回值
举例：fun1(); //无返回值 var a=area(10); //有返回值六 DOM（文档对象模型）
就是HTML标记在内存中的一个映射对象。
1、获得DOM元素
（1）通过ID获得
格式：
var <变量名>=document.getElementById("元素的ID");
说明：直接返回一个DOM元素。（2）通过标签名得到元素
格式：
var <变量名>=document.getElementsByTagName("标签名");
说明：返回被称为'HTMLCollection'的元素集合，即使集合中只有一个元素。（3）通过name属性得到元素
格式：
var <变量名>=getElementsByName("name值");
说明：返回一个被称为'NodeList'的列表。（4）通过class属性得到元素
格式：
var <变量名>=document.getElementsByClassName("class属性值");
说明：返回被称为'HTMLCollection'的元素集合，即使集合中只有一个元素。（5）获得表单控件元素
格式：
var <变量名>=<表单name>.<控件name>;
举例：<!-- html --> <form name="form1"> <input type="text" name="text1"> </form> //js var text1=form1.text1;2、改变元素
（1）改变元素的内容
a）innerText属性
<DOM元素>.innerText="文本";
<jq对象>.text("文本");
b）innerHTML属性
<DOM元素>.innerHTML="html格式的文本";
<jq对象>.html("文本");
c）value属性（针对表单控件）
<控件元素>.value="文本";
<jq对象>.val("文本");（2）改变元素的属性
<DOM元素>.属性名=值;
举例：<!-- HTML --> <img id="img1" src="old.gif"> //JS document.getElementById("img1").src="new.gif";（3）改变元素的样式
<DOM元素>.style.<css属性名>="属性值";
举例：document.getElementById("p2").style.fontSize="24px"; //CSS中的属性"font-size"要改为"fontSize"，其它以此类推。<jq对象>.css("属性名","属性值");DOM事件
常见事件
onclick :单击 onmouseover：移入 onmouseout：移出 onfocus：获得焦点 onload：页面加载 onunload：页面卸载 onchange：输入字段内容改变时事件处理
- 方法一：直接将代码写在事件属性里
例如：<p onclick="代码"> - 方法二：将事件和函数绑定
例如：<div onclick="函数();"> - 方法三：给DOM元素分配事件
例如：
<DOM元素>.onclick=function() { //事件处理代码 }- 方法四：事件监听
<DOM元素>.addEventListener("事件名",function(){ //事件处理代码 },true);例：
var t1=document.getElementById("t1"); t1.addEventListener("click",function(){alert("hi!")}); //注意:事件名不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 //第3参数表示冒泡还是捕获，true表示捕获,默认是false,即冒泡，触发由内向外。DOM元素
创建元素节点
var p1=document.createElement("p");创建文本节点
var textNode1=document.createTextNode("这是新段落");创建属性节点
var att=document.createAttribute("class"); //创建属性节点 att.value="democlass"; //设置属性值 document.getElementsByTagName("H1")[0].setAttributeNode(att); //添加属性节点到元素添加子节点
p1.appendChild(textNode1); //将文本节点添加到元素节点 document.getElementById("div1").appendChild(p1); //将元素节点p1添加到现在节点div1中移除子节点
var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child);Number对象
-
js中数值的无穷大怎么表示,它是什么类型？
-
js中NaN表示什么？它是什么类型？
Not a Number -
测试是否为非数字的函数
isNaN() -
数字和数字对象有什么区别？
String对象
字符串的属性
lengthprototype//Stringconstructor//String()
字符串常用的方法
-
charAt(<位置>)
功能:返回字符串指定位置的字符. -
endsWith(<字符串>)
功能:判断字符串是否以指定的字符串结尾,类似的还有startsWith() -
indexOf(<字符串>)
功能:返回指定字符串在字符串中首次出现的位置,如果没有匹配,返回-1.类似的还有lastIndexOf(). search()
说明:indexOf()不支持正则,search()支持. -
match(<正则表达式>)
功能:返回匹配的字符串数组.
举例:
"a12b34c56".match(/\d+/g); //["12","34","56"]说明:如果正则表达式不加参数"g",则得到第1个匹配的内容.
replace(<搜索字符串>,<新字符串>)
功能:将字符串中的<搜索字符串>以<新字符串>替换.类似的还有replaceAll()
举例:
"a12b34c56".replace(/\d+/g,"") //abc-
slice(<起始位置>,<终止位置>)
功能:从字符串的<起始位置>到<终止位置>(不包括)进行切片.
说明:位置可使用负数,如-1表示倒数第1个元素 -
substring(<超始位置>,<终止位置>)
功能:从字符串的<起始位置>到<终止位置>(不包括)进行截取.
说明:和slice()差不多,但不能使用负数.类似的函数还有substr(<起始位置>,<长度>) -
split(<分隔符>,<个数>)
功能:将字符串按照指定的分隔符分隔为字符串数组.
var arr1="my name is mike".split(" "); //['my', 'name', 'is', 'mike']toLowerCase()
功能:字符串转小写,toUpperCase()是字符串转大写.
练习
- 访问字符串"hello,javascript"的最后一个字符
var s1="hello,javascript"; var pos=s1.charAt(s1.length-1); //t- 从某个字符串中查找另一个字符串？
"this is a book.".indexOf("is"); //2 "this is a book.".lastIndexOf("is"); //5- 使用替换函数将"hello,Java"中"Java"替换成"JavaScript"
var str="hello,java".replace("java","javascript"); //'hello,javascript'- 将"Java,C#,PHP,Python"中的所有成员存储在一个数组中。
var arr1="Java,C#,PHP,Python".split(","); //['Java', 'C#', 'PHP', 'Python']- 从一个文件名"index.html"中取出扩展名
var filename="index.html"; var pos_dot=filename.lastIndexOf("."); var ext=filename.substring(pos_dot); //.html正则表达式
概念
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
正则表达式对象的创建
- 方法1：
格式：
var <正则表达式对象>=new RegExp(<模式>,[修饰符]
举例：
var reg1=new RegExp("\\d+","g"); //匹配数字 var arr1="12ab34cd56".match(reg1); //['12','34','56']说明：
i //不区分大小写。 g //全局匹配（而不是在找到第一个就停止查找,而是找到所有的匹配）。 m //多行匹配 s //.包括换行符- 方法2：
格式：var /<模式>/[修饰符]
举例：
var reg2=/\d+/g; var arr1="12ab34cd56".match(reg2); //['12','34','56']正则表达式对象的常用方法
- test(<字符串>)
举例：
/[A-Z]+/.test("hello,JS"); //true- exec(<字符串>)
功能：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var arr2=/[a-zA-Z]+/g.exec("hello,world"); //['hello', index: 0, input: 'hello,world', groups: undefined]模式
- 方括号
说明：查找某个范围内的字符
举例：
[A-Z] //大写字母 [a-z] //小写字母 [0-9] //数字 [aoeiuv] //指定的几个字符中的一个 [^0-9] //非数字- 元字符
. //任意字符（除\n,\r外） \d //数字；\D表示为非数字字符 \w //字母、数字或下划线；\W表示为非单词字符 \s //空白字符 \n //换行符 \uXXXX //十六进制Unicode编码对应的字符，例如汉字可表示 为：[\u4E00-\u9FA5]- 量词
+ //1到多个；例如 ：[0-9]+ //至少1个数字 * //0到多个 ? //0到1个 {n} //n个 {n,m} //n到m个- 定位
^ //开头 如：^[A-Za-z].*表示以字母开头的字符串 $ //结尾 \b //单词边界 \B //非单词边界- 子模式
获取匹配内容中“（）”里的内容
var arr="<ul><li>ab123</li></ul>".match(/<li>(\w+)<\/li>/); arr //['<li>ab123</li>', 'ab123', index: 0, input: '<li>ab123</li>', groups: undefined] arr[0] //<li>ab123</li> arr[1] //abc123- 非获取匹配
不获取子模式（即括号里的内容）
var a2="industy,industries".match(/indust(?:y|ies)/); a2 //['industy', index: 0, input: 'industy,industries', groups: undefined] a2[0] //industy- 正向肯定/否定预查
正向肯定：?=
正向否定：?!
var arr1= "Windows3.1,Windows95".match(/Windows(?=95|98|NT|2000)/); arr1 //['Windows', index:11, input: 'Windows3.1,Windows95', groups: undefined] var arr2= "Windows3.1,Windows95".match(/Windows(?!95|98|NT|2000)/); arr2 //['Windows', index: 0, input: 'Windows3.1,Windows95', groups: undefined]- 反向肯定/否定预查
正向肯定：?<=
正向否定：?<!
var arr3= "3.1Windows,95Windows".match(/(?<=95|98|NT|2000)Windows/); arr3 //['Windows', index: 13, input: '3.1Windows,95Windows', groups: undefined] var arr4= "3.1Windows,95Windows".match(/(?<!95|98|NT|2000)Windows/); arr4 //['Windows', index: 3, input: '3.1Windows,95Windows', groups: undefined]- 连续相同
var arr5="hadoop".match(/(.)\1/); arr5 ['oo', 'o', index: 3, input: 'hadoop', groups: undefined]- 练习
- 大陆的固定电话号码规则：
1）3位区号，8位号码。如：021-12345678
2）4位区号，7位号码。如：0553-1234567 - 腾讯QQ号（10000到10位数字）
- 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
- 身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X
- 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
JavaScript对象
-
构造一个对象car1，它有两个属性（颜色color，品牌brand），该车的颜色为白色，品牌为奔驰。
-
直接使用字面量
-
使用new Object()
-
使用对象构造器Car
-
给car1添加一个属性country：德国
-
循环遍历car1的所有属性
-
给car1添加一个方法go
数组
构造一个数组country，该数组有5个元素，“China"、"USA"、"English"、"France"、“Russia“。
-
直接使用字面量
-
使用new Array()
-
删除该数组中最后个元素
-
给该数组添加一个元素“Germany“。
-
给该数组进行排序，并将排序结果存储在country1变量中。
-
打印country1中所有的元素
-
将数组中所有的元素用“，”连接起来存储于一个字符串string1中。
- 警告框
