关于Html,Css,JavaScript的一些基础知识要点

前端开发

关于Html,Css,JavaScript的一些基础知识要点

html css javaScript 就类似MVC结构（不完全相同，还是有区别）

介绍

Html：Model（一个页面的模型，包含了整体的结构模型）

Css：View（一个项目的视图，视觉，提供了一个页面的美化）

JavaScript：Controller（一个项目的控制，用户的交互方式，提供一些业务逻辑设计）

跟正统MVC区别：html这一块在一个前端项目中不单单只有模型，也包括了view，毕竟实际浏览器也是根据Html来进行解析展示的，严格上来讲，Model就是纯粹的模型数据，根据需求给Controller进行调用操作。

而Css最多只能起到一个基于Html内容的美化，把类似Model层的Html数据加工，制作出多种结构和样式，例如html中定义两个div：div2，div2。在没有css的情况，按照顺序div1在上，div2在下，使用css进行定位处理还是可以进行变换。Html实质上也算是一个View，提供视图展示，而Css只是在视图的基础上进行渲染。

关于HTML

主要结构和注意事项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <heat>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //为浏览器定义解析方式
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> //为搜索引擎定义关键词
    <meta name="description" content="Free Web tutorials on HTML and CSS"> //为网页定义描述内容
    <meta name="author" content="Hege Refsnes"> //定义网页作者
    <meta http-equiv="refresh" content="30"> //每30秒中刷新当前页面
    <title></title>
    <style></style><link/>
  </heat>
  <body><script></script></body>
  <footer></footer>
</html>
  1. 在Html中，Css样式表建议在头部标签中优先定义，在页面加载的时候同时加载，以防出现页面错位等无样式问题。
  2. Js脚本建议在标签中的最下方进行导入或者编写，以便js可以在运行时基于完全加载页面信息后的数据进行操作。
  3. 建议编写html的时候声明该页面为UTF-8编码或者一些统一编码，以便浏览器端更好的解析，不会造成乱码。

关于Css

