chap1 HTML & CSS

1. HTML 元素

1.1 Block 元素

  1. <h1>
  2.   <h2>
  3.     <h3>
  4.       ...
  5.       <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

image.png

<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>

image.png
image.png

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

可以比chart.js提供更多类型的图形

chap 4. Express

1. action

2. method

3. name