Html，CSS及JavaScript入门基础

作者: kevin_captain | 来源:发表于2018-12-07 16:33 被阅读1次

Date: 2018/10/1

1 Html简介

1.1 什么是Html？

Hyper Markup Language 超文本标记语言

标记网页的一种语言

1.2 Html是用来干嘛的？

用来方便程序员编写，浏览器识别以及渲染

2 Hello World

2.1 挑选合适的浏览器

推荐chrome 谷歌浏览器

2.2 挑选合适的开发工具

VS Code 下载地址

2.3 基本的HTML文档*

<!doctype html>  <!--告诉浏览器这是个HTML文档-->
<html>
    <head>

    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

现在流行移动优先，最基本的HTML骨架

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页在浏览器显示的标题</title>
</head>
<body>
    <h1>Hello World!</h1> 
</body>
</html>

2.4 父元素、子元素、后代元素和兄弟元素*

像<body>这些叫做元素 ,也称作标签

<body>   
    <div>1
        <p>hello world</p>
    </div>
    <div>2</div>
    <div>3</div>
</body>

如上：

每个div的父元素是body

body的子元素有div1,div2,div3

p和div都是body的后代元素

div1,div2,div3是互为兄弟元素

2.5 注释

以``结束的代码

2.6 HTML属性

类似

<div id="idname" class="classname"></div>

里的id和class是div标签的属性，属性值为双引号里面的值

2.７常用字符实体（了解）

字符	实体名称	实体编码
空格	& nbsp;	& #160;
<	& lt;	& #60;
>	& gt;	& #62;
&	& amp;	& #38;
¥	& yen;	& #165;
©	& copy;	& #169;
®	& reg;	& #174;
™	& trade;	& #8482;

因为我是采用markdown编辑的为避免被解析所以加上空格了，正式使用需要去掉&后面的空格

3 常用标签

3.1 div

块级元素，宽度默认为整个页面宽度，高度随内容而定，独占一行从上到下排列

可以看作是一个容器

<div>这里是一个容器</div>

3.2 span

行内元素，从左到右排列，表示一小块，多个span可以在同一行显示

<span>一周热门排行榜</span>

3.3 h1-h6

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
</body>
</html>

标题，从h1到h6为从大到小不同大小的标题文字

3.4 p

段落标签，里面的内容就是一个段落，独占一行

3.5 ul li无序列表

ul 是声明有一个无序列表

li 包含每一列表的内容

默认情况下每一列表独占一行

ol 有序列表

<ul>
    <li>我是第一列</li>
    <li>我是第二列</li>
</ul>

3.6 img

图片标签，有一个属性是src为图片地址，alt属性是在图片没有正式加载的时候显示的内容

<img src="../logo.png" alt="我是一张图片">

3.7 a

 <a href="http://www.baidu.com/" target="_blank">百度一下</a>

表示一个链接，href="http://www.baidu.com/"里的内容就是要跳转的链接，加上target="_blank"表示弹出新的窗口打开这个链接，target属性不写的话默认是在本窗口打开链接

3.8 form 表单

fieldset, legend标签

<form>
    <fieldset>
        <legend>我是表单标题</legend>
    </fieldset>
</form>

表单标题也可以不写

3.9 input

<input type="text" value="Kevin">
<input type="password" placeholder="请输入密码">
<input type="button" value="登录">

type属性表示输入框的类型，text是文本输入框，password是密码输入框，button表示一个按钮

value属性表示输入框里面的内容

placeholder属性表示占位字符，做提示用。

3.10 button

按钮

<button>登录</button>

3.11 select > option

下拉选框

<select>
      <option value="">成都</option>
      <option value="">北京</option>
      <option value="">上海</option>
 </select>

select声明下拉选择框，option是选项，value表示选项的值

4 CSS简介

4.1 什么是CSS

类似房子进行装修一样，网页也需要css的装修，css是网页的样式表现形式

4.2 引入CSS的三种方式

1.直接在标签里面写属性style

<div style="background-color:red;">
      <p>Hello world</p>
 </div>

2.在head里面写style标签

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: red;
        }
    </style>
</head>
<body>
  
</body>
</html>

3.link的href属性，引用外部css文件

<link rel="stylesheet" href="./app.css">

4.3 CSS基本语法

body{
    background-color: red;
}

选择器{

属性名1：属性值2;

属性名2：属性值2;

...

}

4.4 三种基础选择器

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        background-color: red;
    }
    .box{
        margin: 10px;
        width: 100px;
        height: 100px;
        background-color: white;
    }
    #con{
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="con"></div>
</body>
</html>

1.标签选择器：直接写元素的标签名，如body选中body元素，设置body元素的css样式

2.类选择器，以.开头接标签的class属性值

3.id选择器，以#开头接标签的id属性值

4.5 基本属性

4.5.1 颜色表示方式

可以用rgb， rgba, 十六进制或颜色名称

1.背景颜色

background-color: rgb(255,0,0);

background-color: rgba(255,0,0,0.5);

