零基础如何快速画页面（VUE篇）第一天
学习规划
- 使用HTML&&CSS画一个静态页面（最基础的静态页面所需要掌握的内容；时间：5天）
- 简化代码（充分理解代码含义；时间：2天）
- 简单学会JS（简单学习即可，复杂逻辑对于速成没必要；时间：2天）
- 使用Vue重新画一遍（学习Vue的过程：时间：5-7天）
- 简化代码（实践；时间：2天）
- 用JS简化VUE代码（把学到的知识整合；时间：2-3天）
- 用其他方法完成简化前代码（等同于重新写页面，收益：偷懒；时间：4-6天）
- 静态页面练习（可有可无，只要能写就行）
- 总结：打个比方，HTML是一个娃娃，CSS就是衣服，JS是赋予这个娃娃行动力的能力，Vue是将上述三种能力结合起来的也可以说vue是一个工厂
HTML&&CSS（这里只是提供了常见的并不是所有）
- 了解几个特殊的标签（在html中所有的<>都可以叫做标签or元素），这里还需要了解标签属性
- 标签（常见）
- 块级元素（不可“并行”元素，也就是同一行只会出现一个），常见的有：div、p、hx（数字代表x：1-6）、ul、ol、li、table、tr、td。之后用的对多的几个div、p
- 行内元素：span、a、img、表单元素。行内元素顾名思义，可以同时存在一行内的元素，也就是说可并行元素
- 行内元素和块级元素除了，不能在同一行出现之后，还有行内元素设置宽高不生效，块级元素的宽度在不设置的情况下同父级元素一致，而高度则由内容决定
- 几个特殊的标签但是只需要知道即可：html（根标签）、body（体标签）、style（写css的标签）
- 属性（常见）
- class：类名（也可以说是一个代号，比如红色、黄色）作用是关联css样式
- id：唯一标识
- style：行内写样式的地方
- src：路径，一般只有img用的到
- 开发软件推荐vscode：https://code.visualstudio.com/（下载后可根据自己的喜好去安装插件，建议英语不好的同学首先安装Chinese）
- 了解标签和使用—第一个静态页面
- 标签（常见）
<!-- 声明此文件为超文本标记语言 不用管他，想创建一个此模版的只需要在vscode 创建一个.html文件输入英文叹号回车 -->
<!DOCTYPE html>
<!-- 添加根标签 lang就是一个属性，没啥用的不用关注值是什么 -->
<html lang="en">
<!-- 头部标签用于存放一些指定字符编码以及网页标题等，不用关注 -->
<head>
<!-- 指定字符编码 -->
<meta charset="UTF-8">
<!-- 窗口适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
<!-- 头部标签结束 -->
</head>
<!--
这里需要提一嘴，有的标签是双标签，有的是单标签（也叫做自闭合标签）
常见的都是双标签，单标签有img、input、video等
单标签也可以写成双标签的形式，但是不推荐
-->
<style>
#box {
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 背景色，这里的颜色可以是css预设的颜色也可以是rgb，rgba，还可以设置十六进制的 */
background-color: skyblue;
/* 外，这里设置的上下左右都是20px */
/* 还可以分别设置margin-top,margin-bottom,margin-left,margin-right */
margin: 20px;
/* 外，这里设置的上下20px，左右是10px */
margin: 20px 10px;
/* 外，这里设置的上20px，左右是10px，下是0px */
margin: 20px 10px 0;
/* 外，这里设置的上20px，右是10px，下是0px，左是2px */
margin: 20px 10px 0 2px;
/* 内边距，这里设置的上下左右都是20px */
/* 还可以分别设置padding-top,padding-bottom,padding-left,padding-right */
padding: 20px;
/* 内边距，这里设置的上下20px，左右是10px */
padding: 20px 10px;
/* 内边距，这里设置的上20px，左右是10px，下是0px */
padding: 20px 10px 0;
/* 内边距，这里设置的上20px，右是10px，下是0px，左是2px */
padding: 20px 10px 0 2px;
/* 边框，这里分别是边框宽度、边框类型、边框颜色 */
border: 2px solid red;
/* 文字大小，单位暂时记px */
font-size: 20px;
/* 文字宽度，400是正常，小于400则是变细后的文字，大于400则是加粗文字 */
font-weight: 700;
/* 文字 */
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
/* 行高，设置一行文字的行高，主要用于解决间距问题和文字部分情况的垂直居中问题 */
line-height: 40px;
/* 相对定位，会占有原来的位置 */
position: relative;
}
.ab {
/* 绝对定位，会脱离原来的位置（俗话说就是飘了），在使用绝对定位的时候一定要注意，要以哪个元素作为基准，做到基准元素也有定位，常见的还有一个固定定位，其他的用的不多 */
position: absolute;
/* 距离上边的距离 */
top: 20px;
/* 距离左边的距离 */
left: 20px;
/* 距离下边的距离 */
bottom: 10px;
/* 距离右边的距离 */
right: 30px;
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 圆角，这里可以通margin相同的位置 */
border-radius: 20px;
/* 背景色 */
background-color: green;
/* 鼠标手势，此设置为小手 */
cursor: pointer;
}
</style>
<!-- 体标签，也就是内容区域 -->
<body>
<!-- 最常见的也是使用最多的div标签，没有什么自带的样式相对来说比较干净纯洁 -->
<div>我是div标签</div>
<!-- 带有自己的上下间距 -->
<p>我是段落标签</p>
<!-- 这是一个分割线标签 -->
<hr />
<!-- 以下的都是标题标签，都会有自己的字体和上下间距 -->
<h1>标题标签</h1>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
<!-- 无序列表，有自带的列表样式，注意li只能在ul/ol里面，不可以单独存在，而ul/ol里面最好不要出现别的元素 -->
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
</ol>
<!-- 表格元素，其中tr代表行，th代表表头，td代表的是每个单元格，默认是没有边框的 -->
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
<!-- span普通行内元素，无特殊样式 -->
<span>我是span标签</span>
<!-- 超链接标签，href的值是一个链接或者是一个锚点 -->
<a href="www.baidu.com"></a>
<!-- src图片地址，可以是本地路径也可以是网上地址 -->
<img src="图片地址" alt="图片损坏时的文字提示">
<!-- 表单元素，常见的输入框，按钮，之后我们有组件库不需要深入学习 -->
<input type="text" />
<button>按钮</button>
<!-- class是类名，id是唯一标识，这里用来绑定样式的 -->
<div class="box" id="box">
我是一个盒子
<div class="ab">我是一个定位的元素</div>
</div>
</body>
</html>
- 知道样式（css）如何设置，需要掌握的如下：
- 宽高（这里就有单位的涉及，一般是px、%和vh/vw）
- 字体设置
- 背景设置（纯色or图片）
- 定位
- 盒模型
- flex布局
- 其他（手势、圆角、换行、变换等）
#box {
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 背景色，这里的颜色可以是css预设的颜色也可以是rgb，rgba，还可以设置十六进制的 */
background-color: skyblue;
/* 外，这里设置的上下左右都是20px */
/* 还可以分别设置margin-top,margin-bottom,margin-left,margin-right */
margin: 20px;
/* 外，这里设置的上下20px，左右是10px */
margin: 20px 10px;
/* 外，这里设置的上20px，左右是10px，下是0px */
margin: 20px 10px 0;
/* 外，这里设置的上20px，右是10px，下是0px，左是2px */
margin: 20px 10px 0 2px;
/* 内边距，这里设置的上下左右都是20px */
/* 还可以分别设置padding-top,padding-bottom,padding-left,padding-right */
padding: 20px;
/* 内边距，这里设置的上下20px，左右是10px */
padding: 20px 10px;
/* 内边距，这里设置的上20px，左右是10px，下是0px */
padding: 20px 10px 0;
/* 内边距，这里设置的上20px，右是10px，下是0px，左是2px */
padding: 20px 10px 0 2px;
/* 边框，这里分别是边框宽度、边框类型、边框颜色 */
border: 2px solid red;
/* 文字大小，单位暂时记px */
font-size: 20px;
/* 文字宽度，400是正常，小于400则是变细后的文字，大于400则是加粗文字 */
font-weight: 700;
/* 文字 */
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
/* 行高，设置一行文字的行高，主要用于解决间距问题和文字部分情况的垂直居中问题 */
line-height: 40px;
/* 相对定位，会占有原来的位置 */
position: relative;
}
.ab {
/* 绝对定位，会脱离原来的位置（俗话说就是飘了），在使用绝对定位的时候一定要注意，要以哪个元素作为基准，做到基准元素也有定位，常见的还有一个固定定位，其他的用的不多 */
position: absolute;
/* 距离上边的距离 */
top: 20px;
/* 距离左边的距离 */
left: 20px;
/* 距离下边的距离 */
bottom: 10px;
/* 距离右边的距离 */
right: 30px;
/* 宽度 */
width: 100px;
/* 高度 */
height: 100px;
/* 圆角，这里可以通margin相同的位置 */
border-radius: 20px;
/* 背景色 */
background-color: green;
/* 鼠标手势，此设置为小手 */
cursor: pointer;
}
- 练习&问问题（比如我想设置一个什么样的样式从上述代码中没找到，这时候就需要提问）
1838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
