chap1 HTML & CSS
1. HTML 元素
1.1 Block 元素
<h1>
<h2>
<h3>
...
<h6>
<p> 文本
<div> 包含其他标签
<hr> 换行 horizental line
unordered list
<ul>
<li>
<ol>
<li> 标签内属性: start, type and reversed
<table>
<caption> 标题
<td> table data
<th> table header
<tr> table row
1.2. inner 元素
<img src="" alt="">
<a href="">
<h3 id='bookmark'>The Bookmark</h3>
<a href="#bookmark">Jump to 'The Bookmark'</a>
<br>
2. CSS
<link href="calendar.css" rel="stylesheet" type="text/css">
th {
background-color: lightsteelblue;
}
<td class='sundays'></td>
.sundays {
color: firebrick;
}
#bookmark {
text-align: center;
}
chap2 flexible layout
1. 常见flexible标签 flexbox= flexible box
<section>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</section>
.flex-container {
display: flex;
}
.flex-item {
background-color: lightsalmon;
height: 50px;
width: 150px;
line-height: 50px;
text-align: center;
margin: 5px;
}
2. 布局
justify-content: space-around;
flex-wrap: wrap
flex-grow: 3
3. Bulma
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<div class="column is-half-mobile card">
<figure class="image is-square">
<img style="object-fit:cover" src="https://picsum.photos/seed/picsum1/500/500" />
</figure>
</div>
4. JavaScript
4.1 onclick 属性
<section class="section">
<div class="container">
<div class="buttons">
<button class="button is-primary" onclick="btn1Clicked(this)">
I'm Button 1, Click me!
</button>
<button class="button is-warning is-light" onclick="btn2Clicked(this)">
I'm Button 2, Click me!
</button>
<button class="button is-primary is-outlined" onclick="btn3Clicked()">
I'm Button 3, Click me!
</button>
<button class="button is-warning is-inverted" onclick="btn4Clicked()">
I'm Button 4, Click me!
</button>
<button class="button is-primary is-outlined is-rounded" onclick="btn5Clicked()">
I'm Button 5, Click me!
</button>
<button class="button is-warning is-rounded" onclick="btn6Clicked()">
I'm Button 6, Click me!
</button>
</div>
</div>
</section>
4.1.1.1 elem.innerHTML: 更改文本内容
function btn1Clicked(elem) {
console.log("console output");
elem.innerHTML = "Don't click me!";
}
4.2 parentNode
function btn2Clicked(elem) {
elem.style.display = "none";
elem.parentNode.classList.add("are-medium");
}
<img id="pic" style="float:right" src="https://picsum.photos/id/326/150/150" />
<div id="rack"></div>
4.3 document.getElementById()
function btn3Clicked() {
var pic = document.getElementById("pic");
if (pic.style.float == "left") {
pic.style.float = "right";
} else {
pic.style.float = "left";
}
}
4.4 设置标签内属性
function btn3Clicked() {
var pic = document.getElementById("pic");
if (pic.style.float == "left") {
pic.style.float = "right";
} else {
pic.style.float = "left";
}
}
4.4 一次性获取多个属性
function btn5Clicked() {
var figures = document.querySelectorAll(".is-square, .is-16by9");
console.log(figures.length);
figures.forEach(function (figure) {
figure.classList.toggle("is-square");
figure.classList.toggle("is-16by9");
});
};
4.5 动态修改
function btn6Clicked() {
var dynamicCode = '<table class="table is-bordered is-striped">';
var teamMembers = ["Martin", "Kenny", "Tony"];
teamMembers.forEach(function (member) {
dynamicCode += "<tr><td>" + member + "</td></tr>";
});
document.querySelector("#rack").innerHTML = dynamicCode + "</table>";
}
5. form表单
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-check"></i>
</span>
</div>
<p class="help is-success">This username is available</p>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-danger" type="email" placeholder="Email input" value="hello@">
<span class="icon is-small is-left">
<i class="fas fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p class="help is-danger">This email is invalid</p>
</div>
<div class="field">
<label class="label">Subject</label>
<div class="control">
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" name="question">
Yes
</label>
<label class="radio">
<input type="radio" name="question">
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
5.1 input 类型
5.1.1 单行文本
<input class="input is-success" type="number" min=1 max=4>
5.1.2 二选一
<div class="field">
<div class="control">
<label class="radio">
<input type="radio" value="Credit Card">
Pay by Credit Card
</label>
<label class="radio">
<input type="radio" value="Paypal">
Pay by Paypal
</label>
</div>
</div>
5.2 select 下拉框
<div class="field">
<label class="label">Team</label>
<div class="control">
<div class="select">
<select onchange="teamSelected(this.value)">
<option value="">Select your favourite team here.</option>
<option value="Avengers">Avengers</option>
<option value="JLA">Justice League</option>
</select>
</div>
</div>
</div>
<div class="field">
<label class="label">Superhero</label>
<div class="control">
<div class="select">
<select id="superhero" disabled>
</select>
</div>
</div>
</div>
5.4 多行文本框
<div class="field">
<label class="label">Message</label>
<div class="control">
<textarea class="textarea" placeholder="Textarea" rows="2"></textarea>
</div>
</div>
5.5 按钮
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Submit</button>
</div>
<div class="control">
<button type="reset" class="button is-link is-light">Cancel</button>
</div>
</div>
5.6 required属性
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input" required>
</div>
</div>
chap3 数据可视化
1. chart.js
1.1 line chart
<html>
<head>
<title>lab #03-01 Chart.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
</script>
</body>
</html>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
2. amCharts
chap 4. Express
1. action
2. method
3. name