前言

这篇是我在学前端的时候做的笔记，可能比较混乱

大概分为四个部分：HTML，CSS，JS，Vue

任何一个页面的渲染，都是由 HTML 文件实现的，HTML 是一种超文本标记语言，类似于 markdown 语法，用它可以实现基本的不同文本的显示效果，比如：加粗，改颜色等等，同时引入了各种标签比如容器，针对一个段落来进行添加不同属性，但是其中最重要的，是表单，它是 HTML 前端代码和后端交流的核心组件

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>一个标题</title>
    </head>
    <body>

        <h1>我的第一个标题</h1>

        <p>我的第一个段落。</p>

    </body>
</html>

html 的格式由 <> </> 标签进行区分，一般分为 head 和 body，head 中可以设定这个 html 使用的基本字符集和标题等效果。body 中则可以添加各种内容实现文字/图片的渲染

各种标签

head 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<title>标题</title>
<base href="http://myweb/imgaes/"><!--表示默认链接-->
<link rel="stylesheet" type="text/css" href="mystyle.css"><!--导入外部样式表-->
<style type="text/css">
    body{
        background-color:yellow;
    }
    p{
        color:blue
    }
</style><!--内部样式表，一般不用，一般直接link外部-->
<meta name="元信息，不详细说明了">
<script>js脚本</script>

body 标签

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
<h1>一级标签，可以将数字改大变为其它等级的标签</h1>
<p>段落</p>
<p>
    aaaa<br>左边是一个换行，如果只有一个段落可以用这个换行
</p>	
<hr> <!-- 左边是水平分割线-->
<a href="http://pri87.vip">这是一个链接。在标签中有等号的是属性值，比如这个的href还有下面那个src等等</a>
<a href="http://pri87.vip/a.pdf" download="example.pdf">表明下载而不是跳转</a>
<img src="/images/属性值必须用引号.png" width="11" height="11" alt="如果没加载出来则显示"/>
<p class="color_red fort_size_big">class可以定义类,用于css样式选择器,用空格隔开定义两个类</p>

<table><!-- 表格-->
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

<ul><!-- 无序列表-->
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol><!-- 有序列表-->
<li>Coffee</li>
<li>Milk</li>
</ol>

格式化文本效果

标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

CSS

内联使用
1
2
3
4
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<h1 style="text-align:center;">居中对齐的标题</h1>
内联样式表
1
2
3
4
5
6
<head>
    <style type="text/css">
        body {background-color:yellow;}
        p {color:blue;}
    </style>
</head>
外部样式表
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

区块与布局

区块用于分组内容

1
2
3
4
5
6
7
8
9
10
11
12
<div>
    <p>
        h1,p,ul,table等是块级元素，每个都会占一行
    </p>
    <p>
        b,td,a,img是内联元素，下一个元素在这一个元素之后继续，而不会换行
    </p>
    <p>
        区块可以将多个元素组合，是块级元素，用来对大的内容块进行样式设置
        <span>而span是内联元素，用来给少部分文本设置样式</span>
    </p>
</div>

布局用于分块整个页面

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
<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>菜鸟教程(runoob.com)</title> 
    </head>
    <body>

        <div id="container" style="width:500px">

        <div id="header" style="background-color:#FFA500;">
        	<h1 style="margin-bottom:0;">主要的网页标题</h1>
        </div>

        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>

        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        	内容在这里
        </div>

        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        喵喵喵</div>

        </div>

    </body>
</html>

css 的 float 属性为不同 id 设置了不同位置取消了块级元素基本设定，通过不同的宽高来组合实现布局

布局十分重要，是好看的网站效果必须的内容

表单

表单是收集用户输入，实现高级功能最重要的东西。

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
<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

上面是例子

1
2
3
4
<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

输入元素： 标签，输入类型由 type 定义

具体类别见上

submit 中，定义了 action 传给的文件，method 是传递方式，post 和 get

