重学前端之HTML(一)HTML整体概述及元素分类

  这一系列的文章是在学习winter的重学前端(极客时间上的课程)的过程中,梳理一下自己的前端知识体系。文章不是严格按照winter的每一节来写的,而是将某一类(如HTML)相关课程都看完后,再结合自己已有的知识体系进行相关梳理,最后产生了这一系列文章。winter提出的一些问题,我会在思考中写入,但答案并不是按照winter的原话来写,而是说在网上进行一些资料查找或者结合自己的知识体系来进行回答。如果我有什么回答不对的地方,希望大家指出,谢谢。
  HTML系列文章主要是涉及HTML标签,会列出HTML标签的分类、HTML布局语义化标签、比较常用的标签、一些常见的问题以及winter提出的问题。这系列文章主要的理论来源是 MDN,里面关于HTML讲得很详细,强烈建议一些觉得自己基础不牢的同学学习一下。

HTML的整体概述及细节

  超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ): 是一种用来结构化 Web 网页及其内容的标记语言。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。
  HTML标签的特点: HTML标签不区分大小写,也就是说输入标签时既可以使用大写字母也可以使用小写字母。例如,标签<title>写作<title>、<Title>、<TITLE>、<TiTle>等等都是可以正常工作的,不过从一致性、可读性等各方面来说,最好仅使用小写字母。
  元素内的空白(空白字符、换行): 当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。所以在HTML中的空白字符应当使用实体字符来表示。
  HTML注释: 注释标签 <!-- 注释内容 --> 用于在HTML插入注释。
  自定义组件名: W3C规范中的自定义组件名(字母全小写且必须包含一个连字符),可以避免和以前以及未来的HTML元素相冲突。

HTML元素的定义

  HTML元素: 指的是开始标签、结束标签与内容相结合，便是一个完整的元素。
  HTML 元素语法:
    1) 开始标签（Opening tag）：包含元素的名称，被左、右角括号所包围。表示元素从这里开始或者开始起作用。HTML元素以开始标签起始
    2) 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。HTML元素以结束标签终止
    3) 内容（Content）：是开始标签与结束标签之间的内容。
    4) 某些 HTML 元素具有空内容（empty content）
    5) 空元素在开始标签中进行关闭（以开始标签的结束而结束）
    6) 大多数HTML元素可拥有属性

  剖析一个 HTML 元素

  图片来源MDN,侵权删

HTML元素的分类

  块级元素:
    一、特点:
      1) 块级元素会独占一行,默认情况下宽度100%
      2) 可以设置width、height、padding、margin、border
    二、相关标签: <header>、<nav>/<main>、<article>、<section>、<aside>、 <footer>、<address>、<div>、<p>、<ul>、<ol>、<li>、<h1>~<h6>、<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>、<th>、<form>、<fieldset>、<blockquote>、<hr>等。
  行内块级元素:
    一、特点:
      1) 同一行显示
      2) 可以设置width、height、padding、margin、border
    二、相关标签: <img >、<input>、<button>、<textarea>、<video>等。

  行内元素:
    一、特点:
      1) 同一行显示
      2) 不能设置width、height、margin的上下,可以设置margin-left、margin-right、padding、border
      二、相关标签:<span>、<q>、<a>、<i>、<b>、<em>、<strong>等

  空元素: 没有内容的HTML元素被称为空元素。空元素是在开始标签中闭合的。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。(w3school)
  相关标签: <img />、<input />、<hr />、 <br />、 <link>、 <meta>等。

  替换元素:
    一、特点
      专业的讲: 可替换元素的展现效果不是由CSS来控制的,是一种外部对象,它们外观的渲染,是独立于CSS的。它们的内容不受到当前文档的样式的影响,CSS可以影响可替换元素的位置,但不会影响到可替换元素本身的内容。CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。都是使用 src 属性来引用文件。
      通俗的说: 可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,而不可替换元素则是将内容直接展现出来。如<img src="test.png">,<img>的内容会根据src属性的值来决定要显示的内容;不可替换元素则是将内容直接展现出来,如<h1>浏览器直接显示标签内的文本。
    二、相关标签:
      典型的有: <img>、<video>、<audio>、<embed>、<iframe>、<input type="image">
      有些元素仅在特定情况下被作为可替换元素处理，例如： <option>、<audio>、<canvas>
来源: 替换元素详解MDN

  表象元素: 出现于人们要在文本中使用粗体、斜体、下划线但CSS仍然不被完全支持的时期。像这样的元素，仅仅影响表象而且没有语义,并且不应该再被使用。如<b>、<i>、<u>。
    使用经验:
      <i>: 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想
      <b>: 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句
      <u>: 被用来传达传统上用下划线表达的意义：专有名词，拼写错误
来源:MDN

  以上内容如有不对,希望大家指出,谢谢。