HTML+CSS部分知识点整合（结合案例实际运用归纳）

第一部分 基础知识

一丶 HTML各个标签的分类以及用途

HTML的众多标签可以分为两大类：块（级）元素和行内（内联）元素

块元素	行内元素
定义地址：<address>	定义链接：<a>
h定义文章：<article>	定义缩写: <abbr>
定义页面内容之外的内容：<aside>	定义粗体字: <b>
定义声音内容：<audio>	定义文字方向: <bdo>
定义长的引用：<blockquote>	定义大号文本: <big>
定义表格标题：<caption>	定义简单的折行： <br>
定义定义列表：<dl>	定义按钮 (push button)： <button>
定义定义列表中的项目：<dt>	定义引用：<cite>
定义定义列表中项目的描述：<dd>	定义计算机代码文本： <code>
盒子模型经典标签：<div>	定义命令按钮： <command>
定义元素的细节：<details>	定义定义项目：<dfn>
定义围绕表单中元素的边框：<fieldset>	定义被删除文本： <del>
定义 figure 元素的标题：<figcaption>	定义强调文本： <em>
定义 网页的页脚：<footer>	定义外部交互内容或插件： <embed>
定义供用户输入的 HTML 表单：<form>	定义斜体字：<i>
定义表格中的主体内容：<tbody>	定义图像： <img>
定义网页的页眉：<header>	定义输入控件：<input>
定义水平线：<hr>	定义图像映射：<map>
定义 fieldset 元素的标题：<legend>	定义键盘文本：<kbd>
定义列表的项目：<li>	定义 input 元素的标注：<label>
定义命令的列表或菜单：<menu>	定义有记号的文本：<mark>
定义导航链接：<nav>	定义内嵌对象：<objec>
定义针对不支持框架的用户的替代内容：<noframes>	定义任何类型的任务的进度：<progress>
定义针对不支持客户端脚本的用户的替代内容：<noscript>	定义短的引用：<p>
定义有序列表：<ol>	定义计算机代码样本：<samp>
定义输出的一些类型：<output>	定义选择列表（下拉列表）：<select>
定义段落：<p>	定义小号文本：<small>
定义表格：<table>	定义文档中的节：<span>
定义导航链接：<nav>	定义强调文本：<strong>
定义针对不支持框架的用户的替代内容：<noframes>	定义下标文本：<sup>
定义针对不支持客户端脚本的用户的替代内容：<noscript>	定义多行的文本输入控件：<textarea>
定义有序列表：<ol>	定义日期/时间：<time>
定义输出的一些类型：<output>	定义打字机文本：<tt>
定义段落：<p>	定义文本的变量部分：<var>
定义表格：<table>	定义视频：<video>
定义表格中的单元：<td>	定义可能的换行符：<wbr>
定义表格中的表头单元格：<th>
定义表格中的表头内容：<thead>
定义日期/时间：<time>
定义表格中的行：<tr>
定义无序列表：<ul>

二丶行内元素丶块级元素以及行内块元素

块元素特点：

1.比较霸道，独占一行。
2.高度丶宽度丶内外边距可以控制。
3.块元素的默认宽度为容器（父级元素）的100%。
4.块元素是一个容器或者盒子，里面可以放其他块元素以及行内元素。

注意：
！文字类型的块元素里面是不能放块元素的。
比如<h1>-<h6>丶 <p>等这种文字类型的标签

行内（内联）元素特点：

1.相邻行内元素都在一行上显示，一行可以显示多个。
2.宽丶高直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或者是其他行内元素。

注意：
a链接标签里不能再放链接了，但是a标签在特殊情况下可以放块级元素。

行内块元素：

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素特点：

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
2. 默认宽度就是它本身内容的宽度（行内元素特点）。
3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

三种元素显示方式对比：

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块元素	可设宽高	容器的100%	容器级可包含任何标签
行内元素	一行可放多个行内元素	不可直接设置宽高	本身内容的宽度	可包含文本以及其他行内元素
行内块元素	一行能放多个行内块元素	可设宽高	本身内容的宽度

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素

三种模式的相互转化

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围，就可以把<a>元素转化为块元素或者行内块元素设置宽高。

• 转换为块元素：display:{block;}
• 转换为行内元素：display:{inline;}
• 转换为行内块：display:{ inline-block;}

三丶盒子模型

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的HTML的块级元素或者行内块元素 ，它包括：边框（border）、外边距（margin）、内边距（padding）、和实际内容（content）

边框（border）：

属性	作用
border-width	设置边框的宽度，单位为px
border-style	设置边框的样式
border-color	设置边框的颜色

边框样式 border-style 可以设置如下值：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

边框设置时可以采取分开写的方式：

border-top: 1px solid red;/* 只设定上边框， 其余同理 */  

也可以采取连写的方式：

border: 1px solid red; /* 没有顺序 */

• 注意
  边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距（padding）：

内边距分开写时：

padding-top:20px;/* 只设定上边框， 其余同理 */

当它们简写时：

值的个数	代表
padding:5px;	上丶下丶左丶右内边距都为5像