post 是在报文体中发送，get 则是在 action 属性的 url 中用?作为分隔符发送

CSS

之后只会直接放在 css 文件中而不是直接内嵌在 html 代码中

选择器

格式：选择器+样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
默认选择器
*{
	margin:0;
    padding:0;
}
元素选择器
p{
    font-size:14px;
}
span{
    color:red;
}
类选择器,.开头
.oneclass{
    width:100px;
}
id选择器,id是唯一的
#title1{
    font-size:15px;
}
合并选择器
h3,h2{
    color:blue;
}

选择器优先级：行内样式>ID选择器>类选择器>元素选择器>默认

后代选择器：选择E中的所有F

1
E F{}

子代选择器：选择E下一级的F

1
E>F{}

相邻兄弟选择器：选择E和后面相邻的P

1
E+P{}

通用兄弟选择器：选择E和后面所有的P

1
E~P{}

样式

字体属性

颜色
1
2
3
4
div{color:red;}
div{color:#ff0000;}
div{color:rgb(255,0,0);}
div{color:rgba(255,0,0.5);}
大小
1
p{font-size:12px;}
粗细
1
2
3
4
5
div{font-weight:normal;}
div{font-weight:bolder;}
div{font-weight:lighter;}
div{font-weight:100;}
div{font-weight:900;}
斜体
1
2
div{font-style:normal;}
div{font-style:italic;}
字体
1
div{font-family:"A字体","B字体";}

背景属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div{background-color:red;}
div{background-image:url("1.jpg")}

div{background-position:left top;}设置起始位置
div{background-position:center bottom;}
div{background-position:right center;}


div{background-repeat:repeat}平铺方式
div{background-repeat:repeat-x}
div{background-repeat:repeat-y}
div{background-repeat:no-repeat}

div{background-size:1000px 1200px}
div{background-size:50% 50%}
div{background-size:cover}最小填充满
div{background-size:contain}最大缩放满

文本属性

1
2
3
4
5
6
7
8
9
10
11
12
13
h1{text-align:center}水平对齐
h1{text-align:left}
h1{text-align:right}

h1{text-decoration:overline}加线
h1{text-decoration:line-through}
h1{text-decoration:underline}

h1{text-transform:captialize}大小写
h1{text-transform:uppercase}
h1{text-transform:lowercase}

p{text-indent:50px}首行缩进

太多了，之后只放重点一点的

表格属性

略

盒子模型

外边距，边框，内边距，实际内容

内边距：padding，使得内容靠中心

边框：border，就是边框

外边距：margin，元素和元素的间隔

1
2
3
4
5
6
7
8
9
10
11
div{
	padding: 50px 20px;
    border:5px solid blue; 
    margin: 50px;
}
div{
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
}

弹性盒子

弹性盒子内默认横向摆放

略

浮动

脱离文档流，在新的层出现会覆盖底层，在浮动层可以让元素横向排放

略

定位

绝对定位和固定定位会脱离文档流

略

CSS3

圆角

1
*{border-radius:10px 10px 10px 10px}

阴影

1
box-shadow

动画

1
2
3
4
5
6
7
8
9
10
11
@keyframes name{
    from|0%{
        css样式
    }
    percent{
        css样式
    }
    to|100%{
        css样式
    }
}
1
{animation: name duration timeing-function delay iteration-count direction;}
1
2
3
div:hover{

}

鼠标划上的效果

媒体查询

根据设备及时修正大小，排布

1
<meta name="viewport"content="width=device-width,initial-scale=l,maximum-scale=l,user-scalable=no">

略

雪碧图

略

字体图标

略

JavaScript

引入JS

嵌入html

1
2
3
4
5
<body>
    <script>
        var age = 10
    </script>
</body>

引入本地js

1
2
3
<body>
    <script src='./hello.js'></script>
</body>

引入网络js

1
2
3
<body>
    <script src='http://code.jquery.com/jquery1.2.1.min.js'></script>
</body>