编译器使用:VScode
推荐插件
-
JavaScript (ES6) code snippets:包含 ES6 语法中的 JS 代码段
-
Vetur:VSCode 支持 VUE 的工具
-
Auto Close Tag:自动添加 HTML/XML 结束标签
-
Auto Rename Tag:自动重命名对应的 HTML/XML 标签
-
Highlight Matching Tag:突出显示匹配的开始和结束标签
-
open in browser:预览 html 文件
代码示例
<!-- 文档说明 -->
<!DOCTYPE html>
<!-- 文档主体 -->
<html lang="en">
<head>
<!-- 设置网页编码格式 -->
<meta charset="UTF-8">
<!-- 设置网页兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置网页显示区域 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页标题 -->
<title>Document</title>
<!-- vue 的引入,相当于导包的过程 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<!-- 正文内容 -->
<body>
<!-- 定义一个容器,给容器一个id属性 -->
<div id="app">{{message}}</div>
</body>
</html>
<!-- JavaScript 脚本 -->
<script>
// 实例化vue
var vm = new Vue({
// 需要传入对象
// el通过css选择器,指定挂载元素
el:"#app",
// 提供数据,vue填充到vue的数据
data:{
message: "hello world!"
},
methods:{
}
})
</script>
<!-- CSS 样式表 -->
<style></style>
- 前端三大件:html,script(js脚本),style(css样式)
html标签中常用的属性
-
常见的全局属性
-
id:规定元素的唯一id
-
class:规定元素的类名
-
style:规定元素的行内样式
-
-
常见其他属性
-
click:全局事件属性,当单机鼠标时运行脚本
-
src:规定图象的url
-
href:规定链接的目标url
-