xo

xo

关注
发信
关注(28)粉丝(399)

Python 一路走来 HTML CSS Javascript

前端三把利器
HTML
         -标签 (成对写不容易忘记闭合)
                    自闭和标签
          标签里写个 xx=xx, 表示标签的属性
          <!— —> 注释
 
     Head:
 

Meta(metadata information)

 
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
 1. 页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
<meta charset="UTF-8">
2刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
3关键词
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
4描述
例如：cnblogs
5 X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Title

网页头部信息

 
Link
css
     < link rel="stylesheet" type="text/css" href="css/common.css" >
icon  (title框里)
     < link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如：
< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style> 

 
Script
 
引进文件
     < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
     < script type="text/javascript" > ... </script >
     
 
 

HTML

     常用标签
     h,p,br: id
     a: id  href target
     div:id
 
大致分类：
块标签 （自己占一行）
内连（行内）标签 （内容有多少就占多少）
 
特殊符号有特殊代码展示
 
标签：
段落：
     <p></p>
换行:
     <br />
属性：
     <a href=“http://www.sohu.com"></a>
     <a hred=“http://www/sohu.com” target=“_blank”>跳转2</a>
     a锚
     <a href=“#i1”></a>
     (寻找页面中id=i1的标签，将其标签放置在页面顶部，id不允许重复)
标题:
     H1
     H2
               ….
     H6
 
<hr /> 生成横线
 
标签可以嵌套
 
<input />系列标签: 
text
password
radio
checkbox
file
button 按钮
submit     提交当前表单       value：显示的字
reset          重置表单
 
 
 
<select>
          -option  提交时候也用value,可以节省
          -optgroup
<textarea> -多行文本
 
<form>   action=“url” 要提交的内容放置在form标签中 上传文件注意加上：enctype=“multipart/form/data"
         
     <form action="https://www.sogou.com/web" method="get">
    <input type="text" name="query" />
    <input type="submit" value="提交"/>
          name相当于提交 key:value, name是key，输入是value
          提交checkbox,radio 等选择时要写 value, 默认会出现不可预知的错误
<label for=“”> 关联光标 id
 
 
ul<li>,ol<li>,dl<dt><dd>
 
 
Table:
colspan 合并单元
rowspan 合并单元
<table border="1">
    <thead>
        <tr>
            <th>第一列</th>
            <td>第二列</td>
 
        </tr>
    </thead>
    <tbody>
 
        <tr>
            <td>第一列</td>
              <td>第二列</td>
        </tr>

</tbody>

<table/>
 
fieldset
 
iframe
 
 
 

CSS

 
存在形式:
优先级:
标签属性  >html头部(<style>)>单独文件.css  (link引用)
 
选择器
     标签选择器
     div选择器
     id选择器
     class选择器
     层级选择器
     组合选择器
 
 
 
 
样式
 
<style>
    .c1{
        color: red;
        background-color: aqua;
        font-size:32px;
        height: 150px;
        width: 500px;
    }
    .img{
        background-image: url("4.gif");
        height:150px;
        width:500px;
        /*图片的凿洞才能看见*/
        background-repeat: no-repeat;
        background-position: 84px -58px;
    }

</style>

 
 
边框
 
border(-top/left/right bottom)  px solid/dotted/ color
 
展示 display
 
display:none  （隐藏标签）
display:block （内连变块级）
display:inline (块级变内连)
 
纯内连标签高度宽度不生效
 

cursor:
          pointer
          help
          wait
          crosshair
          move
 
 
边距：
     内边距 margin (本身不增加)
     外边距 padding （本身增加）
 
漂浮：
     float
 
position:
     relative  和absolute配合
     absolute －－固定窗口，滚动移动，会寻找父级的absolute
     fixed  －－固定 窗口
 
 

一、“JavaScript中无块级作用域”

在Java或C#中存在块级作用域，即：大括号也是一个作用域。

 Java
 C#

在JavaScript语言中无块级作用域

1
2
3
4
5
6
7
function Main(){
    if(1==1){
        var name = 'seven';
    }
    console.log(name);
}
// 输出： seven

补充：标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字，用于指定变量属于块级作用域。

二、JavaScript采用函数作用域

在JavaScript中每个函数作为一个作用域，在外部无法访问内部作用域中的变量。

1
2
3
4
5
6
7
8
9
function Main(){
    var innerValue = 'seven';
}
 
Main();
 
console.log(innerValue);
 
// 报错：Uncaught ReferenceError: innerValue is not defined

三、JavaScript的作用域链

由于JavaScript中的每个函数作为一个作用域，如果出现函数嵌套函数，则就会出现作用域链。

1
2
3
4
5
6
7
8
9
10
11
xo = 'alex';
  
function Func(){
    var xo = "seven";
    function inner(){
        var xo = 'alvin';
        console.log(xo);
    }
    inner();
}
Func();

如上述代码则出现三个作用域组成的作用域链，如果出现作用域链后，那么寻找变量时候就会出现顺序，对于上述实例：

当执行console.log(xo)时，其寻找顺序为根据作用域链从内到外的优先级寻找，如果内层没有就逐步向上找，直到没找到抛出异常。

Python 一路走来 HTML CSS Javascript-LMLPHP

四、JavaScript的作用域链执行前已创建

JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。

示例一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
xo = 'alex';
 
function Func(){
    var xo = "seven";
    function inner(){
 
        console.log(xo);
    }
    return inner;
}
 
var ret = Func();
ret();
// 输出结果： seven

上述代码，在函数被调用之前作用域链已经存在：

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

当执行【ret();】时，由于其代指的是inner函数，此函数的作用域链在执行之前已经被定义为：全局作用域 -> Func函数作用域 -> inner函数作用域，所以，在执行【ret();】时，会根据已经存在的作用域链去寻找变量。

示例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xo = 'alex';
 
function Func(){
    var xo = "eirc";
    function inner(){
 
        console.log(xo);
    }
    xo = 'seven';
    return inner;
}
 
var ret = Func();
ret();
// 输出结果： seven

上述代码和示例一的目的相同，也是强调在函数被调用之前作用域链已经存在：

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

不同的时，在执行【var ret = Func();】时，Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”，所以之后再执行【ret();】时，就只能找到“seven”。

示例三：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
xo = 'alex';<br>
function Bar(){
    console.log(xo);
}
 
function Func(){
    var xo = "seven";
     
    return Bar;
}
 
var ret = Func();
ret();
// 输出结果： alex

上述代码，在函数被执行之前已经创建了两条作用域链：

  • 全局作用域 -> Bar函数作用域
  • 全局作用域 -> Func函数作用域

当执行【ret();】时，ret代指的Bar函数，而Bar函数的作用域链已经存在：全局作用域 -> Bar函数作用域，所以，执行时会根据已经存在的作用域链去寻找。

五、声明提前

在JavaScript中如果不创建变量，直接去使用，则报错：

1
2
console.log(xxoo);
// 报错：Uncaught ReferenceError: xxoo is not defined

JavaScript中如果创建值而不赋值，则该值为 undefined，如：

1
2
3
var xxoo;
console.log(xxoo);
// 输出：undefined

在函数内如果这么写：

1
2
3
4
5
6
7
function Foo(){
    console.log(xo);
    var xo = 'seven';
}
 
Foo();
// 输出：undefined

上述代码，不报错而是输出 undefined，其原因是：JavaScript的函数在被执行之前，会将其中的变量全部声明，而不赋值。所以，相当于上述实例中，函数在“预编译”时，已经执行了var xo；所以上述代码中输出的是undefined。

05-07 15:25
Powered by LMLPHP ©2024 xo 0.066811