html
-
什么是html
- 超文本标记语言，用于网站开发。
-
html运用于什么场景
- 手机端和原生代码结合处理业务逻辑，加快开发速度，节约维护成本，效率高。
-
html5相比之前有什么进步
- 标准统一，所以浏览器都可以打开阅读且效果一致。
块标签
- 特征：
- 独占一行，换行显示，可以设置宽高，块可以套块和行
- 新起一行开始 一般可以包含多行
- div
- 定义：
- 一个没有修饰的容器
- 空白区域，内部可以添加块属性和行属性标签
- 定义：
代码如下
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
效果如图：
div.png
- h1-h6
- 标题，从1-6依次变小变细
代码如下：
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
效果如下：
h1-h6.png
- p（ 段落）
- 有P标签的时候会自动换行且行距比较大
代码如下：
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
效果如图：
P标签.jpg
- br
- （换行）
- ol
- 有序列表，只有一列的表格并且有序
- 每一行前面有数字和点表示 eg: 1. 2. 3.`</pre>
- ul
- 无序列表，只有一列的表格且无序
- 每一行前面有一个圆点
代码如下：
<ol>
<li>我是有序列表第一行</li>
<li>我是有序列表第二行</li>
<li>我是有序列表第三行</li>
</ol>
<ul>
<li>我是无序列表第一行</li>
<li>我是无序列表第二行</li>
<li>我是无序列表第三行</li>
</ul>
效果如下：
有\无序列表.jpg
- dl
- 定义列表
- 比如词典里面的词的解释或定义就可以用这种列表
代码如下：
<dl>
<dt>乔布斯</dt>
<dd>乔布斯他是一个。。。等等等</dd>
</dl>
效果如下：
dl\dt\dd.jpg
- table (表格)
代码如下：
<table>
<tr>(行）
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>今天很好</td> (列)
<td>今天也很好</td>
<td>今天都很好</td>
</tr>
</table>
效果如下：
## 行标签
- 在行内显示，内容撑开宽高，不可以设置宽高（img、input除外），行只能套行
- 不新起一行
- 一般只含有行标签
- span
- 无语义标签，类似div
```html
代码如下：
<span>这是一个span</span>
效果如图：
span.jpg
- a
- 定义超链接，用于从一张页面链接到另一张页面（网址）
代码如下：
<a href="http://www.baidu.com">百度一下</a>
效果如图：
百度一下，你就知道.png
- img
- 定义图片，用于在页面中显示图片
代码如下：
<img src="img\\考拉.jpg" alt="显示失败">
- var &em（斜体）
- strong（更强的强调)显示为 粗体
- <strong>粗体</strong>
- b（加粗）
- <b>粗体</b>
- textarea
- 文本框
代码如下：
<textarea>这是一个文本框</textarea>
效果如下：
textarea.png
- input
-
输入框，属性有type name value
-
后缀六种type 分别：
-
text(输入）
-
password（密码）
-
代码如下：
<input type="text">
<input type="password" alt="" value="密码">
效果如下：
text password.png
- radio（单选）
- checkbox（多选）
代码如下：
<input type="radio" name="1" value="">
<input type="radio" name="1" value=""><br>
<input type="checkbox" name="" value="888">
<input type="checkbox" name="" value="999">
效果如图：
radio checkbox.png
- button（按钮）
- submit（提交）
代码如下：
<input type="button" name="" value="">
<input type="button" name="" value="确定"><br>
<input type="button" name="" value="取消">
<input type="submit" name="" value="提交">
<input type="submit" name="" value="123">
效果如图：
button submit.png
- select
- 定义选择列表（下拉列表）
- option
- 定义选择列表的选项
代码如下：
<select>
<option>第一项</option>
<option>第二项</option>
<option>第三项</option>
</select>
效果如图：
下拉选框.png
CSS
-
什么是CSS
- (cascading style sheet)的缩写，可译为层叠样式表，用于控制web页面的外观
-
CSS的特点
- 页面内容与表现形式分离，也可将css单独存放在另一个css文件中
- 可很好的控制页面的布局
- 提高网页加载速度
- 降低服务器成本
- 呈现一致的效果
-
css 的引入方式
- 外部引入（页外），
- 头部引入
- 标签内引入
-
css常用选择器
- ID选择器 #
- 类选择器 .
- 标签选择器
- 群组选择器
- 后代选择器
-
css的引入方式
- 在标签内直接引入，直接在标签里面加style样式
<body>
<h2>css<h2>
<p style="color:red">用于控制web页面的外观</p>
</body>
- head 头部引入 （在head部分加入<style>标签）
js
-
什么是JS
- JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，在HTML网页上使用，用来给HTML网页增加动态功能。
-
JS引入方式常用两种
- 页内引入<script type="javascript">
- 页外引入<script src=" "> </script>
-
基本语法
<script type="text/javascript"> -
1 输出
- 1， 弹框
- alert('helloWorld!')- 2，显示在网页中
- document.write('helloWorld!')
- 2，显示在网页中
- 3，显示在控制台中（主要用于调试程序 经常用到)
- console.log('helloWorld!')
- 1， 弹框
-
2 变量
- （什么是变量）变量的三个组成条件
- 是一块内存空间 包含三个属性：变量名 变量类型 数据
- 变量名：自己定义 无空格、不能以数字开头的字符串
- 变量类型：JS中主要包含以下类型
- number：数字类型（包含小数和整数，不限长度,用于计算）
- string: 字符串（一般值都是用单引号包含''）
- boolean:布尔类型（只有两个值，真或者假 用true 和 false）
- null:空 （表示没有数据，不是零）
var a = 1;
var b = 1.23;
var c = 'lorisong';
var d = '1.2';
var e = true;
console.log(a,b,c,d,e);
console.log(typeof a,typeof b,typeof c,typeof d,typeof e);
两个数字计算
eg: 除号分两种 /:两个数相除的结果 %：两个数相除取余
var num1 = 4;
var num2 = 3;
var sum = num1 % num2;
console.log(sum);
- 基本语法 2 `判断
- 情况1
var num1 = 123;
var num2 = 124;
if (num1>num2){
console.log(num1);
}else{
console.log(num2);
}
情况2
var num1 = 1;
var num2 = 1;
if (num1>num2){
console.log(num1);
}else if(num1==num2){
console.log('num1和num2相等');
}else{
console.log(num2);
}
-
循环
第一段：定义计数器 第二段：循环需要满足的条件 第三段：每次循环后进行的操作
1到100的和
var sum = 0;
for(var i =1 ;i<101;i++ ){
sum = sum+i;
}
console.log(sum);
1到200之间的偶数和
var sum = 0;
for (var i= 1;i<201;i++){
if(i%2==0){
sum = sum +i;
}
}
console.log(sum);
1539各个数位上的数字
var num = 3453;
var gewei = 0;
var shiwei = 0;
var baiwei = 0;
var qianwei = 0;
gewei = num%10;
shiwei = parseInt(num /10)%10;
baiwei = parseInt(num/100)%10;
qianwei = parseInt(num/1000)%10;
console.log('个位是'+gewei,'十位是'+shiwei,'百位是'+baiwei,'千位是'+qianwei );
求一千以内的水仙花数
各个位数上的数字的立方和等于他本身
for(var i=1 ;i<1000;i++){
var baiweishu=parseInt(i/100);
var shiweishu=parseInt(i/10)%10;
var geweishu=i%10;
console.log(baiweishu);
if(baiweishu*baiweishu*baiweishu+shiweishu*shiweishu*shiweishu+geweishu*geweishu*geweishu==baiweishu*100+shiweishu*10+geweishu){
console.log(i+'是水仙花数');
}
}
比三个数的大小
var num1 = 1231;
var num2 = 12422;
var num3 = 125;
if(num1>num2){
if(num1>num3){
if(num2>num3){
console.log(num1,num2,num3)
}else{
console.log(num1,num3,num2)
}
}else{
console.log(num3,num1,num2)
}
} else{
if(num2>num3){
if(num1>num3){
console.log(num2,num1,num3)
}else{
console.log(num3,num2,num1)
}
}else{
console.log(num3,num2,num1)
}
}
switch case
输入1-7的任意整数，然后输出对应的星期一-星期日
if else 方法
if(input == 1){
console.log('星期一');
}else if(input == 2){
console.log('星期二');
}else if(input ==3){
console.log('星期三');
}else if(input ==4){
console.log('星期四');
}else if(input ==5){
console.log('星期五');
}else if(input ==6){
console.log('星期六');
}else if(input ==7){
console.log('星期日');
}
switch case方法
var input = 3;
switch (input){
case 1:console.log('星期一');break;
case 2:console.log('星期二');break;
case 3:console.log('星期三');break;
case 4:console.log('星期四');break;
case 5:console.log('星期五');break;
case 6:console.log('星期六');break;
case 7:console.log('星期日');break;
default :console.log('输入有误');
}
一次考试，老师要求90-100的学生评定为A；80-89的评定为B------0-59的评定为E
输入学生成绩 输出他的评定等级
var input = 200;
var shiweishu = parseInt(input/10);
switch (shiweishu){
case 10:console.log('A');break;
case 9:console.log('A');break;
case 8:console.log('B');break;
case 7:console.log('C');break;
case 6:console.log('D');break;
case 5:console.log('E');break;
case 4:console.log('E');break;
case 3:console.log('E');break;
case 2:console.log('E');break;
case 1:console.log('E');break;
case 0:console.log('E');break;
default: console.log('输入有误');
}
- boolean
var isloopyear = false;
var year = 1872;
if(year%100==0){
if(year%400==0){
isloopyear = true;
}else{
isloopyear = false;
}
}else{
if(year%4==0){
isloopyear = true;
}else{
isloopyear = false;
}
}
if(isloopyear){
console.log('是闰年');
}else{
console.log('不是闰年');
}
------while
var sum = 0;
for (var i = 0 ;i<101 ;i++){
sum+=i;
}
var i = 0;
while(i<101){
sum+=i;
i++;
}
console.log(sum);
- while(循环条件){循环体}
- 当循环条件不确定的时候（不确定具体什么时候结束循环）
求2-1000之间的最小的水仙花数
for (var i = 2 ; i <1000 ;i++){
var geweishu = i%10;
var shiweishu = parseInt(i/10)%10;
var baiweishu = parseInt(i/100) ;
if(geweishu*geweishu*geweishu +shiweishu*shiweishu*shiweishu +baiweishu*baiweishu*baiweishu == i){
continue;
console.log(i+'是水仙花数');
}
}
- break(暂停）
- 执行到break 直接跳出循环，执行循环体后面的代码。{跳出大括号，结束循环，（全部停止循环）}
- continue (继续）
- :循环里面 不执行continue之后的代码 继续进行下一次循环。{以上循环，以下停止循环。
for (var i = 1 ;i<11 ;i++){
console.log('我是第'+i+'次循环');
var next = i+1;
console.log('下一次是第'+next+'次循环');
}
- 函数
function qiuhe ( a, b){
return a+b;
}
x = qiuhe(1,2);
console.log(x);
eg1: 用一个函数实现以下功能:传入两个值 X Y，如果X>Y 则返回空，否则 返回X与Y的积；
function math (x,y){
if( x>y){
return ;
}
else{
return x*y;
}
}
console.log(math(10,22));
eg2:无参数函数
function fn1(){
console.log('我是fn1函数，我被调用了一次');
}
for( var i = 0 ;i <11;i++){
}
网友评论