什么是 HTML

HTML, 全称超文本标记语言, 与 markdown 一样是一种用来处理文本的标记语言. 在一个网页中, HTML 定义了网页的结构和内容, 浏览器根据解析 HTML 代码来渲染出网页.

HTML 的起源

上世纪90年代, 许多研究机构需要在计算机上查看文档可以资料, 但他们阅读的文档时彼此独立, 很难共享与交流. 在这种诉求之下, 欧洲核子研究中心的李爵士发明一种文档, 它支持超链接, 可以跳转到其它页面, 从而使所有链接起来的文档形成一张网络, 这种文档就是 HTML, 在与 url 和 http 技术结合后, 可在互联网中被所有人查阅.

如何开始写一个 HTML

在支持 Emmet 的编辑器上输出 ! + Tab 就可以新建出一个HTML的基本骨架.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  10. </body>
  11. </html>

HTML文档的构成

从前面来看, 文档开头的 <!DOCTYPE html> 叫做文档类型声明(DTD), 它指明了html文档的版本. html 标签包含了网页的主体, 分为 head 和body 两个部分, 也就是网页的头和身体.

head 标签

head 标签包含的内容一般不会再页面中呈现, 它包含了网页各类元信息, 网页的性质, 引入的其他文件与资源的路径等等, 是为网页渲染的做的准备. 可以包含包含的标签及其作用有

  • meta — 设置网页的各种元信息
  • link — 链接外部的样式表
  • title — 网页的标题
  • style — 包含了嵌入网页中的样式表
  • script — 引入脚本文件的链接
  • noscript — 在浏览器不支持脚本或脚本被禁用的场合, 显示标签内的内容

  • base — 用于指定文档中所有相对路径的跟路径, 用的比较少

    body 标签

    body 标签中包含所有内容与元素会被浏览器渲染并展示出来,

    常见的表示页面结构的标签

    在HTML中, 页面的每一部分都应该有一个符合其位置与作用的标签与之对应, 我们称之为语义化, 意思是标签的使用应该符合它本来的含义.
    这里有一个典型的语义化的页面结构

    1. <body>
    2. <header>页眉</header>
    3. <main>
    4. <article>文章</article>
    5. </main>
    6. <aside>侧边栏</aside>
    7. <footer>页尾</footer>
    8. </body>

  • header — 表示网站的头部, 也可以说是文档的页眉, 通常logo, 导航栏与搜索放在这里

  • footer — 表示网站的尾部, 也叫文档的页脚, 通常包含版权信息, 友情链接, 备案信息等

  • main — 表示网站的主体部分, 一个页面中只能有一个 main 元素, 且不能包含搜索栏等功能页

    <main> 是顶级标签, 不能座作为其它页面结构标签的子标签.

  • aside — 侧边栏

  • section — 章节
  • nav — 导航栏
  • h1~h6 — 各级标题

  • hgroup — 多级标签, 只能是标签标签的父标签

    什么HTML属性, 哪些是全局属性

    由于HTML刚出现的时候没有css技术, 但是缺需要有一种方法来改变元素在页面上的表现形式, 这便是标签属性, 通常在标签内部以键值对的方式出现, 与标签名一样属性名也不区分大小写, 但还是得养成好的习惯.

    普通属性

    1. <html lang="en">

    这里的 lang 就是 html 标签的一个属性, 等号后面是它的属性值, 这个属性定义了html中的语言类型.

    布尔属性

    属性是一个布尔值, 它只有两种状态, 添加了这个属性即生效, 没添加则不生效, 它没有对应的属性值

    全局属性

    所有元素都能使用的属性, 常见的全局属性有
    id — 定义一个唯一标识符, 但实际上页面上有两个相同id也不报错, 所以续谨慎, 尽量少用, 可做锚点
    class — 定义类名
    style — 定义行内样式
    tabindex —定义按下 tab 时, 焦点的位置
    hidden — 定义元素是否被隐藏
    contenteditable — 定义文本可以否被编辑, 可以用来做编辑器

    常见的用来处理内容的标签

  • a — 超链接

  • ol + li — 有序列表
  • ul + li — 无序列表
  • dl + dt +dd — 描述性列表
  • strong — 强调(客观事实)
  • em — 强调(主观语气)
  • code — 表示代码, 以等宽字体显示, 经常与 pre 一起用
  • pre — 保留原来的格式, 包括所有的换行和空格, 并且显示成等宽字体
  • quote — 行内引用
  • blockquote —块引用