Html，CSS及JavaScript入门基础

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函数里面的内容

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,723评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,485评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,998评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,323评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,355评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,079评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,389评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,019评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,519评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,971评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,100评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,738评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,293评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,289评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,517评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,547评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,834评论 2赞 345