Css的引用方式

  1. 在需要使用Css样式的标签内定义style属性(行内样式)

    1
    <a href="http://Bitamin.pw" style="color:#000">Bitamin Blog</a>

  2. 使用style标签(内部样式)

    1
    <style type="text/css">a{color:#000;}</style>

  3. 引入外部Css文件(外部样式)

    1. 使用link标签引入Css文件

      1
      <link rel="stylesheet" href="CssBootStarp.css"/>

    2. 使用style标签引入Css文件

      1
      2
      3
      4
      5
      <style type="text/css">
        @import url("CssBootStarp.css");
        //@import "CssBootStarp.css"; 
      </style>
      <style src="CssBootStarp.css" ></style><!-- XHtml2 -->

      ​

关于link和@import的区别

  • 隶属：link是属于Html标签，import是Css样式style提供的引入一种方式
  • 限制：import只能引入31次Css文件，link不限制
  • 优先：使用link引入的Css文件在页面加载的时候会同时加载，而import会在页面加载完成后再加载
  • 兼容：import是在Css2.1提出的，只能在IE5以上才能识别，link无此问题
  • 控制：使用Js控制DOM(document.styleSheets)改变样式的时候，只能使用link，import不是标签，不能受DOM控制

关于Css的优先级问题

​ 行内样式 >>>>> 内部样式 >>>>> 外部样式

​ 就近原则，哪个距离html内容近则哪个优先

关于Css选择器的使用方式

关于选择器的种类

  1. 标签选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
      <head>
        <style type="text/css">
          a{color:#000;}
          p{color:#000;}
    	</style>
      </head>
      <body><a href="#">p</a><p>p</p></body>
      <footer></footer>
    </html>

  2. 类选择器 （类名不能以数字开头）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
      <head>
     	<style type="text/css">
          .c{
            color:#000;
          }
    	</style>
      </head>
      <body><p class="c">This is<pre>&lt;p&gt;</pre><P></P></p></body>
      <footer></footer>
    </html>

    ​

  3. id选择器 （id属性不能数字开头，id属性推荐在每个Html文档中只出现一次，方便Js控制）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
      <head>
      	<style type="text/css">
          #i{
            color:#000;
          }
    	</style>
      </head>
      <body><p id="i">This is<pre>&lt;p&gt;</pre><P></P></p></body>
      <footer></footer>
    </html>

  4. 交集选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
      <head>
     	<style type="text/css">
          #i pre{
            color:#000;
          }
          .c pre{
            color:#FFF;
          }
    	</style>
      </head>
      <body>
        <p id="i">This is<pre>&lt;p&gt;</pre><P></P></p>
      	<p class="c">This is<pre>&lt;p&gt;</pre><P></P></p>
      </body>
      <footer></footer>
    </html>

  5. 并集选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
      <head>
     	<style type="text/css">
          p h1{
            color:#000;
          }
    	</style>
      </head>
      <body>
      	<p class="c">This is<pre>&lt;p&gt;</pre><P></P></p>
    	<h1>h1</h1>
    	<h2>h2</h2>
    	<h3>h3</h3>
      </body>
      <footer></footer>
    </html>

    ​

  6. 派生选择器 （类似家庭但是有分级，按照元素一个个向右寻找）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <html>
      <head>
        <style type="text/css">
          p pre{
            color:#000;
          }
          p strong pre{
            color:#FFF;
          }
          p u a{
            color:#FFF;
          }
      	</style>
      </head>
      <body>
        <p id="i">This is<pre>&lt;p&gt;</pre><P></P></p>
      	<p class="c">This <strong><a href="#">is</a></strong><pre>&lt;p&gt;</pre></p>
    	<p class="c">This <u><a href="#">is</a></u></strong><pre>&lt;p&gt;</pre></p>
      </body>
      <footer></footer>
    </html>

  7. 后代选择器 （类似家庭，可以直接从左向右寻找该标签的子标签）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
      <head>
        <style type="text/css">
          p pre{
            color:#000;
          }
          p em{
            color:#FFF;
          }
    	</style>
      </head>
      <body>
        <p id="i">This is<pre>&lt;p&gt;</pre><P></P></p>
      	<p class="c">This <strong><em>is</em></strong><pre>&lt;p&gt;</pre><P></P></p>
      </body>
      <footer></footer>
    </html>

  8. 子元素选择器（类似父子，有直接关系，必须在第一级标签下的第二级标签才会选中）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
      <head>
      	<style type="text/css">
          p pre{
            color:#000;
          }
          h1 > u{
            color:#FFF;
          }
    	</style>
      </head>
      <body>
        <p id="i">This is<pre>&lt;p&gt;</pre><P></P></p>
    	<h1><u><em>This is </em></u><u><em>h1</em></u><u>h1</u></h1>
    	<h1><em><u>This is </u></em><u>h1</u></h1>
      </body>
      <footer></footer>
    </html>

  9. 相邻兄弟选择器（类似兄弟，并且最终选择是后者开始，且需要有相同的父元素， 相同子元素会在第二个开始到最后一个，不相同相邻子元素则只选择后者）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <html>
      <head>
      	<style type="text/css">
    	li+li{
          color:#555;
    	}
      	p+h1{
          color:#FFF;
      	}
    	</style>
      </head>
      <body>
        <div>
          <ul>
            <li>List item 1</li>
            <li>List item 2</li>//变色
            <li>List item 3</li>//变色
          </ul>
          <ol>
            <li>List item 1</li>
            <li>List item 2</li>//变色
            <li>List item 3</li>//变色
          </ol>
    	  <h1>This is h1</h1>
          <p>This is p</p>//变色
          <p>This is p</p>
        </div>
    	<h1>This is h1 </h1>
        <p>This is p </p>//变色
        <p>This is p </p>
      </body>
      <footer></footer>
    </html>

  10. 通用选择器（代表选择所有元素，优先级最低）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
  <head>
  	<style type="text/css">
      *{
        color:#000;
      }
	</style>
  </head>
  <body>
	<h1><u><em>This is </em></u><u><em>h1</em></u><u>h1</u></h1>
	<h1><em><u>This is </u></em><u>h1</u></h1>
  </body>
  <footer></footer>
</html>
  1. 伪类选择器
  • a:link //元素没有被访问过的状态（未点击过）
  • a:visited //元素已经访问过的状态（点击过，鼠标点击后放开）
  • a:hover //鼠标经过元素的状态（鼠标经过元素的时候）
  • a:active //鼠标按下激活元素的状态 （鼠标点击元素，还没放开的时候）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
  <head>
  	<style type="text/css">
      a:link{
        color:#F00;
      }
      a:visited{
        color:#0F0;
      }
      a:hover{
        color:#00F;
        font-size:24px;
      }
      a:active{
        color:#F0F;
      }
	</style>
  </head>
  <body>
	<a href="#">Bitamin</a>
  </body>
  <footer></footer>
</html>

关于选择器的优先级和选择器的使用例子

标签选择器 <<<<< 类选择器 <<<<< id选择器 <<<<<

选择器可以是类，标签和其他选择器或者d，标签和其他选择器相加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <head>
    <style>
      .c strong em{
        color:#000;
      }//类选择器+后代选择器+...
      .c pre,
      .c p{
        color:#000;
      }//类选择器+后代选择器+并集选择器
      h1 > u em{
        color:#FFF;
      }//子类选择器+后代选择器
      #i p u{
        color:#FFF;
      } ID选择器+后代选择器
 	</style>
  </head>
  <body>
    <p id="i">This is<pre>&lt;p&gt;</pre><P>1<u>2</u></P></p>
  	<p class="c">This <strong><em>is</em></strong><pre>&lt;p&gt;</pre><P></P></p>
	<h1><u><em>This is </em></u><u><em>h1</em></u><u>h1</u></h1>
	<h1><em><u>This is </u></em><u>h1</u></h1>
	<h1><u><em>This is </em></u><u>h1</u></h1>
  </body>
  <footer></footer>
