HTML Guides

Introduction to HTML
HTML(HyperText Markdown Language), 是一种标记语言.

HTML入门

元素:

  • 开始标签: 开始尖括号, 元素名称, 结束尖括号
  • 结束标签: 开始尖括号, 正斜杠”/“, 元素名称, 结束尖括号
  • 内容
  • 元素: 开始标记+结束标记+内容=元素
  • 标签不区分大小写

元素嵌套: 元素放于其它元素之中
块级元素
内联元素
空元素
HTML5重新定义了元素的类别

属性:

包含元素的额外信息, 不会出现在实际内容中

  • 元素和属性之间有一个空格; 多个属性, 属性之间有空格.
  • 属性后面紧跟一个”=”符号
  • 有一个属性值, 由引号引起来

布尔属性: 没有值的属性, 只能由跟它的属性名一样的属性值.
省略包围属性值的引号: 避免省略, 避免出错
单引号或双引号: 都可以

Others

  • HTML中的空白: 连续出现的空白字符(空格, 换行)会被减少为一个单独的空格符
  • 实体引用: 在HTML中包含特殊字符要用到字符引用; & 开始, ; 结束
  • HTML注释: <!-- -->

Head中有什么? HTML中的元数据

Head标签

<head>元素的内容; head的内容不会显示在浏览器中, 作用是包含一些页面的元数据

  • <title>元素
  • <meta>元素
    • charset: 指定文档中字符的编码
    • name(指定meta元素类型; 说明元素包含什么类型的信息) & content(指定实际的元数据内容)
    • property & content
    • Facebook的元数据协议
  • 站点自定义图标
    • <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
    • <link rel=”” sizes=”” href=”#”>
  • 在HTML中应用CSS和JavaScript
    • <link>元素
      • <link rel=”stylesheet” href=”my-css-file.css”>
    • <script>元素
      • <script src=”my-js-file.js”></script>

为文档设定主语言

  • <html lang=”en”> ; <html lang=”zh”>
  • 为文档的分段设置为不同的语言
    • <p>Japanese example: <span lang=”jp”>ご飯が熱い。</span>.</p>

HTML文字处理基础

标题和段落

  • 标题标签: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
  • 段落标签: <p>
  • 网页中的层次与结构
    • 为什么我们需要结构化?
    • 为什么我们需要语义?

列表

  • 无序列表 ul li
  • 有序列表 ol li
  • 嵌套列表

强调

  • 斜体字
  • 粗体字
  • 下划线
    表象元素

创建超链接

超链接使我们能够将我们的文档链接到任何其他文档(或其他资源), 也可以链接到文档的指定部分.

  • <a>元素:
    • href
    • title
  • 块级链接
  • URL: 一个定义了在网络上的位置的一个文本字符串
    • 连接到文档的特定部分(文档片段)
      • <a href=”url#id”>
    • 绝对链接 & 相对链接
  • 链接最佳实践
    • 清晰的链接措辞
    • 尽可能使用相对链接(同一网站其它位置)
    • 链接到非html资源, 留下清晰指示信息
    • 下载链接使用下载属性download
  • 电子邮件链接
    • <a href=”mailto:nowhere@aten.xyz“>Send email to nowhere</a>
    • 提供其他信息
      • subject
      • cc
      • body
      • 每个字段的值必须是URL编码的, 不能有非打印字符
      • 问号 ? 来分隔主URL与参数值, 以及使用 & 符来分隔mailto:中的各个参数

高级文本排版

描述列表 dl dt dd

标记一组项目及其相关描述

引用

缩略语

  • <abbr title=””>

标记联系方式

  • <address>

上标和下标

  • <sup>
  • <sub>

展示计算机代码

  • <code>
  • <pre>
  • <var>
  • <kbd>
  • <samp>

标记时间和日期

  • <time datetime=” “>

文档与网站架构

用于结构化网站的HTML

  • 标题 <header>
  • 导航 <nav>
  • 主要内容 <main>
  • 章 <article>
  • 节 <section>
  • 侧栏 <aside>
  • 页脚

没有特定语义的装饰元素

  • <div>
  • <span>

换行与水平分割线

  • <br>
  • <hr>

调试HTML