HTML、CSS、JavaScript

一个网页是由 HTML、CSS、JavaScript 组成的。

HTML 决定页面上“有什么”，CSS 决定页面上的 HTML “什么样”，JavaScript 决定了这个页面能“做什么”。

一个网页文件由 .html 作为后缀，全部由 HTML 标签组成。一个网页的内容全部放在 <html> 标签中。

CSS 代码可以使用 <link> 标签从外部引入，也可以使用 <style> 标签在页面内部编写。

JavaScript 代码可以使用 <script> 标签，在页面内部直接编写；也可以使用 <script src> 标签从外部引入。

下面是一个最简单的 HTML 页面代码。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
    <link rel="stylesheet" href="style.css">
    <style>

    </style>
    <script src=""></script>
    <script>

    </script>
</head>
<body>
    <div>Hello World</div>
</body>
</html>

基础概念：元素

任何一对在页面上的标签都可以被称作元素。

HTML

HTML 元素都是由 标签(Tag)、属性(Attribute)、属性值(Value) 构成。

html

<tag attribute="value"></tag>

例如一个 div 标签，带有 class 属性和 id 属性。

html

<div id="example_id" class="example_class">

其中，id 和 class 是属性，example_id 是 id 的值，example_class 是 class 的值。

有些属性是 HTML 标准规定的，浏览器都遵守并实现对应的功能。除此之外，可以在 HTML 中写任何标签，也可以写任何属性，只是浏览器不一定认识罢了。这种特性在一些框架中特别有用。例如 Vue.js 中可以使用自定义标签来表示组件。

html

<template>
    <div>这是一个 Vue 模板</div>
</template>

常用标签

html head meta body

style script

div

span

p

table th tr td

ul ol li

img video canvas

语义化

全部 div -> div span p ul。

增加代码可读性、考虑 SEO。