rgba比rgb多了个透明值a，取值范围0~1，其他取值范围0~255

2.字体颜色

color: #ffffff;

color: black;

4.5.2 边框border

border: 1px solid green;设置边框为实线1,宽度为1px且颜色为绿色

border-top:1px solid green;只设置了上边框样式

同理有

border-left

border-right,

border-bottom

4.5.3 字体相关属性

字体族，大小，宽度，颜色

font-size: 52px;    /*字体大小*/
font-weight: 800;  /*字体粗细，从100~900不同取值*/
font-family: "宋体";  /*字体族*/

4.5.4 文本相关属性

对齐方式，字间距

text-align: left;       /*左对齐*/
text-align: center;     /*居中对齐*/
text-align:right;       /*右对齐*/
letter-spacing: 6px;    /*字间距6px*/

4.6 布局

4.6.1 盒子模型

如下图所示，css的元素是按外边距，边框，内边距，内容一层套一层的盒子布局的，其中width和height一般是指内容的宽高

1538398958904.png

4.6.2 外边距margin

不同块与块之间的间距

margin: 10px; 表示上下左右都有10px的外边距

margin: 10px 20px; 表示上下是10px边距，左右是20px边距；

margin: 10px 20px 30px; 表示上边距为10px，左右边距为20px，下边距30px;

margin-(top,left,right,bottom)表示单独设置上下左右边距，如：

margin-top:10px;表示设置上边距为10px;

4.6.3 内边距padding

块的内容与边框之间的间距

与margin的用法一样；

注意：background-image：url("../logo.png");表示背景图片，或背景颜色，所覆盖的范围是content+padding+border

4.7 浮动*

css里的float属性，有left, right两个值

4.8 定位*

4.8.1 相对定位 relative

含position:relative;定位的元素会相对自己本身应该所在位置进行定位布局，定位布局的值看top,left,right,bottom四个属性的值

4.8.2 绝对定位 absolute

含position:absolute;定位的元素会根据有定位属性的（设置了position值的）父元素进行位置定位，定位布局的值看top,left,right,bottom四个属性的值，如果父元素没有定位属性，就找父元素的父元素，一直往上找直到有定位的父元素或body为止。

4.8.3 固定定位 fixed

含position:absolute;定位的元素会相对文档窗口进行定位，有些网页中一直黏在右下角的广告就是用的这种定位。

4.9 其他选择器

4.9.1 相邻兄弟选择器 +与~

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1+p{
            color: red;
        }
    </style>
</head>
<body>
  <h1>Hello World</h1>
  <p>我会是红色的文字</p>
  <p>我还是一般的文字</p>
</body>
</html>

如上代码里面，h1+p表示设置的是与h1相邻的p的样式，结果如图：

1538408791375.png

兄弟选择器~，看代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1~p{
            color: red;
        }
    </style>
</head>
<body>
  <h1>Hello World</h1>
  <p>我会是红色的文字</p>
  <p>我也是红色的文字</p>
</body>
</html>

设置所有的兄弟p标签，结果如图：

1538408991854.png

4.9.2 多元素选择器 ,

用来设置多个元素的共同CSS属性，如下代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1,p{
            color: red;
        }
    </style>
</head>
<body>
  <h1>Hello World</h1>
  <p>h1里面是红色的字</p>
  <p>p里面也是红色的字</p>
</body>
</html>

1538409180823.png

4.9.3 后代选择器

用空格表示CSS的后代选择器，如代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
  <div>
    <span>
        <p>我是div的后代所以我是红色的</p>
    </span>
  </div> 
  <p>我不是div的后代所以不是红色</p>
</body>
</html>

1538409346691.png

4.9.4 子元素选择器 >

子元素选择器与后代选择器不同点就是后代选择器中间可以省略子代等直接到孙代，子元素选择器的>后面必须是子元素

4.9.5 属性选择器 []

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p[title]{
            color: red;
        }
    </style>
</head>
<body>
  <p title="段落">我有title属性所以我是红色的</p>
  <p>我没有title属性我不是红色的</p>
</body>
</html>

1538409577064.png

4.9.6 :hover伪类

用法：

a:hover{
    属性组
    ...
}

表示当鼠标在选择器选中的元素上面悬停时，元素所展示的样式

5 JavaScript简介

5.1 JS有什么作用？

动态设置网页样式，动画，与后端交互等

5.2 JS的引用方式

1.直接在body里面写<script>在这里写js脚本</script>标签

2.引用外部文件<script src="外部JS脚本地址.js"></script>

6 JS版Hello World

6.1 学会使用调试窗口

一般的浏览器都可以使用调试模式，快捷键 F12，转到console菜单，输入console.log("Hello World");

1538539640598.png

7 JS 的基本语法

7.1 注释与区分大小写

注释形式：

行注释

// 这是一段注释
console.log("Hello World");

块注释
```
/* 
我是一个块注释，
这一段都是注释
现在还是注释
*/
```
JavaScript是区分大小写的，所以不论变量，标识符，关键字的大小写都要对应区分

