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的元数据协议
- 站点自定义图标
- 在HTML中应用CSS和JavaScript
- <link>元素
- <script>元素
- <link>元素
为文档设定主语言
- ;
- 为文档的分段设置为不同的语言
- <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
标记一组项目及其相关描述
引用
- 块引用 <blockquote cite=”http://aten.xyz"\> </blockquote>
- 行内引用 <q cite=”http://aten.xyz"\> </q>
- 引文 <cite>
缩略语
- <abbr title=””>
标记联系方式
- <address>
上标和下标
- <sup>
- <sub>
展示计算机代码
- <code>
- <pre>
- <var>
- <kbd>
- <samp>
标记时间和日期
- <time datetime=” “>
文档与网站架构
用于结构化网站的HTML
- 标题 <header>
- 导航 <nav>
- 主要内容 <main>
- 章 <article>
- 节 <section>
- 侧栏 <aside>
- 页脚 <footer >
没有特定语义的装饰元素
- <div>
- <span>
换行与水平分割线
- <br>
- <hr>
调试HTML
- 宽容模式代码
- HTML验证