基本标签

2016-05-18 本文已影响0人阿西吧小魔仙

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>
效果如下：

![table\\th\\tr\\td.jpg](https://img.haomeiwen.com/i2106624/1287b2eb67bfbf1d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


## 行标签
   - 在行内显示，内容撑开宽高，不可以设置宽高（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!')
- 3，显示在控制台中（主要用于调试程序经常用到)
  - console.log('helloWorld!')
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++){
}

基本标签

html

块标签

CSS

js

猜你喜欢

热点阅读