HTML

HTML（超文本标记语言）。最初只是用来显示文档的，这种文档要求可以图文混排，可以由一篇文档跳转到另一篇文档。

随着互联网的发展，网页的功能逐渐从“文本信息”向着“软件功能”过渡。网页不那么文档了。

这很像我们针对某个需求（显示文档）进行开发，东西做好了，需求变了（变成显示软件）。这种变化是很难预测，为了兼容旧的，应对新的需求，我们也不能完全推翻从来。所以对待技术，我们也可以从历史的角度看它，才能更好的理解它。

由于HTML应对过显示文档的需求，它的一些特性就显得合情合理了。比如块级元素负责垂直排布元素，内联元素横向排布元素，快速进行排版，把文档的内容展示出来。

标签的分类

HTML是一种标记语言，我们看看标签的分类。

按显示模式分类：块级元素、行内元素、行内块元素
按功能分类：文档标签、排版标签、文本格式化标签、图像标签、链接标签、列表标签、表格标签、表单标签

还有按闭合特征分类，分为单标签元素（如<br />）和双标签元素（大部分标签如<div></div>）。按替换（<img />）和不可替换元素（大部分标签）分类。这两种分类方式比较简单。

按显示模式分类:

块级元素

每个元素单独占一整行或者多整行，通常用于进行大布局（大结构）的搭建。

常见的块元素有：

<div>：定义文档中的节。
<p>：定义段落。
<form>: 定义HTML文档的表单。
<table>：定义表格。
<hr>：定义水平线。
<h1> to <h6> ：定义 HTML 标题。
<dl>、<dt>、<dd>：定义列表、列表中的项目、列表中项目的描述
<ol>、<ul>、<li>：定义有序列表、无序列表、列表的项目

行内元素

不占有独立的区域，靠自身字体大小和图像尺寸支撑大小，常用于控制页面中文本的样式。

特点：对其设置宽、高、垂直方向的padding、margin值无效，但水平方向设置padding、margin值有效；

常见行内元素有：

<a>：定义超文本链接。
<b>：定义文本粗体。
<em>：定义强调文本。
<i>：定义斜体字。
<span>：定义文档中的节。
<strong>：定义强调文本。

行内块元素

对外呈现inline特性，可以横向排布。对内呈现块级别，用宽高就可撑起来。
常见行内元素有：

<img>：定义图像。
<input>：定义输入控件。
<button>：定义按钮。

按功能分类:

文档标签

常见文档标签元素有：

<!DOCTYPE>：定义文档类型。
<html>：定义HTML文档。
<head>：定义文档的头部。
<meta>：定义元素可提供的有关页面的元信息，最常用的是设置viewport，适配移动端网页。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
复制代码

<base>：定义页面上的所有链接规定默认地址或默认目标。
<title>：定义文档标题。
<link>：定义文档与外部资源的关系。
<style>：定义HTML文档样式信息。
<body>：定义文档的主体。
<script>：定义客户端脚本，比如javascript。

排版标签

常见文档标签元素有：<h1> to <h6>，<p>，<br>，<hr>，<div>，<span>

文本格式化标签元素

常见文本格式化标签元素有：<b>、<i>、<s>、<u>、<strong>、<em>、<del>、<ins>、<blockquote>、<sub>、<sup>

图像标签元素

常见图像标签元素有：<img>

链接标签元素

常见链接标签元素有：<a>

列表标签元素

常见列表标签元素有：<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<menu>

表格标签元素

常见列表标签元素有：<table>、<caption>、<th>、<tr>、<td>、<thead>、<tbody>、<tfoot>、<col>、<colgroup>

表单标签元素

常见表单标签元素有：<form>、<input>、<textarea>、<button>、<select>、<option>、<label>、<fieldset>、<datalist>

标签的语义化

HTML用来表达结构，语义化是为了更好的表达结构（footer、header、nav）。

语义化标签在日常开发中并没有很必须，我们用css的class选择器可以更好的表达业务，拥有更贴切的语义。

对于语义化标签大使用：“用对”比“不用”好，“不用”比“用错”好。

HTML5相比于HTML4的新内容

新内容完全是符合互联网发展潮流，推出的内容。

支持video和audio元素。多媒体播放。
绘画canvas。通过脚本绘制图像。
localStorage和sessionStorage。构建更强大web应用。
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术如Geolocation。地图api

CSS

CSS（层叠样式表）。最初被创建出来，也是用来修饰‘文档’的样式。所以，CSS跟HTML
有着同样的历史问题。比如在CSS3之前，当页面需要显示‘软件功能’时，就需要float（本来是用于图文混排的）来完成多列布局。

写CSS和写JS的思路很不相同。写JS，讲究解耦，一段代码尽量单一职责，可复用，没有副作用。但是CSS是完全不同的，它是声明式的，利用选择器，发挥层叠、继承、优先级特性，对页面元素产生影响。

三大特性

继承性

父元素设置一些属性，子元素会有。称之继承性。

目的：设置网页上的一些公共信息。主要针对文字，例如文字颜色、字体、大小等。

只有以color/font-/text-/line-开头的属性才会继承。

层叠性

CSS叫层叠样式表，层叠性也是CSS的核心特性。当一个标签被多个选择器选中的时候，就会发生层叠。

