HTML标签
HTML文档结构
head
少年的博客
body
Junior
style
script
格式
| 标签 | 描述 |
|---|---|
| acronym | 定义只取首字母的缩写。 |
| ababr | 定义缩写。 |
| address | 定义文档作者或拥有者的联系信息。 |
| b | 定义粗体文本。 |
| bdi | 定义文本的文本方向，使其脱离其周围文本的方向设置。 |
| bdo | 定义文字方向。 |
| big | 定义大号文本。 |
| blockquote | 定义长的引用。 |
| center | 不赞成使用。定义居中文本。 |
| cite | 定义引用(citation)。 |
| code | 定义计算机代码文本。 |
| del | 定义被删除文本。 |
| dfn | 定义定义项目。 |
| em | 定义强调文本。 |
| font | 不赞成使用。定义文本的字体、尺寸和颜色 |
| i | 定义斜体文本。 |
| ins | 定义被插入文本。 |
| kbd | 定义键盘文本。 |
| mark | 定义有记号的文本。 |
| meter | 定义预定义范围内的度量。 |
| pre | 定义预格式文本。 |
| progress | 定义任何类型的任务的进度。 |
| q | 定义短的引用。 |
| rp | 定义若浏览器不支持 ruby 元素显示的内容。 |
| rt | 定义 ruby 注释的解释。 |
| ruby | 定义 ruby 注释。 |
| s | 不赞成使用。定义加删除线的文本。 |
| samp | 定义计算机代码样本。 |
| small | 定义小号文本。 |
| strike | 不赞成使用。定义加删除线文本。 |
| strong | 定义语气更为强烈的强调文本。 |
| sup | 定义上标文本。 |
| sub | 定义下标文本。 |
| time | 定义日期/时间。 |
| tt | 定义打字机文本。 |
| u | 不赞成使用。定义下划线文本。 |
| var | 定义文本的变量部分。 |
| wbr | 定义视频。 |
链接
| 标签 | 描述 |
|---|---|
| a | 定义锚。 |
| link | 定义文档与外部资源的关系。 |
| nav | 定义导航链接。 |
音频/视频
| 标签 | 描述 |
|---|---|
| audio | 定义声音内容。 |
| source | 定义媒介源。 |
| track | 定义用在媒体播放器中的文本轨道。 |
| video | 定义视频。 |
图像
| 标签 | 描述 |
|---|---|
| img | 定义图像。 |
| map | 定义图像映射。 |
| area | 定义图像地图内部的区域。 |
| canvas | 定义图形。 |
| figcaption | 定义 figure 元素的标题。 |
| figure | 定义媒介内容的分组，以及它们的标题。 |
转义符
| 实体字符 | 编译后的字符 |
|---|---|
< |
小于号 < |
> |
大于号 > |
& |
于号 & |
|
空格 |
© |
版权 |
× |
乘号 |
÷ |
除号 |
标签元素
块级元素
块级元素(相当执行了 display:block)
1.独占一行 宽度和高度是可控的,如没有设置宽度将默认铺满
2.其行内可以包含块级和行级元素
行级元素
行级元素(相当执行了 display:inline)
1.不会独占一行,与相邻的行级元素占同一行
2.宽高是不可控的
3.其行内只有包含行级元素
Emmet语法
2-1. 后代：>
nav>ul>li
2-2. 兄弟：+
div+p+bq
2-3. 上级：^
div+div>p>span+em^bq
div+div>p>span+em^^bq
2-4. 分组：()
(1)缩写↓
div>(header>ul>li*2>a)+footer>p
(2)缩写↓
(div>dl>(dt+dd)*3)+footer>p
2-5. 乘法：*
缩写↓
ul>li*5
2-6.自增符号：$
1)缩写↓
ul>li.item$*5
(2)缩写↓
h$[title=item$]{Header $}*3
Header 1
Header 2
Header 3
(3)缩写↓
ul>li.item$$$*5
(4)缩写↓
ul>li.item$@-*5
(5)缩写↓
ul>li.item$@3*5
2-7.ID和类属性
(1)缩写↓
#header
(2)缩写↓
.title
(3)缩写↓
form#search.wide
(4)缩写↓
p.class1.class2.class3
2-8.自定义属性
(1)缩写↓
p[title="Hello world"]
(2)缩写↓
td[rowspan=2 colspan=3 title]
(3)缩写↓
[a='value1' b="value2"]
2-9.文本：{}
(1)缩写↓
a{Click me}
Click me
(2)缩写↓
p>{Click }+a{here}+{ to continue}
Click here to continue
2-10.隐式标签
(1)缩写↓
.class
(2)缩写↓
em>.class
(3)缩写↓
ul>.class
(4)缩写↓
table>.row>.col
HTML标签语法
3-1. 所有未知的缩写都会转换成标签
缩写↓
hangge
3-2.基本html标签
!
Document
a
a:link
a:mail
link:css
link:print
link:favicon
link:touch
meta:utf
meta:win
meta:vp
meta:compat
script:src
iframe
form
form:get
inp
input:hidden
input:h
input:text, input:t
input:search
input:email
html:xml
CSS属性
宽高
height: 310px;
width: 65%;
动画简写属性
animation 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束状态
animation: name duration timing-function delay iteration-count direction fill-mode;
背景 background
/* 背景图片 */
background: no-repeat center/100% url("../img/index.png");
/* 背景颜色 */
background-color: #ffffff;
/*背景透明*/
background-color: hsla(0,0%,100%,.7);
浮动 float
float: left;
字体 font
/* 字体颜色 */
color: #888888;
/* 字体粗细 */
font-weight: 400;
/* 字体大小 */
font-size: 14px;
/* 文字居中 */
text-align: center;
/* 字体行内居中 */
line-height: 45px;
/*字体加深*/
text-shadow: 0 0 1px rgba(0,0,0,.3);
/*起始段落空2格*/
text-indent: 2em;
盒子边距 margin | padding
/* 外边距 */
margin: 60px 0 0 -40px;
/* 居中显示 */
margin: 0 auto;
/* 向下10px */
margin-bottom: 10px;
/* 外边距 */
padding: 15px 0 10px 12px;
透明
opacity: 0.9;
边框 border
/* 边框宽度1px 样式 颜色 */
border: 1px solid #868686;
/* 边框边角弧度 */
border-radius: 5px;
/* 边框下划线 */
border-bottom: 1px solid #edeef0;
/* 样式 1px */
border-style: ridge;
border-width: 1px;
背景3d边框
-webkit-box-sizing: border-box!important;
box-sizing: border-box!important;
overflow: hidden!important;
border-radius: 2px!important;
-webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)!important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)!important;
2D动画
动画效果
/* 动画效果 */
transition: all 5s;
动画触发
:hover {
/* 放大2倍 */
/* transform: scale(2, 2); */
/* 旋转 */
transform: rotate(720deg);
/* 上移 */
transform: translateY(-3px);
}
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
transition
颜色渐变
父标签
-webkit-transition:background-color .5s ease-in;
-moz-transition:background-color .5s ease-in;
transition:background-color .5s ease-in;
:hover{background-color:#bbb;}
3D动画
3D转换 translate3d
transform: translate3d(0,100px,100px);
透视 perspective
/* 透视写在被观察元素的父盒子上面 */
perspective: 500px;
旋转 rotate3d
transform: rotateX(45deg);
transform: rotateY();
transform: rotateZ();
/* 自定义 */
transform: rotate3d(x,y,z,deg);
3d呈现 transform-style
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
图片模糊
filter: blur(1px);
-webkit-filter: blur(1px); /* chrome, opera */
-ms-filter: blur(1px);
-moz-filter: blur(1px);
元素隐藏
visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
opacity: 0;``CSS3属性，设置0可以使一个元素完全透明；
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
display: none; 元素会变得不可见，并且不会再占用文档的空间；
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态；
height: 0; 将元素高度设为 0 ，并消除边框；
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中；
响应式布局
开发实现
媒体查询
百分比布局
rem布局
视口单位布局(vw/vh)
设计步骤
设置meta标签
媒体查询设置样式
设置多种视图宽度
css 样式简写
4-2. 常用样式简写
pos
position:relative;
t
top:;
pos:s
position:static;
pos:a
position:absolute;
pos:r
position:relative;
pos:f
position:fixed;
t
top:;
t:a
right:auto;
c
Bootstrap
container-fluid
.container-fluid 则支持全屏的流式布局，如下使用：
...
自定义适应宽度
响应式 meta 标签
响应式外部容器
它允许在指定的屏幕下定义 100%宽
如.container-sm 则只在sm屏幕下显示100%宽,其它断点包括.container-md、 .container-lg、 .containerxl
100% wide until small breakpoint
100% wide until medium breakpoint
100% wide until large breakpoint
100% wide until extra large breakpoint
分割线
基于FlexBox布局
一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）：
Emment语法：
div.container>div.row>div.col-sm
全栅格定义框架
Emment语法：
div.container>div.row>div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12+div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12
常用的属性
隐藏
hidden
清除边界
clearfix
指定屏幕下显示
visible-xs
center-block
不显示前缀点
list-unstyled
列偏移：
.offset-md-*
文本对齐
Left aligned text.
Center aligned text.
Right aligned text.
text-capitalize 利用
text-center 居中
text-danger 加红危险
text-hide 隐藏文字
text-info 信息
text-justify 字体对齐（齐行——
text-left 文字左对齐
text-lowercase 小写（仅英文）
text-muted 静音
text-nowrap 不换行
text-primary 原生效果
text-right 文字居右
text-success 成功
text-uppercase 文字大写（仅英文）
text-warning 警告红色
文字样式
柔和灰（text-muted）
、主要蓝（text-primary）
、成功绿（text-secondary）
、成功红（text-success）
、危险红（text-danger）
、警告黄（text-warning）
、危息绿（text-info）
、黑白对比（text-dark）
背景是样式
主要蓝（bg-primary）
、成功绿（bg-secondary）
、成功红（bg-success）
、危险红（bg-danger）
、警告黄（bg-warning）
、危息绿（bg-info）
、黑白对比（bg-dark）
BootstrapVue
安装
# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap
程序入口点注BootstrapVue：
// app.js
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
引入 Bootstrap 和BootstrapVue的css
// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
行列
Column
Column
Column
Column
Column
Column
福利导航
福利导航导航利导航福利导航福利导航福利导航
关键字
实例的宽度将自动为25%。
列属性 sm, md, lg, xl表示在不同断点处，每行可能使用12个列中要使用的列数。因此，如果在断点sm处需要三个等宽列， 可以使用auto可用于占用行中剩余的可用列空间。
删除边距
通过在no-gutters属性来删除 padding。
JavaScript
输入输出语句
alert(msg) 浏览器弹出警示框
console.log(msg) 浏览器打印输出信息
prompt(info) 浏览器弹出输入框
vue
数据对象
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
文本插值
{{ }}
v-once 执行一次性地插值
这个将不会改变: {{ msg }}
v-html
Using mustaches: {{ rawHtml }}
Using v-html directive:
指令
v-if
Vue is awesome!
Oh no
v-show
cbbaa tfftt只是简单地切换元素的 CSS property display。
Hello!
v-for
基于一个数组来渲染一个列表
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
可选的第二个参数，即当前项的索引。
-
{{ parentMessage }} - {{ index }} - {{ item.message }}
以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
遍历对象
-
{{ value }}
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
提供第二个的参数为 property 名称 (也就是键名)：
{{ name }}: {{ value }}
还可以用第三个参数作为索引：
{{ index }}. {{ name }}: {{ value }}
唯一key
使用值范围
v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
{{ n }}
在template使用
- {{ item.msg }}
自定义组件上使用
v-bind
...
动态绑定
...
attributeName 会被作为一个表达式进行动态求值，值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
缩写
...
...
...
v-on:click
基础语法
...
动态的事件名绑定处理函数
...
缩写
...
...
...
事件修饰符
...
...
...
按键修饰符
.exact 修饰符
修饰符允许你控制由精确的系统修饰符组合触发的事件
鼠标按钮修饰符
.left
.right
.middle
v-model
v-model 指令在表单
复选框
单个复选框，绑定到布尔值：
多个复选框，绑定到同一个数组：
Checked names: {{ checkedNames }}
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
单选按钮
Picked: {{ picked }}
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
选择框
单选时：
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: ''
}
})
多选时 (绑定到一个数组)：
Selected: {{ selected }}
new Vue({
el: '#example-6',
data: {
selected: []
}
})
用 v-for 渲染的动态选项：
Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
值绑定
v-text
v-text
组件基础
基本示例：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
组件名
Vue.component('my-component-name', { /* ... */ })
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
局部注册
通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
在模块中局部注册
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
vue.config.js
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const webpack = require("webpack");
module.exports = {
// 基本路径
publicPath: "./",
// 输出文件目录
outputDir: 'dist',
// webpack-dev-server 相关配置
devServer: {
// port: 8888,
// ...
},
lintOnSave: true,
runtimeCompiler: true, //加入内容
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('lib', resolve('src/lib'))
}
}
transitiond过度动画
vue-router
安装路由
npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
路由封装
1.main.js
import router from '@/router'
import request from '@/network/request'
new Vue({
router,//注册路由
render: h => h(App),
}).$mount('#app')
2.建文件夹router
index.js
import Vue from 'vue'
import Router from 'vue-router'
const Index = () => import('@/components/Index') // 路由懒
Vue.use(Router)
const routes = [{ // 映射路由
path: '/',
redirect: '/Index' // 重定向默认值
},
{
path: '/Index',
component: Index,
meta: {
title: 'Index'
}
}
]
const router = new Router({ // 创建路由对象实例
mode: 'history',
routes
})
// 解决重复点击链接出现错误
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default router // 将对象 传递到vue实例
跳转
1.无参跳转
this.$router.push('/Index')
2.带参数跳转
this.$router.push({ path: '/Index-text', query: { id: cid } })
2.1页面获取参数调用
data () {
return {
id: this.$route.query.id,
}
url: '/api/Contents/AsyGetTestID?id=' + this.id
axios
安装
npm install --save axios vue-axios
main.js 导入
import request from '@/network/request' //封装的js
new Vue({
router,
request, //注册axios
render: h => h(App),
}).$mount('#app')
封装公共实例
建network 文件夹 下新建 request.js
import axios from 'axios'
export function request(config) {
// 1创建axios实例
const intstance = axios.create({
baseURL: 'https://localhost:44398/',
timeout: 5000
// contentType: 'application/json;charset=UTF-8',
// dataType: 'json'
})
// 1.axios拦截器
intstance.interceptors.request.use(config => {
return config
}, er => {
})
// 1.axios响应拦截拦截
intstance.interceptors.response.use(res => {
return res
}, er => {
})
return intstance(config)
}
export default request
调用
在vue的页面导入
import Headers from './Headers'
methods: {
AsyGetTest () {
request({
url: '/api/Contents/AsyGetTest'
}).then(res => {
// 只获取0到4之间的数据
this.newinfo = res.data.slice(0, 4);
console.log(this.newinfo)
}).catch((e) => {
console.log('获取数据失败');
});
}
}
展示接口内容
v-for="info in newinfo" :key="info.cid"
{{ info.title }}
mavon-editor
安装引用
$ npm install mavon-editor --save
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
调用
获取数据预览
字体图标
一.首先下载好的iconfont.js放到assets/icon
二.引入css 文件
在同级目录下创建一个icon.css文件
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
main.js导入
import './assets/icon/fonts/iconfont.js'
import './assets/icon/icon.css'
引用
时间线组件
安装
yarn add vue-light-timeline
npm i vue-light-timeline
导入
import Vue from 'vue';
import LightTimeline from 'vue-light-timeline';
Vue.use(LightTimeline);
调用
sass
Ruby
window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。
检测是否安装成功
ruby -v
sass安装
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：
sass -v
compass -v
//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h
vue安装sass依赖
npm install --save-dev sass-loader
/ /sass-loader依赖于node-sass
npm install --save-dev node-sass