前端与HTML | 青训营笔记

用户5581085631788
197 阅读5分钟

📖 前端与HTML | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天，文章内容主要是对第一天所学知识的整理和补充。目的是监督自己学习进步，同时也欢迎各位掘友的批评指正。

文章所涉及到的知识点参考自青训营老师上课时所使用的PPT。

前端技术栈

前端技术栈包含多种技术，这里仅列出最基础的四种。完整技术栈，请参考前端技术栈有哪些

  • HTTP协议：URL Cache Session Cookie Request Response
  • HTML: W3C HTML4.0 HTML5 DOM 语义化
  • CSS: CSS1~3 选择器 盒模型 Flex 媒体检测 响应式 渲染引擎
  • JavaScript: EcmaScript356 Lexical-scope prototype-chain AJA js引擎

前端关注点

功能、美观、无障碍、安全、性能、兼容、体验

什么是HTML

HTML 全称是 HyperText Markup Language。

HTML 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

HTML 语言用于描述网页。

  • HTML 是指超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 ( markup tag )
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了 HTML 标签及文本内容
  • HTML 文档也叫做 web 页面

标签 && 元素

标签

HTML 标记标签通常被称为 HTML 标签 ( HTML tag )。HTML 标签是由 尖括号 包围的关键词，比如 HTML 标签通常是成对出现的，比如<b>和</b>标签对中的第一个标签是 开始标签，第二个标签是 结束标签 ，开始和结束标签也被称为 开放标签 和  闭合标签。

元素

grumpy-cat-small.png

这个元素的主要部分有：

  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。由此可见， 标签是元素的组成部分

特别地：空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如<img>，<input>。

DOM树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

htmltree.gif

DOM结点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

举例：

请看下面的 HTML 片段：

   <html>
   <head>
     <title>DOM Tutorial</title>
   </head>
   <body>
     <h1>DOM Lesson one</h1>
     <p>Hello world!</p>
   </body>
 </html>

从上面的 HTML片段可以看出：

  • <html> 节点没有父节点；它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

  • <html> 节点拥有两个子节点：<head> 和 <body>
  • <head> 节点拥有一个子节点：<title> 节点
  • <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
  • <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点

警告！

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。

语义化标签

HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

  • <header>
    描述了文档的头部区域,<header>元素注意用于定义内容的介绍展示区域，在页面中你可以使用多个<header>元素.
  • <nav>
    定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 元素中!
  • <section>
    定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
  • <article>
    定义独立的内容。
  • <aside>
    定义页面主区域内容之外的内容（比如侧边栏），aside 标签的内容应与主区域的内容相关.。
  • <figcaption>
    定义<figure>元素的标题，<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
  • <figure>
    规定独立的流内容（图像、图表、照片、代码等等），<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
  • <footer>
    描述了文档的底部区域。
avatar
文章
阅读
粉丝