优先级

当发生层叠的时候，具体哪个选择器中的样式会生效，就是优先级规则决定的。

选择器

通配符选择器

*{
    margin:0;
    padding:0;
}
复制代码

元素（标签）选择器

p{
    color:red;
}
复制代码

类选择器

.warning{
    color:red;
}
复制代码

ID选择器

#warning{
    color:red;
}
复制代码

属性选取器

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

[foo]{
    background-color:red;
}

复制代码

交集选择器

p.important {color:red;}
复制代码

交集选择器结，达到‘且’的效果，同时是p和有.important的元素会被选中。

并集选择器

.warning,.important {color:red;}
复制代码

并集选择器，达到‘或’的效果，.warning和.important同时被选中。

文档结构选择器

示例文档

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>
复制代码

后代选择器

与结合元素选择器不同的是，ui和li有空格隔开。这时候就是选择后代了。

ul li{
    border: 1px solid red;
}
复制代码

子选择器

ul>li>p{
   border: 1px solid red;
}
复制代码

相邻兄弟选择器

<div>
    <h1>h1</h1>
    <p>p1</p> // 这个p会被选中
    <p>p2</p>
    <p>p3</p>
</div>

h1+p{
    color:red;
}
复制代码

一般兄弟选择器

<div>
    <h1>h1</h1>
    <p>p1</p> // 这个p会被选中
    <p>p2</p> // 这个p会被选中
    <p>p3</p> // 这个p会被选中
</div>

 h1~p{
   border: 1px solid red;
}
复制代码

伪类选择器

:root{
    background-color:red;
} // 文档根元素伪类

复制代码

还有很多的伪类选择器如a:link、a:active、a:hover、a:visited、:focus等表示元素状态的。有element:first-child（选择属于父元素element的第一个子元素）等这样针对文档结构的伪类选择器。

伪元素选择器

和伪类选择器不同的，伪元素选择器在文档渲染时插入新内容。

element::before // 在每个 element 元素的内容之前插入内容。
element::after // 在每个element元素的内容之后插入内容。我们可能更多的是用来清除浮动或验证表单提示等其它
复制代码

选择器的命名：语义化 vs 原子化

关于选择器的命名，有两种大趋势，一种是语义化，最流行的BEM。二是原子化，如TailwindCSS库

语义化，BEM命名：

<div class="author-bio">
  <img class="author-bio__image" src="https://cdn-images-1.medium.com/max/1600/0*o3c1g40EXj65Fq9k." >
  <div class="author-bio__content">
    <h2 class="author-bio__name">Adam Wathan</h2>
  </div>
</div>
复制代码

原子化，TailwindCSS库：

<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">
  Button Text
</button>
复制代码

各有忧劣，语义化的好处是增强可读性，缺点是css代码会有一定大冗余，很多类似代码不好复用。原子化的好处是最大程度的可复用，但是又缺少了语义的表达性。

常见属性

文字：font-size、font-weight、font-size、font-family
文本：text-align、text-decoration、text-indent、line-height
颜色：color
背景：background-color、background-image、background-repeat、background-position
盒模型：margin、border、padding、content、box-sizing
其他：display、float、z-index

盒模型

W3C定义了一个标准盒模型，宽和高代表content的大小。这个跟日常描述物体的宽高不太一样，我们拿到一个鞋盒子，肯定按外边距（算上border）来作为它的宽高。W3C也发现了不对劲，所以搞了一个box-sizing属性，让宽高包含border（box-sizing: border-box;）。

文档流、浮动流、定位流

文档流也叫普通流，是历史的产物。元素盒子一个个按规则铺在文档流里。

浮动流：当把元素设为浮动时，它就脱离文档流，但是没有脱离文本流，所以可以让文字环绕浮动元素。

定位流：分为绝对定位、相对定位、固定定位。这样的元素完全脱离了正常流。

将盒子放入这三种流中，完成了一般的排版。

Flex布局

Flex布局是更符合现代网页的排版。Flex与其他display属性不同的是，CSS首次支持决定子元素布局的属性。之前的display属性只是决定自己该如何布局。

BFC

之所以块级格式化上下文总被拿出来说，是因为它能很好的解决margin塌陷和清除浮动问题。它是隶属于视觉格式化模型（浏览器的排版原理）的知识点。

当浏览器要对元素进行排版布局时，会有一套相对复杂的逻辑。这个逻辑就包含遇到什么样元素盒子，会生成一个块级格式化上下文，一块独立渲染的区域。

除了BFC，还有 IFC（行内格式化上下文），还有Flex格式化上下文，俗称 FFC 。都是布局过程中生成的上下文。FFC还更好理解一点，遇到display: flex了，形成了一个FFC上下文，里面的元素就要按照flex的规矩布局了。

参考文档

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Framework 层学习：一个浅显易懂的WMS介绍

十一周快速入门到精通Python教程

UNIX ICMP路径MTU (PMTU)目录特征服务拒绝漏洞

TypeScript数据结构与算法：散列表

Apache Software Foundation Tomcat Servlet读取任意’jsp’文件的源代码漏洞

建议收藏：常用网络定位工具！说不定什么时候遇到网络问题了呢？

重温HTML、CSS