html
html：超文本 标记 语言，html文档也叫做Web页面。
html基本语法：
<!DOCTYPE html>
<html>
<head>
<!-- 所有连接标签的默认链接 -->
<base href="" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<!-- 定义网页编码格式为utf-8 -->
<title>hello,html</title>
</head>
<body>
<h1>这是一个标题</h1>
<!-- 标题通过h1~h6标签定义 -->
<!-- 使用img来更改图片大小 -->
<img src="图片路径" style="zoom:50%">
<p>这是一个段落</p>
<a href="www.baidu.com">这是一个链接</a>
<img loading="lazy" src="" width="258" height="39" />
<br />
<!-- br表示换行 -->
<hr />
<!-- hr创建水平线 -->
</body>
</html>
html特殊语法：
<!-- 无序列表，有序列表以o开头 -->
<ul>
<li>项目</li>
<li>项目</li>
</ul>
<!-- 表单，密码字段 -->
<form>
Password: <input type="password" name="pwd">
</form>
<!-- 框架，用于显示另一个页面 -->
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
other:
- 属性（可以在元素中附加信息）
- class
- id
- style
- title
- 实体
- HTML 中，某些字符是预留的
<等等
- HTML 中，某些字符是预留的
- 使用脚本
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
html5 新元素：
- 更多的 input 类型
- 表单属性、表达你元素
- web 存储， 一种比 cookie 更好的本地存储方式
- localStorage，长久保存
- sessionStorage，关闭窗口或标签后删除
- web socket
css
id 选择器，可以为标有特定 id 的 HTML 元素指定特定的样式。
#para1
{
text-align:center;
color:red;
}
class 选择器，用于描述一组元素的样式
.center {text-align:center;}
p.center {text-align:center;}
外部样式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
各种属性：
- background
- test-align
- font-family
- font-style
- font-size
- a:hover
- a:visited
- 盒子模型
- margin, 外边距
- border
- padding, 内边距
- content
- max-height
- line-height
- display:none
- visibility:hidden
- display:block; 作为块元素，占用全部宽度，前后都是换行符
- position
- absolute 回合其它元素重叠
- static 遵循正常的文档流对象
- fixed 相对于浏览器窗口时固定位置
- z-index 指定了一个元素的堆叠顺序
- overflow: 溢出处理
- float
- margin: auto; 水平方向上居中对齐
- opacity
- ！important 增加样式的权重
- 导航栏
- 提示工具
- 响应式卡片
- 网页布局
css3
- border-radius
- box-shadow(h-shadow, v-shwdow, bluur, spread, color)
- border-image
- 使用自定义字体
- transform
- rotate
- transition， 过渡
- keyframes, 动画
- 按钮
- 弹性盒子
javasript
- Web 的编程语言，控制着网页的行为。
- 可插入 HTML 页面
- 在 浏览器 中使用 开发者工具，console 窗口可运行 Javascript 代码
- 在 浏览器 中使用 开发者工具，sources 窗口可建立 Javascript 脚本
console.log("hello, world")
- 基本思想
- 使用
;分隔语句 - 大小写敏感
//单行注释，/**/多行注释- var 用于声明变量，无值的变量为 undefined
- 几乎所有事物都是对象
- 对象创建
var p = {firstname:"jon",lastname:"Doe"} - 访问方式
- p.lastname
- p[“lastname”]
- 对象创建
- 使用
- 数据类型
- 基本类型
- String
- Number
- Boolean…
- 引用类型
- Object
- Array
- Function…
- 检查方式
- typeof xxx
- 基本类型
- 输出
- window.alert() ，弹出警告框
- document.write()，写入 html 文档
- innerHTML，写入到 html 元素
- console.log()，写入到浏览器的控制台
- 函数
function myfun(var1, var2){
...
}
jquery
是目前最受欢迎的 JavaScript 框架。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）”查询”和”查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
</script>
例子：隐藏和显示
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
vue
是一套构建用户界面的渐进式框架。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script>
const app = {
data() {
return {
counter: 1
}
}
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
</body>
</html>
react
React 是一个用于构建用户界面的 javascript 库。
node.js
Node.js 就是运行在服务端的 JavaScript。
console.log('Hello World!');
bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
响应式设计，使其自适应于各种屏幕大小的客户端