7.2 数据类型与变量

JS 中用var来声明变量，在ES6中还有let也可以用来声明局部变量

7.2.1 3个值类型

Number,String, Boolean

Number是数字类型，包括整型，浮点型，如下

var a = 1;  //整型
var b = 0.1; //浮点型

String是字符串类型，用 " " 或 ‘ ’表示

var s1 = "Hello";
var s2 = 'world';

Boolean是布尔类型，它只有两个值，分别为true和false，表示判断的两种取值

7.2.2 5个引用类型

Object, Array, Function, Date 和 RegExp

var obj = new Object();   // {}
var arr = new Array();    // []
var fuc = new Function();  // function anonymous(){}
var date = new Date();  // 当前日期时间区间
var reg = new RegExp();  ///(?:)/

引用类型都可以使用new操作符来实例化，这里不明白没关系我们看后面

7.3 变量作用域

全局变量和局部变量

var a = "我是全局变量a";
function f(){
    var a = "我是局部变量a";
    console.log(a);     
}
f();    // 我是局部变量a
console.log(a); //我是全局变量a

局部变量在函数内部，不能被函数外面的console.log(a)调用，全局变量可以被调用

7.4 对象

Object表示对象，在JS中可以这样表示对象：

var xiaoming = {
    name:"xiaoming",
    age:18,
    sex:"male",
    speak:function(){
        console.log("I am XiaoMing!");
    }
}
xiaoming.speak();   // I am XiaoMing!

上面是声明和定义了一个对象叫做xiaoming，然后xiaoming有一些属性name, age, sex，它还有一个方法speak()，要使用对象里面的方法和属性直接用符号.

7.5 数组

Array是数组，数组也是一个对象，在JS里面我们声明数组的方式如下：

var arr = [1,2,3,4];
console.log(arr[0]);  //1
console.log(arr[1]);  //2
console.log(arr[2]);  //3
console.log(arr[3]);  //4
console.log(arr.length);  //4

调用数组里面的值时用数组名[下标]表示，下标从0开始，如要获取数组里面的2，我们写成arr[1]

7.6 函数

function f1(){
    console.log("我是函数f1");
}
var f2 = function(){
    console.log("我是函数f2");
}
function f3(_name){
    var name = _name || "Kevin";
    console.log("Hello "+ name);
}
/*调用函数f1和f2*/
f1();    //我是函数f1
f2();   //我是函数f2
f3();   // Hello Kevin
f3("Bob");  //Hello Bob

JS中，可以这样两种方式定义函数，调用函数时都是函数名()，像f3()是多了个参数，var name= _name || 'Kevin'表示给参数_name设置一个默认值为Kevin

7.7 运算符

参考w3school运算符

注意：++i与i++, i++表示先用i后再将i+1，++i表示先加1再用i

7.9 结构

7.9.1 顺序语句

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);   // 1 2 3 4 5

像这样，从语句一条一条执行下来，叫做顺序执行（顺序语句）

7.9.2 判断语句

var a = 0.1;
var b = 0.2;
var c = a + b;
if (c == 0.3){
    console.log("Y");
}else{
    console.log("N");
}

注意：最终输出N，因为在JS中，浮点数的加减是不准确的，最终c会为0.30000...1，所以大家记住这一点，如果var c = (a*10 +b*10)/10那么就输出Y，所以判断浮点型最好将其先转换为整型运算在做除法

判断语句还有

if (){}
    //或
if (){
    
}else if(){
         
}

两种形式

7.9.3 选择语句

var a = 2;
switch(a){
    case 1:
        console.log(1);break;
    case 2:
        console.log(2);break;
    case 3:
        console.log(3);break;
    default:
        console.log(0);
}

最后输出2,switch是用来判断a是否满足case里面的三个选项，这是a=2的，所以满足case 2那么就执行冒号后面的语句，最后有个break就会跳出switch代码块，如果没有写break的话，后面的case 3与default语句内容都会被执行！default表示当a不满足任何一个case选项时执行的代码；

7.9.4 循环语句

var a = [1,2,3,4,5];
for (var i=0; i<a.length; i++){
    console.log(a[i]);
}

依次输出1,2,3,4,5这就是循环的作用,for循环有三个参数，第一个参数是下标的初始值，第二个参数是可以执行循环的条件，第三个参数是每次循环的最后需要执行的语句，可见每次循环之后下标i都加了1。

var a = [1,2,3,4,5];
var i = 0;
while(i<a.length){
    console.log(a[i]);
    i++;
}

while循环只有一个参数，表示当参数是true时，执行while代码块的内容，否则跳出循环

var a = [1,2,3,4,5];
var i = 0;
do{
    console.log(a[i]);
    i++;
}while(i<a.length)

do...while()的用法跟while相似

7.10 定时器

var a = "Hello";
var b = "Bob";
console.log(a);
setTimeout(function(){
    console.log(b);
},3000);

setTimeout(f,time)表示在延时time毫秒之后执行f函数里面的内容