零基础前端Vue的小白学习路——HTML基础（二）排版标签、文本标签、图片标签

        在前面一节大概讲述了HTML的基础知识，下面开始学习HTML标签用法及相应语义。标签语义及内在属性可通过W3CSchool（HTML5 简介）和MDN官方网站（HTML（超文本标记语言） | MDN）来学习。

        前言：标签的语义比它本身的呈现效果更重要，学习的时候不仅要记住它大概的呈现效果是什么样，更重要的是明白它是用来干什么的（理解语义）。a、这有益于增强你代码的可读性，呈现效果可以从后续学习的CSS来调整。b、有利于SEO（搜索引擎优化）c、方便设备解析（盲人阅读器、屏幕阅读器）

        1、排版标签：

• 标题标签：<h1></h1> ...........<h6></h6>
• 盒子标签：<div></div>
• 段落标签：<p></p> p标签内不能嵌入标题标签，div标签，p标签。

        2、块级元素与行内元素：块级元素独占一行，行内元素不独占一行。

• 规则1：块级元素可以写行内、块元素
• 规则2：行内只能写行内
• 一些特殊规则：h1-h6不能互相嵌套；p标签不能写块元素....

        3、文本标签：用于包裹词汇、短语，常用的有em、strong、span、i。

• a、要着重阅读的内容：<em>
• b、十分重要的内容：<strong>
• c、没有语义，用于包裹词汇的小容器：<span>
• d、作品标题：<cite>
• f、特殊术语、专属名词：<dfn>
• g、删除的文本，插入的文本：<del><ins>
• h、下标文字与上标文字：<sub>、<sup>
• i、代码：<code>
• j、从正常的上下文中，将某些内容提取出来：<samp>
• k、键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中：<kbd>
• l、 名词缩写：<abbr>
• m、更改文本方向，配合dir属性：<bdo>
• n、标记变量：<var>
• o、附属细则，例如：版权、法律文本。：<small>
• p、摘要中的关键字、评论中的产品名称：<b>
• q、本意用于表现人物的思想活动、所说的话等等，现常用来字体图标。: <i>
• r、与正常内容有反差文本：错的单词、不合适的描述等。: <u>
• s、短引用：<q>
• t、长引用（块元素）：<blockquote>
• u、地址信息（块元素）：<address>

        4、图片标签：<img width="图片宽度"，height="图片高度" src="图片路径" alt="图片备注">，图片备注有利于SEO。其中src的值可以填写本地图片的路径，也可以填写网络图片的绝对路径（部分有防盗链的图片无法显示）。