</html>

关于CSS的定位

  1. 相对定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <html>
      <head>
    	<style type="text/css">
          div{
            border-style:solid;
            width:100px;
            height:100px;
          }
          .div2{
            position:relative; //相对定位
            top:10px; // 距离上一个对象边框10像素
            left:10px; //距离左边对象边框10像素
          }
        </style>
      </head>
      <body>
    	<div class="div1" >div1</div>
        <div class="div2" >div2</div>
        <div class="div3" >div3</div>
      </body>
      <footer></footer>
    </html>

  2. 绝对定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <html>
      <head>
    	<style type="text/css">
          div{
            border-style:solid;
            width:100px;
            height:100px;
          }
          .div1{
            position:absolute; //绝对定位
            color:#F00;
            top:200;
            left:400;
          }
        </style>
      </head>
      <body>
    	<div class="div1" >div1</div>
      </body>
      <footer></footer>
    </html>

  3. 固定定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <html>
      <head>
    	<style type="text/css">
          div{
            border-style:solid;
            width:100px;
            height:100px;
          }
          #div1{
            position:fixed; //固定定位
            top:400px;
            left:1000px;
          }
        </style>
      </head>
      <body>
        <div id="div1" ><img src=".../img.jpg"/></div>
      </body>
      <footer></footer>
    </html>

    ​

关于JavaScript

