HTML 学习总结

发表于 更新于 分类于 ， Valine：

网页的核心载体是 HTML，本篇对 HTML 的基础概念进行了简单的总结。

1. 概述

HTML -（HyperText Markup Language）超文本标记语言，是一种标记语言。一个 HTML 由以下部分组成。

版本声明 目前最常用的 HTML5 版本声明，<!DOCTYPE html>

标签（tags） e.g. <p> 为一个标签。

元素（elements）从开始标签（start tag）到结束标签（end tag）的所有代码。e.g. <p> Hello world! </p>，p 为元素名，Hello world! 为元素内容。

属性（attributes）在开始标签中，规定元素相关特性的键值对。e.g. <p class="info">，class="info" 为一个属性。

头部元素 头部元素使用 <head> 标签包裹，常包括如下子元素：<title>, <base>, <meta>, <script> and <style> ...。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- style 标签，可以在 html 文档内部定义样式表-->
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

<!--link 标签，可以定义文档引用的外部文件。
如下，表示该 HTML 所参考的外部样式表 -->
<link rel="stylesheet" type="text/css" href="mystyle.css" />

<!-- meta 表示元数据，是关于数据的信息。
常用于提供页面描述，关键词，文档作者等 -->
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

2. 重点标签

文档结构

<h1> ... <h6> 一到六级标题- 标题必须在句意上有关键词，总结词的作用，因为搜索引擎会根据标题索引你的页面。

<p> 段落。

<br /> 换行。

超链接

1
2
<!-- href 属性，跳转至外部链接， name 属性，跳转至内部链接 -->
<a href="xx_link" target="_blank"> xxxx </a>

图像

1
2
<!--可以使用 alt 属性指定当图片不存在时显示的内容-->
<img src="boat.gif" alt="Big Boat" />

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <!-- 表格每行 由 tr 定义-->
    <tr>
        <!--td 标签定义普通单元格， 
        th 标签定义表格头部单元格（一般是加粗处理）-->
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <!--&bsp 这里可以理解为空格的意思-->
        <td>&nbsp;</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

1
2
3
4
5
6
<!--ul 表示无序 list，ol 表示有序 list -->
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

HTML块

<div> 为 块级元素，自构成一块内容。 <span> 为 内联元素，常位于一块文字内。二者常用于与 CSS 样式表配合使用。

表单

<form> 表单用于搜集用户输入。表单内部，有输入，按钮，复选框 等元素，称为 表单元素。

1
2
3
4
5
6
7
8
9
<!-- 定义表单提交后的动作及提交的方法 -->
<form action="action_page.php" method="POST">
    <!-- 输入框，如果该框中内容需要被提交 则需要给他一个 name -->
    <input type="text" name="firstname" value="Mickey" />
    <!-- 提交按钮，onclick 属性规定点击动作-->
    <button type="button" onclick="alert('Hello world!')"> 点击！</button>
    <!-- textarea 定义多行输入字段。i.e. 文本域 -->
    <textarea name="message" rows="10" cols="30"> Message... </textarea>
</form>

3. 重点属性

不同的元素常常会用他们特有的属性。例如 form 元素，会有 action, method 等属性。这部分总结一些通用的 或者 常见到的属性。

样式：style=""，为 HTML 4 中引入，同时将 <center>, <font> 等标签 和 align, bgcolor, color 等属性废弃。

超链接：href="link to source"。

标签的 name, id, class 属性: 都是用于标识元素的属性。如果元素有 id 标签，这个标签在整个 HTML 文档中必须是唯一的；name 属性不要求唯一性，可以有多个元素拥有相同的name，在form表格中，提交的内容的变量名使用 name 属性规定；class 则用于指定一组元素为一个类，从而在用 CSS 规定样式的时候，可以为一类元素指定样式。 RefLink

4. HTML5

HTML5 具有的一些新特性包括：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素（减少了对外部插件如 flash 的需求）
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

Ref: HTML5总结文档

5. HTML 与 CSS、JavaScript

5.1. HTML + CSS

一共有3种方式在 HTML 中添加样式表（CSS- Cascading Style Sheet）：

内联样式（inline）：通过在HTML开始标签中规定 Style 属性实现。

内部样式表（internal）： 通过在 HTML 的 <head> 部分添加 <style> ... </style> 元素来实现。

外部样式表（external）： 通过在 HTML 的<head> 部分添加 <link rel="stylesheet" type="text/css" href="the path of your cited CSS" /> 来实现。（Note：link 元素表示使用外部资源，rel 是 relationship 的简称，指明了连接所指向的外部资源与本 HTML 之间的关系，该键的值还可以是：icon, preload 等）。

Ref: https://www.w3school.com.cn/css/css_jianjie.asp

5.2. HTML + JavaScript

通常，在 HTML 文档的 <head> 部分指明本文档所使用的 JavaScript 文件。JavaScript 中，使用 document.getElementById()等操作 DOM 的函数，或者 jQuery，或者 MVVM 模式的前端框架例如 Vue 等，选中并操作对应的 HTML 元素。具体参见后续 JS 部分的总结。

Reference

w3school English version: https://www.w3schools.com/html/default.asp

w3school 中文网：https://www.w3school.com.cn/html/index.asp