HTML 入门 #

HTML 使用元素来描述页面 #

<html>
    <body>
        <h1>This is a title. </h1>
        <p>这是 p 标签，用于包裹一个段落的内容。</p>
    </body>
</html>

标签的特性（属性） #

<p style="color:red">...</p>

常用的标签（1） body head #

<html>
    <head></head>
    <body>
        <h1>Hello HTML!</h1>
    </body>
</html>

常用的标签（2） h1 - h6 #

<html>
    <head></head>
    <body>
        <h1>Hello HTML!</h1>
        <h2>Hello HTML!</h2>
        <h3>Hello HTML!</h3>
        <h4>Hello HTML!</h4>
        <h5>Hello HTML!</h5>
        <h6>Hello HTML!</h6>
    </body>
</html>

常用的标签（3） ol ul li #

<ol>
    <li>有序列表项目1</li>
    <li>有序列表项目2</li>
    <li>有序列表项目3</li>
</ol>

<ul>
    <li>无序列表项目1</li>
    <li>无序列表项目2</li>
    <li>无序列表项目3</li>
</ul>

常用的标签（4） #

<a href="http://www.baidu.com">点击打开百度</a>

<img src="https://7n.w3cschool.cn/statics/images/logonew2.png" />

常用的标签（5） table tr th td #

<table>
    <tr>
        <th></th>
        <th>星期六</th>
	    <th>星期日</th>
    </tr>
    <tr>
        <th>门票售出量</th>
        <td>120</td>
        <td>135</td>
    </tr>
    <tr>
        <th>销售额</th>
        <td>$600</td>
        <td>$675</td>
    </tr>
</table>

常用的标签（6） input textarea #

<input type="text" placeholder="提示词" />
<input type="password" value="value" />
<input type="submit" />
<input type="file" />
<input type="radio" />
<input type="checkbox" />

<textarea></textarea>

常用的标签（7） select option form #

<select>
    <option value="0">请选择内容</option>
    <option value="1">第一个选项</option>
    <option value="2">第二个选项</option>
</select>

注释 #

<!-- 注释的内容 -->

CSS 介绍 #

CSS 简介 #

p {
    color: #565656;
}

在 HTML 中引入 CSS 样式 #

<html>
    <head>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body></body>
</html>

body, a{
    overflow-x: overlay;
    padding: 0 !important;
}

.hide_scroll{
    overflow: hidden !important;
}

在 HTML 中引入 CSS 样式 #

<html>
    <head>
        <style>
            body, a {
                padding: 0;
            }
        </style>
    </head>
    <body></body>
</html>

<a style="text-decoration: none;">example</a>

JavaScript 基础与 DOM #

JavaScript 毒瘤：== #

'' == '0'               // false
0 == ''                 // true
0 == '0'                // true

false == 'false'        // false
false == 0              // true
null == undefined       // true

'\n' == 0               // true
'\t' == 0               // true
'\r\n' == 0             // true

0.1 + 0.2 == 0.3        // false

JavaScript 对象、函数 #

let object = {
    name: 'JavaScript',
    age: 15,
    'like JavaScript': true
};

object.name;

object['like JavaScript'];

object.sex;	// undefined

function add(a, b) {
    return a + b;
}

let add = function(a, b) {
    return a + b;
};

add(0, 1);

function(a, b) {
    return a + b;
}

let object = {
    func1: function() {
        ...
    },

    func2() {
        ...
    }
};

JavaScript 数组 #

let arr = [1, 'JavaScript', {}];

let arr = new Array(10);

arr[1];
arr.push(0.6);
arr.indexOf(1);
arr.sort(function(a, b) {
    return a  - b;
});
arr = arr.concat([2, 3]);
arr.length;

函数调用模式与 this 变量（1） #

let object = {
    age: 18,
    func: function() {
        this.age;
    }
};

object.func();

函数调用模式与 this 变量（2） #

let func = function() {
    this;
};

func();

函数调用模式与 this 变量（3） #

let func = function(params) {
    this.age;
};

let object = {
    age: 18,
};

func.apply(object, 1);

JavaScript 毒瘤 2：this 变量的设计 #

function gloFunction(f) {
    let age = 17;
    f();
}

let object = {
    age: 18,
    func: function() {
        gloFunction(function() {
            console.log(this.age);
        });
    }
};

object.func();

func: function() {
    let that = this;
    gloFunction(function() {
        console.log(that.age);
    });
}

将 JavaScript 引入 HTML #

<html>
    <head>
        <script src="js/index.js"></script>    
    </head>
    <body></body>
</html>

<html>
    <head>
        <script>
	        // ...
        </script>    
    </head>
    <body></body>
</html>

HTML DOM #

<a
    id="openBaidu" 
    class="link-a"
    href="http://www.baidu.com">
    点击打开百度
</a>

let a = document.createElement('a');
a.id = 'openBaidu';
a.classList.add('link-a');
a.setAttribute('href', 'http://www.baidu.com');
a.innerHTML = '点击打开百度';
parentNode.appendChild(a);

parentNode.getElementById('openBaidu');
parentNode.getElementsByTagName('a');
parentNode.getElementsByClassName('link-a');

document.getElementsByClassName('link-a');

innerHTML 的使用 #

<ul id="nav"></ul>

document.getElementById('nav').innerHTML = '<li>index</li>';

document.getElementById('nav').textContent = '<li>index</li>';

设置监听器 #

document.getElementById('openBaidu').addEventListener('click', function(){
    // ...
});

document.getElementById('openBaidu').removeEventListener('click', myFunction);

DOM 加载与 JavaScript 执行时机 #

<script>
    document.getElementById('mid');
</script>
<div id="mid"></div>

<script>
    window.onload = function() {
        document.getElementById('mid');
    };
</script>
<div id="mid"></div>

alert 与 console #

alert('这是一个提示');

console.log('控制台信息');
console.warn('控制台信息');
console.error('控制台信息');