JavaScript的组成部分

  1. EMCAScript（基本语法）

  2. BOM（BrowSer Object Model）浏览器对象模型

    把浏览器中的各个部分都用一个对象描述，如果要操作浏览器的属性，就可通过BOM的对象进行操作。

    常用属性

    1. window 代表一个新开窗口

      常用方法：

      日常使用前缀window可省略，由于window是BOM中的顶层对象，因此调用可省略。

      1. open();
      2. resizeTo();
      3. moveBy();
      4. moveTo();
      5. setInterval();
      6. clearInterval();​
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      <!DOCTYPE html>
      <html>
        <head>
        <script type="text/javascript">
          var id;
          function showAd(){
            window.open("http://www.baidu.com","_blank","height=300px,width=300,top=100,toolbar=no,location=no","http://www.google.com");
          }//参数一为网址，二打开方式，三网页属性，四如果找不到参数一网页则用此处网页替代
          function change(){
            window.resizeTo(300,300);
          }
          function changeAdMap(){
            window.moveBy(200,200);
          }
          function schangeAdMap(){
            window.moveTo(700,300);
          }
          function openSetinterval(){
            id = window.setInterval("showAd()",2000);
          }
          function clearSetinterval(){
            window.clearInterval(id);
          }
        </script>
        <meta http-equiv="Content-Type" content="text/html ; charset=utf-8"/>
        </head>
        <body>
          <input type="button" onclick="showAd()" value="显示窗口"/>
          <input type="button" onclick="change()" value="更改当前窗口大小"/>
          <input type="button" onclick="changeAdMap()" value="相对移动当前窗口位置"/>
          <input type="button" onclick="schangeAdMap()" value="基于屏幕移动窗口位置"/>
          <input type="button" onclick="openSetinterval()" value="打开设置定时任务"/>
          <input type="button" onclick="clearSetinterval()" value="取消设置定时任务"/>
        </body>
      </html>
      ​```

    2. location 代表地址栏的对象

      location.href 地址字符串

      location.reload();重载页面

    3. screen 代表整个屏幕的对象

      screen.availHeight 获取系统屏幕工作区域高度，排除任务栏

      screen.availWidth 获取系统屏幕工作区域宽度，排除任务栏

      screen.height 获取系统屏幕的垂直分辨率

      screen.width 获取系统屏幕的水平分辨率

  3. DOM（Document Object Model）

JavaScript的函数创建方式以及使用

  1. 创建无形参函数和创建对象
    ​

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function kim(){}
    var kim = new kim();
    kim.id = 1;
    kim.name = "Bitamin";  
    kim.say = function(){  
      aleft("id:"+id+",name:"+name); 
    }   
    document.write("id:"+kim.id+",name:"+kim.name);   
    kim.say();

    ​

    ​

  2. 创建有形参函数和创建对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function kim(id,name){
      this.id = id;
      this.name = name;
      this.say = function(){
        aleft("id:"+id+",name:"+name);
      }
    }
    var kim = new kim(1,"Bitamin");
    document.write("id:"+kim.id+",name:"+kim.name);
    kim.say();

    ​

  3. 使用Object函数创建对象（JavaScript内置创建好的Object函数，可以直接使用）

    1
    2
    3
    4
    5
    6
    7
    8
    var Obj = new Object();
    Obj.id = 1;
    Obj.name = "Bitamin";
    Obj.say = function(){
      aleft("id:"+id+",name:"+name);
    }
    document.write("id:"+Obj.id+",name:"+Obj.name);
    Obj.say();

    ​

  4. 使用字面量的方式创建函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var kim = {
      id:1,
      name:"Bitamin",
      say:function(){
        aleft("id:"+id+",name:"+name);
      }
    }
    document.write("id:"+kim.id+",name:"+kim.name);
    kim.say();

    ​

    ​

JavaScript的事件注册方法

  1. 直接在Html元素标签里注册

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
      <body onload="ready()">
      </body>
      <script type="text/javascript">
        function ready(){
          alert("body loading done");
        }
      </script>
    </html>

  2. 直接在Js代码中找到对应对象注册

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
     <body id="body">
     </body>
     <script type="text/javascript" >
       var bodyNode = document.getElementByid("body");
       bodyNode.onload = function(){
         alert("body loading done");
       }
      </script>
    </html>

Javascript常用事件

  1. 鼠标点击事件
    1. onclick; 当用户左键单击对象时触发事件
    2. ondblclick; 当用户左键双击对象时触发事件
    3. onmousedown; 当用户用任意鼠标按钮单击对象时触发事件
    4. onmouseup; 当用户点击后释放按键的时候触发事件
  2. 鼠标移动事件
    1. onmousemove; 当用户鼠标指针移进对象边界触发事件
    2. onmouseout; 当用户鼠标指针移出对象边界触发事件
  3. 鼠标焦点事件
    1. onfocus; 当对象失去焦点时触发事件
    2. onblur; 当对象获得焦点时触发事件
  4. 其他事件
    1. onchange; 当对象或焦点内容改变时触发事件
    2. onload; 当浏览器完成所有对象的装载后触发事件
    3. onsubmit; 当表单将要被提交时触发

相关使用例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html ; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        //var id;
        function clickbutton(){
          alert("单击按钮");
        }
        function dbclickbutton(){
          alert("双击按钮");
        }
        function rbutton(){
          alert("任意点击按钮");
        }
        function outbutton(){
          alert("点击释放按钮");
        }
        function showTime(){
          var spanTime = document.getElementById("spanTime");
          var date = new Date().toLocaleString();
          spanTime.innerHTML = date.fontcolor("red");
        }
        function hideTime(){
          var spanTime = document.getElementById("spanTime");
          spanTime.innerHTML="";
        }
        function showUserText(){
          var userSpan = document.getElementById("userSpan");
          userSpan.innerHTML = "请输入用户名";
          //id = window.setInterval("changeUserText()",10);
        }
        function closeUserText(){
          var userSpan = document.getElementById("userSpan");
          userSpan.innerHTML = "";
          //window.clearInterval(id);
        }
        function changeUserText(){
          //document.getElementById("synText").value = document.getElementById("synUser").value;
          document.getElementById("synText").value = document.getElementById("synselect").value;
        }
        function formSubmit(){
          alert("提交完成");
        }
    </script>
  </head>
  <body id="body">
    <form onsubmit="formSubmit()" action="http://www.baidu.com">
        <input type="button" onclick="clickbutton()" value="单击按钮"/>
        <input type="button" ondblclick="dbclickbutton()" value="双击按钮"/>
        <input type="button" onmousedown="rbutton()" value="任意点击按钮"/>
        <input type="button" onmouseup="outbutton()" value="释放按钮"/>
        <br>
        <span onmousemove="showTime()" onmouseout="hideTime()">显示时间事件:</span><span id="spanTime"></span>
        <br>
        <input id="synUser" onfocus="showUserText()" onblur="closeUserText()" type="username"/><span id="userSpan"></span><br>
        <select id="synselect" onchange="changeUserText()">
          <option>北京</option>
          <option>上海</option>
          <option>广州</option>
        </select>
        <input id="synText" type="username" /><br>
        <input type="submit"/ value="提交">
    </form>
  </body>
  <script type=text/javascript>
    var loadBody = document.getElementById("body");
    loadBody.onload = function(){
      alert("bodyloading...");
    }
  </script>
</html>

​

​

本文标题:关于Html,Css,JavaScript的一些基础知识要点

文章作者:Bitamin Kim

发布时间:2016年12月27日 - 15时20分

最后更新:2017年01月31日 - 15时33分

原始链接:http://bitamin.pw/2016/12/27/关于Html,Css,Js的一些基础知识要点/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. html css javaScript 就类似MVC结构（不完全相同，还是有区别）
    1. 1.1. 介绍
    2. 1.2. 关于HTML
      1. 1.2.1. 主要结构和注意事项
    3. 1.3. 关于Css
      1. 1.3.1. Css的引用方式
      2. 1.3.2. 关于link和@import的区别
      3. 1.3.3. 关于Css的优先级问题
      4. 1.3.4. 关于Css选择器的使用方式
        1. 1.3.4.1. 关于选择器的种类
      5. 1.3.5. 关于选择器的优先级和选择器的使用例子
      6. 1.3.6. 关于CSS的定位
    4. 1.4. 关于JavaScript
      1. 1.4.1. JavaScript的组成部分
        1. 1.4.1.1. 常用属性
    5. 1.5. JavaScript的函数创建方式以及使用
    6. 1.6. JavaScript的事件注册方法
      1. 1.6.1. Javascript常用事件
      2. 1.6.2. 相关使用例子
,