零基础如何快速画页面(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;
}
- 练习&问问题(比如我想设置一个什么样的样式从上述代码中没找到,这时候就需要提问)