当前位置：首页 > article >正文

HTML CSS

article 2025/3/19 16:16:22

前端

前端，通常指的是用户界面部分，主要负责与用户直接交互。简单点说，你在PC端，移动端使用浏览器打开的网页，就是前端。

小贴士：‌在CS架构中，C（客户端）并不属于前端。‌

CS架构中的客户端虽然也涉及用户交互，但其功能更为广泛，包括数据请求、处理和结果呈现等‌。因此，CS架构中的C（客户端）不属于前端，而是客户端/服务端架构的一部分。

随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

前端开发，就是开发者创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。

随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。

前端开发	Front-end Development
核心技术	HTML、CSS、JavaScript、Jquery等
主流框架	Vue.js、AngularJS、React等
应用领域	网站、小程序、WebApp开发等

HTML

HTML，全称叫超文本标记语言，英文名是Hyper Text Markup Language，是一种标记语言。它包含了一系列具有描述性标记的标签(Tag，也可叫标记)，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，形成一个可供用户进行浏览、交互的优美页面。比如有可以描述段落，图片，文字，音频，视频，表格，链接等的标签。

总之一句话，HTML是用来设计前端网页的布局结构的。

html的编辑

这些标签，我们需要写在扩展名为.html的文本文档中，这样的文本文档，我们就称之为HTML文本。至于编辑HTML文本的编辑器，可以使用微软自带的功能简单的记事本，当然也可以使用编辑功能强大的Sublime Text、Notepad++、Atom、Webstome、Dreamwear、HBuidler等。

微软开发的Visual Studio Code，简称VSCode。它是一款功能强大，主题好看，并支持丰富的编程语言(C++,C#,java,PHP,Python,go等)的开发，该软件的生态系统比较优秀，支持大量的优秀插件。

HTML的运行与调试

HTML文本需要使用浏览器来运行，浏览器内置的解析器可以解析HTML的各种标签。一般浏览器也都带有HTML的调试工具。比较主流的浏览器有以下几种：

Chrome 浏览器（谷歌）

Edge 浏览器（win10/11自带）

Firefox 浏览器（火狐）

Safari浏览器（苹果浏览器）

IE 浏览器

HTML版本说明

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML 4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：2014年10月28日，W3C推荐标准。HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML基本结构

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

<!DOCTYPE html> : 声明该文档是HTML5文档，固定写法。必须放在首行

<html>:HTML的根标记(根元素)，该标记在文档中只能有且只有一个。根标记中通常有两个子标记，分别是：

<head>标签：进行网页meta的设置（规定字符集等），定义标题，引入css文件，js文件，或者编写style和javascript代码等，可以添加在头部区域的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript> 和 <base>。

<body>标签：用来定义网页的可见内容。

注意: 编辑工具的字符集要和网页显示时字符集一致。

HTML语法介绍

HTML元素

HTML文档由各种HTML元素来组成，而HTML元素指的就是一个个书写完整的标签(标记)。

元素	开始标签	元素内容	结束标签
<p>这是段落</p>	<p>	这是段落	</p>
<h1>这是标题1</h1>	<h1>	这是标题1	</h1>
<a href="default.html">跳转</a>	<a href="default.html">	跳转	</a>
换行元素	<br/>
元数据元素	<meta/>

从上面的案例可以看出，HTML元素分两类：

第一类：双标签元素

双标签元素以开始标签起始、以结束标签终止，标签之间的内容，被称为标签内容体，标签内容区，或者标签体，参考上面的表。
双标签元素可以进行嵌套

<div>
<h1>标题</h1>
<p>这是一个段落，<strong>张三</strong>这个名字需要加粗</p>
</div>

第二类：单标签元素

单标标元素只有开始标签，而且在开始标签的名字后面有斜杠。也叫自结束标签。没有标签体。
虽然有的时候忘记写斜杠，浏览器依然能解析出来。但是尽量别忘记。

虽然标签名大小写字母不敏感，但是建议使用小写字母。

因为XHTML(未来版本)强制使用小写。

HTML属性

属性是HTML元素的附加信息

属性一般位于开始标签中、总是以名/值对的形式出现，格式：name=“value” ，即，属性名=“属性值”
属性的值始终被包括在引号中，常用双引号，单引号也没有问题。示例： <span id='msg'> xxx </span>
如果属性的值本身带有双引号，那么您必须使用单引号。例如 <span name ='my name is "Michael" and' > xxx <span>
属性名和属性值尽量使用小写字母。而新版本的 (X)HTML 要求使用小写属性。

下面列出了适用于大多数 HTML 元素的属性：

属性	描述	备注
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)	该属性的值可以有多个，在双引号里使用空格分开
id	定义元素的唯一id	id作为唯一标识符，只能填写一个，具有唯一性
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

快捷键： ctrl+斜杠可以去设置里修改或查询快捷键有点快捷键是ctrl+k ctrl+c

HTML字符实体

HTML and XHTML 预留了一些字符，您不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。比如在文字中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体（character entities）。

字符实体类似这样：

&entity_name; <---注意，分号不能丢
或
&#entity_number; <---注意，分号不能丢

如需显示小于号，我们必须这样写：（新版本似乎已经不需要了可以直接打出来<）

< 或
< 或
<

注意：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

再比如空格，浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。

常用实体如下：

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

注意：实体字符对大小写敏感。

HTML常用标签

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <base>, <meta>, <style>, <link>, <script> 和 <noscript> 。

<title>元素

<title> 在 HTML/XHTML 文档中是必需的，该标签定义了不同文档的标题：

即浏览器工具栏(标签页)的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

<base>元素

<base> 标签规定文档中所有相对 URL 的基准 URL(即父路径)。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

一个HTML文档中只能有一个 <base> 元素

<meta>元素

meta元素描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。比如指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程教程">

定义网页作者:

<meta name="author" content="michael">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

规定字符集

<meta charset="utf-8">

<style>与<link>

<style>元素一般用于书写内部样式表，如：

<head>
<style type="text/css">
body {
background-color:yellow;
}
</style>
</head>

<link> 标签定义当前文档与外部资源之间的关系。常用于引入外部样式表

<link rel="stylesheet" href="styles.css">

这两个元素标签，后面会具体讲。

<script>元素

<script>标签用于引入外部的脚本文件，或者书写脚本代码。

<noscript>元素

早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。这个标签的用法也非常简单：

<noscript>
Your browser does not support JavaScript!
</noscript>

HTML基础标签

标题标签

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1>定义最大的标题。 <h6> 定义最小的标题。
浏览器会自动地在标题的前后添加空行，属于块级元素。
请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>

段落标签

HTML 可以将文档分割为若干段落。
段落是通过<p>标签定义的。
浏览器会自动地在段落的前后添加空行。属于块级元素

<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>

换行标签

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签
<br>标签对于写地址或诗歌非常有用。
<br/> 元素是一个空的 HTML 元素，也就是自结束标签。在XHTML中，强制写斜杠的。
请使用 <br/> 标签来插入换行符，而不是用它来增加段落之间的空白。

<p>如需在文本中强制<br>换行<br>，请使用 <br>br<br> 元素。</p>

<h1>《赋得古原草送别》</h1>

<p>
离离原上草，<br>
一岁一枯荣。<br>
野火烧不尽，<br>
春风吹又生。<br>
远芳侵古道，<br>
晴翠接荒城。<br>
又送王孙去，<br>
萋萋满别情。<br>
</p>

<p><em>- 唐白居易</em></p>

水平线

<hr> 标签在 HTML 页面中创建水平线，可用于分隔内容。

<body>
   <p>hr 标签定义水平线：</p>
   <hr />
   <p>这是段落。</p>
   <hr />
   <p>这是段落。</p>
   <hr />
   <p>这是段落。</p>
</body>

图像标签

使用<img/>标签可以在网页上插入图片
从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。
<img/>标签是一个单标记，自结束标记, 名字后面带有斜杠
<img/>标签的常用属性如下：

属性	作用
src	用于书写图片的引用路径，可以是本地路径，也可以是网络路径
alt	如果由于某种原因无法显示图像，则指定图像的替代文本。该属性主要用于搜索引擎
width	图片的宽
height	图片的高

<body>
<h2>引用网络上的一张图片</h2>

<img src="https://img.tukuppt.com/ad_preview/00/04/15/5c98b99bce3ad.jpg" alt="黑板报" width="500px">

<h2>引入本地上的一张图片</h2>

相对路径写法：<img src="./img/fcz/1.jpg" alt="黑寡妇">
<hr>
绝对路径写法：<img src="D:/front/img/fcz/2.jpg" alt="雷神">
</body>

图片未指定宽度和高度，则在加载图像时页面可能会闪烁。

图片的宽与高只设置其中一个，图片会等比例缩放。

图片的格式:

jpeg/jpg 支持的颜色丰富，不支持透明，不支持动图，一般用来显示照片

gif 支持的颜色少，支持简单透明，支持动图颜色单一，动图

png 支持的颜色丰富，支持复杂透明，不支持动图 -专为网页而生

webp 谷歌推出的专门为网页中的图片的一种格式具有所有优点，文件特别小，兼容性不好

base64 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64

总结：效果一样，选小的；效果不一样，选效果好的

超链接标签

超链接，就是在一个网页上点击后，可以跳转到另一个网页，或者是本网页的其他位置。

超链接的标签是<a>
<a>是一个双标记，标签内容体可以是文本，也可以是图像
<a> 的属性如下：

属性	重要性	描述
href	必需	指令链接目标的URL。可以是另一个页面，也可以是本页面的其他位置
title	可选	鼠标悬停在超链接上时显示的内容
target	可选	指定链接如何在浏览器中打开，常用值如下： `_blank`：在新标签页打开链接 `_self`：在当前标签页打开链接
rel	可选	规定当前文档和被链接文档之间的关系。

超链接默认样式

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

按钮标签

<button> 标签定义一个按钮。

在 <button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性使用不同的默认值。

<body>
<button type="button" οnclick="alert('你好，世界!')">点我!</button>
</body>

文本格式化标签

以下是一些常用的文本格式化标签：

<strong>加重语气的的文本

<b>加粗,bold的意思

<em>斜体效果，强调作用

<i>斜体效果itatic

<pre>预格式化文本

<small>更小的文本

<code>用于存放计算机代码

<bdo>文字显示的方向

<blockquote> 引用标签

<q> 双引号==标签==

<del> 删除文本

<ins>插入文本

<sub>下标文本

<sup>上标文本

列表标签

HTML 支持有序、无序和自定义列表。

无序列表

无序列表是一个项目的列表，列表项使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签，列表项使用<li>标签
<h4>无序列表：默认样式</h4>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
<h4>使用css自定义样式</h4>
<ul style="list-style-type: square;">
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>

有序列表

同样，有序列表也是一列项目，列表项使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
<h4>有序列表：默认样式</h4>
<ol>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ol>
<h4>使用css自定义样式</h4>
<ol style="list-style-type:lower-alpha;">
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ol>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<h4>一个自定义列表：</h4>
<dl>
<dt>长春</dt>
<dd>-- 吉林省的省会城市</dd>
<dt>哈尔滨</dt>
<dd>-- 黑龙江省的省会城市</dd>
</dl>

注意事项：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<h4>嵌套列表：</h4>
<ul>
<li>咖啡
<ul>
<li>卡布奇诺</li>
<li>雀巢</li>
</ul>
</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>江南茶区</li>
<li>华北茶区</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>

表格标签

表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行，每行被分割为若干单元格，表格可以包含标题行(俗称表头)，用于定义列的标题。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

在过去也应用于页面的布局上，但是现在一般都使用<div>标签做页面的布局了。

HTML 表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。

我们也可以使用 CSS 来进一步自定义表格的样式和外观。

<table> 元素表示整个表格，在整体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>
<caption> 为整个表格定义主题

<thead> 表格头部部分(也称表格页眉)。

<th> 在<thead>中使用<th>元素定义每一列的标题，有加粗效果，与普通单元格区分开来。（table header）

<tbody> 表格主体部分

<tr> 在<tbody>中使用<tr>元素定义行（table row 的缩写）

<td> 在<tr>中使用<td>元素定义单元格数据（ table data 的缩写）
<tfoot> 可用于在表格的底部定义摘要、统计信息等内容
<body>
    <table border="10px" cellspacing="0" cellpadding="10px" width="50%">
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">统计</td>
            </tr>
        </tfoot>
    </table>
</body>
border: 表的外边框 10像素宽
cellspacing: 单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格整体的位置 center left right
width: 表格整体的宽度可以是具体像素，也可以是屏幕的百分比

rowspan: 跨行属性，跨几行就写数字几
colspan: 跨列属性，跨几列就写数字几

表单标签

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。这些元素也都被称为控件元素

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。

<label> 元素用于为表单元素添加标签，提高可访问性。

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。

<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<textarea>元素用于创建文本域（多行文本输入控件），可写入字符的字数不受限制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="/" method="post">
        <fieldset>
            <legend>用户信息采集</legend>
            <br>

            <!-- 文本输入框:   input的type类型为text。 默认类型 -->
            <label for="name">用户名:</label>
            <input type="text" id="name" name="username" required maxlength="10">

            <!-- 密码输入框：  type为password。 显示效果为.或者* -->
            <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="password" id="password" name="password" required size="10">


            <br>
            <br>
            <hr>
            <br>

            <!-- 单选按钮: type为radio,   name相同的为一组，-->
            <label>性别:</label>
            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>

            <br>
            <!-- 复选框：type为checkbox  -->
            <label>爱好</label>
            <input type="checkbox" id="book" name="hobbys" value="book">
            <label for="book">读书</label>
            <input type="checkbox" id="movie" name="hobbys" checked value="movie">
            <label for="movie">电影</label>
            <input type="checkbox" id="music" name="hobbys" value="music">
            <label for="music">音乐</label>
            <input type="checkbox" id="dance" name="hobbys" checked value="dance">
            <label for="dance">跳舞</label>

            <br>
            <br>
            <hr>
            <br>

            <label for="range">范围</label>
            0<input type="range" id="range" name="range" value="50">100

            <br>
            <br>
            <hr>
            <br>

            <label for="number">数字</label>
            <input type="number" id="number" name="number" value="4" max="10" min="1" readonly>

            <br>
            <br>
            <hr>
            <br>

            <label>日期时间</label>
            <input type="time" value="12:12">
            <input type="date">
            <input type="datetime-local">
            <input type="week">
            <input type="month">

            <br>
            <br>
            <hr>
            <br>

            <label for="color">颜色</label>
            <input type="color">

            <br>
            <br>
            <hr>
            <br>

            <label for="file">文件上传</label>
            <input type="file">
            <br>
            <br>
            <hr>
            <br>


            <!-- 下拉列表 -->
            <label for="province">省份:</label>
            <select id="province" name="province">
                <option value="hlj">黑龙江省</option>
                <option value="jl">吉林省</option>
                <option value="ln">辽宁省</option>
            </select>
            <label for="city">城市:</label>
            <select id="city" name="city">
                <option value="harbin">哈尔滨</option>
                <option value="cc">长春</option>
                <option value="sy">沈阳</option>
                <option value="" selected></option>
            </select>

            <br>
            <br>
            <hr>
            <br>
            <label for="">hidden: 但是会被提交</label>
            <input type="hidden" name="renming" value="zhangsan">
            <br>
            <br>
            <hr>
            <br>

            <label for="">文本域</label>
            <textarea name="" id="" cols="20" rows="2"></textarea>

            <br>
            <br>
            <hr>
            <br>
            <!-- 提交按钮 -->
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="普通按钮">
        </fieldset>
    </form>
</body>

</html>

注意：以下这些属性是HTML5支持的新类型。并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

网页布局与相关元素

在以前的版本中，我们常用table元素来设计网页的结构。随着版本的更新，在HTML4.0和现在的HTML5.0版本中我们已经不再使用table元素来设计网页的布局了。

我们现在使用div+css来设计页面结构。常用的网页的布局大致也就是如下图所示的这样的，当然也可以根据实际需求来设计网页的布局。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" style="border: 1px red solid;">
        <div class="header" style="border: 1px blue solid;  height: 100px;">logo区</div>
        <div class="nav" style="border: 1px yellowgreen solid;  height: 100px;">导航区</div>
        <div class="body" style="border: 1px red solid;   height: 400px;">
            <div class="left" style="border: 5px pink dotted; width: 500px; height: 390px;float:left">侧边导航区</div>
            <div class="center" style="border: 5px solid red;width: 850px;  height: 390px;float:left">
                <div class="article" style="border: 5px solid green; height: 190px;">文章部分</div>
                <div>
                    <div style="border: 1px solid grey; height: 95px; width: 420px; float: left;">左上</div>
                    <div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">右上</div>
                    <div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">左下</div>
                    <div style="border: 1px solid grey; height: 95px; width: 420px;float: left;">右下</div>
                </div>
            </div>
            <div class="right" style="border: 5px pink dotted; width: 500px; height: 390px;float: left;">广告区</div>
        </div>
        <div class="footer" style="border: 1px greenyellow solid; height: 100px;">页面底部</div>
    </div>
</body>

</html>

容器元素<div>

HTML <div> 元素是块级元素，可以认为他是其他 HTML 元素的容器。
<div> 元素没有特定的含义。
它属于块级元素，浏览器会在其前后显示折行。
<div> 元素最常见的用途就是页面布局了。它取代了使用表格定义布局的老式方法。
<div>元素配合CSS，可以对大的内容块设置样式属性

容器元素<span>

HTML <span> 元素是内联元素，可用作文本的容器，也就是用来包括
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure{
display: block;
}

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.可以使用HTML5 Shiv来解决这个问题：

结构元素不具有任何样式，只是使页面元素的的语义更加明确。

HTML5其他新元素

HTML5版本在HTML4.x版本基础之上新增了很多元素或属性，比如

1、表单元素<input>中新增了一些属性：email、color、number、range、search、tel、url、date等。这些属性自带简单的验证功能。

2、新增的布局元素：header, section, footer, aside, nav, article等

3、新增的多媒体元素：audio、video等

音频标签

<audio> 标签定义声音，比如音乐或其他音频流。

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

<audio>的属性如下：

属性	值	描述
src	URL	规定音频文件的 URL。
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。

<body>
<audio src="./音视频/audio.mp3" type="audio/mp3" controls="controls" autoplay loop></audio>
<br>

<audio controls>
<source src="./音视频/audio.mp3">
<source src="./音视频/audio.ogg">
您的浏览器不支持 audio 元素。
</audio>

<embed src="./音视频/audio.mp3" type="audio/mp3" width="300px" height="60px">
</body>

可以在 <audio> 和 </audio>之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

视频标签

<video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

视频格式的 MIME 类型:

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

<video>的属性：

属性	值	描述
src	URL	要播放的视频的URL
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
width	pixels	设置视频播放器的宽度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

<body>
<video src="./音视频/flower.mp4" controls preload="metadata" width="500px"></video>


<video width="320" height="240" controls>
<source src="./音视频/flower.webm">
<source src="./音视频/flower.mp4">
您的浏览器不支持 video 标签。
</video>
</body>

内联标签

<iframe> 标签规定一个内联标签。

一个内联标签被用来在当前 HTML 文档中嵌入另一个文档。

所有主流浏览器都支持 <iframe> 标签。

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

提示：使用 CSS 为 <iframe> （包括滚动条）定义样式。

<body>

<iframe src="https://www.runoob.com" frameborder="1" height="300" width="500"></iframe>
</body>

元素分类

HTML 元素大致上可以分为两大类，块级元素或内联元素(行内元素)。

第一大类：块级元素**(面试重点)**

块级元素在浏览器显示时，会独占一行。即在开始标签前会换行，在结束标签后，也会换行。

比如: <div>,<h1>~<h6>， <p>， <ul>，<ol>，<li>, <table>、<form>等

第二大类：内联元素

内联元素，也叫行内元素，即默认情况下，在浏览器上显示效果为，不会独占一行，两个挨着的行内元素，通常会在一行上显示。

比如: <a>, <img>、<span>、<button>, <td>、<input>等，只要不是独占一行的，都是内联元素

浏览器会自动对网页中不符合规范的内容进行纠正

- 标签写在了根元素的外面
- p元素中嵌套了块元素
- 根元素中出现了除了head和body以外的子元素

CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

1.丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2.易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3.多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4.层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

5.页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

总之一句话，CSS用来设置网页中元素的样式

样式分类和语法

我们可以根据CSS代码所在的位置分成三类样式：内联样式，内部样式表，外部样式表。

内联样式

内联样式，也叫行内样式。将样式定义在元素的style属性中。

style = " 属性 : 值 ; 属性 : 值 ; ……"

<div style="background-color: orange; width: 500px; height: 200px;">
一个div
</div>

缺点：使用内联样式，定义的样式只能对一个HTML元素生效，不能重用。

建议：实际开发中，尽量不要用这种方式

内部样式表

内部样式表，是将样式定义到HTML的<head>元素的子元素<style>里，使用选择器来定位要设置样式的元素。

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS内部样式表</title>
    <style>
       /* 为了让CSS可读性更强，你可以每行只描述一个属性: */
        #d1 {
            background-color: orange;
            width: 500px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="d1">
        一个div
    </div>
</body>

</html>

优点：

可以同时为多个HTML元素设置样式，方便复用

并且修改时只需要修改一处即可全部应用

缺点：

内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

外部样式表

外部样式表，是将css代码编写到CSS文件中，文件的扩展名为.css，然后通过link标签将css文件引入到HTML文档中。

mystyle.css文件里：

/* 为了让CSS可读性更强，你可以每行只描述一个属性: */
#d1 {
background-color: orange;
width: 500px;
height: 200px;
}

特点：

通过link标签引入，意味着可以在不同HTML文档中进行复用。
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS内部样式表</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>
    <div id="d1">
        一个div
    </div>
</body>

</html>

选择器（4种）

标签选择器

结构： 标签名{css属性名：属性值；}

作用：通过标签名，找到页面中所有的这类标签，设置样式

注意：

标签选择器选择的是一类标签，而不是单独的一个
标签选择器无论嵌套关系有多深，都能够找到对应的标签

<style>
    p{
        color: red;
    }
</style>
<body>
    <p>
        标签选择器
    </p>
</body>

类选择器

结构： .类名{css属性名：属性值；}

作用：通过类名，找到页面中所有的带有这个类名的标签，设置样式

注意：

所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
一个标签中可以同时有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<style>
    .one{
        color: red;
    }
</style>
<body>
    <div class="one">
        类选择器
    </div>
</body>

id选择器

结构： #id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意：

所有的标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<style>
    #one{
        color: red;
    }
</style>
<body>
    <div id="one">
        id选择器
    </div>
</body>

class类名和id属性值之间的区别

class类名相当于姓名，可以重复，
一个标签中可以有多个class类名
id属性值相当于身份证号码，不可重复，一个标签里面只能有一个ID属性值

类选择器和id选择器之间的区别

类选择器以.开头；id选择器以#开头
实际开发中的情况类选择器用的最多 id一般配合js来使用，除非情况特殊，一般不要给id设置样式实际开发中会遇到冗余代码的抽取

通配符选择器

结构： *{css属性名：属性值}

作用：找到页面中所有的标签，然后设置样式

注意：

开发中应用极少，只有在特殊的情况下才会使用
在小页面中可能会用于去除页面中默认的margin和padding

<style>
   * {
      color: red;
   }
</style>
<body>
   <div>
      通配符选择器
   </div>
</body>

复合选择器（2种）

交集选择器

语法： 选择器1选择器2{css属性名：属性值}

作用：选中页面中同时满足多个选择器的标签，紧挨着的

结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式

注意：

之间没有任何东西隔开，紧挨着的，
交集选择器中如果有标签选择器，标签选择器必须放在前面

<style>
   p.one{
      color: red;
   }
</style>
<body>
   <p class="one">
      这个元素会被应用样式
   </p>
   <p>
      这个元素不会被应用样式
   </p>
</body>

并集选择器

语法： 选择器1,选择器2{css样式}

作用：同时选择多组标签，设置相同的样式

结果：找到选择器1和选择器2选中的标签，设置样式

注意：选择器与选择器之间用逗号隔开可以是基础选择器或者复合选择器每组选择器通常一行写一个，提高代码的可读性

<style>
   p,div{
      color: red;
   }
</style>
<body>
   <p>
      这个元素会被应用样式
   </p>
   <div>
      这个元素也会被应用样式
   </div>
</body>

关系选择器（4种）

语法	用法	备注
父亲>儿子	儿子中的个别选择	选择器之间有大于号
祖先后代	后代全部选择	选择器之间用空格隔开
兄+弟	哥哥的弟弟被选择(弟弟必须严格相邻哥哥)	选择器之间用+隔开
兄~弟	哥哥的符合条件的所有弟弟被选择	选择器之间用波浪线隔开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>关系选择器(兄弟、父子选择器)</title>
    <style>
        /* 父子选择 ，个别几个儿子*/
        /* div>span {
            color: blue;
            font-size: 40px;
        } */

        /* 祖先后代选择，全部 */
        /* div span {
            color: red;
        } */


        /* 必须相邻兄弟选择，是兄弟但不相邻，不选择 */
        /* div+span {
            color: greenyellow;
        } */

        /* 全兄弟选择 */
        /* p~span {
            color: rgb(3, 110, 8);
        } */

        p~* {
            color: orange;
        }
    </style>
</head>

<body>
    <div>

        我是div
        <p>
            我是div中的p
            <span>我是p中的span</span>
        </p>
        <div>我是div中的div</div>
        <span>我是div中的span1</span>
        <span>我是div中的span2</span>
    </div>
    <span>我是div之外的span1</span>
    <span>我是div之外的span2</span>

</body>

</html>

属性选择器（5种）

语法	用法
[属性]	选中含有指定属性的元素
[属性=属性值]	选中含有指定属性和指定属性值的元素
[属性^=属性值]	选中含有指定属性和指定属性值开头的元素
[属性$=属性值]	选中含有指定属性和指定属性值结尾的元素
[属性*=属性值]	选中指定属性名和含有指定属性值的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种方法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名为title,设置字体颜色红色  */
        [title] {
            color: red;
        }

        /* 第二种用法：选择含有指定属性及指定属性值的元素。
                语法：[属性名=属性值]{} */
        /*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 */
        [title=ab] {
            color: green;
        }

        /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
                语法：[属性名^=属性值]{}  */
        /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
        [title^=ab] {
            background-color: yellow;
        }

        /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
                语法：[属性名$=属性值] */
        /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
        [title$=ab] {
            font-size: 30px;
        }

        /* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
                语法：[属性值*=属性名]{} */
        /* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
        [title*=c] {
            background-color: green;
        }
    </style>
</head>

<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>

</html

伪类选择器

伪类：不存在的类，特殊的类

伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素...
伪类一般情况下都是使用:开头

元素选择伪类选择器

:前有空格代表从子类开始数，无空格代表从所在级数开始。

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素 ,n的范围0到正无穷
           even 或 2n 表示选中偶数位的元素
        odd 或 2n+1 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行选择
以下这些伪类都是在同类型元素中进行选择
:first-of-type
:last-of-type
:nth-of-type(n)

否定伪类选择器

:not() 括号里传入其他选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>否定伪类</title>
    <style>
        div :not(p:first-of-type):not(p:last-child) {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>文字</p><!-- 不变红 -->
        <p>文字</p><!-- 变红 -->
        <p>文字</p><!-- 变红 -->
        <p>文字</p><!-- 不变红 -->
    </div>
</body>

</html>

a链接的伪类

:link 表示未访问过的a标签
:visited 表示访问过的a标签
以上两个伪类是超链接所独有的
由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态

伪元素选择器

虚假的元素，实际上是没有的，但是css为了设置一些样式，默认提供的，一般都用在段落标记中

p::first-letter 首字符
p::first-line 首行
p::selection 选中的
::before 第一个字符之前
::after 最后一个字符之后
before和after必须配合content一起使用(before,after所写的内容无法选中且永远在最前和最后)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
        /* 需求一：让文章的首字母一直为字体为24px */
        p::first-letter {
            font-size: 24px;
        }

        /* 需求二：让文章的第一行添加背景色灰色 */
        /* p::first-line {
            background-color: #ccc;
        } */

        /* 需求三：让选中的内容，字体为红色 */
        /* p::selection {
            color: red;
        } */

        /* 需求四：在元素开始的位置前+'你好' */
        /* p::before {
            content: '你好';
            color: red
        } */
    </style>
</head>

<body>
    <p>hello</p>
    <p>world,我们要相信明天会更好。</p>
</body>

</html>

选择器的权重

内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态

样式的继承

CSS样式继承是指子元素会继承父元素的某些样式属性。常见的可以继承的CSS属性包括 font-family 、 color 、 font-size、line-height。

继承的设计，是为了方便我们的开发，利用继承的特点，我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承，比如背景相关的，布局相关等的这些样式都不会被继承。

其他单位

像素

- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样像素

百分比

- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变

- 是一个相对单位。
- em是相对于当前元素内的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
- 如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px

rem

- rem是相对于根元素（html）的字体大小来计算

颜色单位

1. 颜色单位可以使用有英文单词的颜色，比如 black,red,yellow,.......
   注意：能叫上名字的毕竟是少数，不能表示出来所有的颜色
2. rgb ：颜色的三原色，red, green, blue
在电脑上可以使用8位二进制来表示三原色，
red: 00000000~11111111
green: 00000000~11111111
blue: 00000000~11111111
二进制的数字不同，表示该颜色的比例不同。从左到右分别是红，绿，蓝。每个原色，也可以使用16进制表示
red        #ff
green     #ff
blue     #ff

   小贴士：如果三原色的16进制的字符一致，可以简写       比如： #aabbff 可以简写成 #abf
3. rgba: 前三个表示的就是三原色，第四个a表示不透明度。
               1表示不透明，0表示完全透明 .5表示半透明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
        /* 设置整体里的字体大小 */
        html {
            font-size: 8px;
        }

        /* 设置body里的字体大小，正常默认大小也为16px*/
        body {
            font-size: 16px;
        }

        p:first-child {
            /* 可以看出，和body里的文字大小一致 */
            font-size: 16px;
        }

        p:nth-child(2) {
            /* 1em=1font-size, 所以也是16px */
            font-size: 1em;
        }

        p:nth-child(3) {
            /* 1.5em   等于24px */
            font-size: 1.5em;
        }

        p:nth-child(4) {
            font-size: 24px;
        }

        p:nth-child(5) {
            /* rem 是相对于HTML根元素的font-size大小 */
            font-size: 2rem;
        }

        p:nth-child(6) {
            /* color: rgb(255, 0, 0); */
            /* color: rgb(255, 255, 0) */
            color: rgb(0, 0, 255)
        }
    </style>
</head>

<body>
    body里的文字
    <p> 段落1里的文字</p>
    <p> 段落2里的文字</p>
    <p> 段落3里的文字</p>
    <p> 段落4里的文字</p>
    <p> 段落5里的文字</p>
    <p> 段落6里的文字</p>

</body>

</html>

盒子模型

为了更好的设计HTML元素的样式，CSS语言引入了盒子模型（box model）概念，即把HTML元素看作矩形盒子，这样每个元素(盒子)都有自己的边距，边框、填充、实际内容。这样更方便CSS设计样式和布局。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。这样的优点就是可以将元素放置在任何地方，可以通过调整宽和高来充满整个屏幕

在CSS中，盒模型（Box Modle）是用来对元素进行设计和布局的，由内到外包含实际内容区、内边距、边框、和外边距四个部分。

1）内容区Content

用来放置文本或者子元素。

2）内边距padding

即内容区与边框的距离。

3）边框border

围绕在内边距外的边框。

4）外边距margin

边框以外的区域。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

盒子模型分类

在CSS语言中，CSS将所有的HTML元素归纳为四种盒子模型、分别是块级盒子、内联级盒子、内联块级盒子、弹性盒子

类型	特点	包括的标签	如何设置
1.块级盒子	独占一行，对宽度高度支持	div、p、ul、 li、 h1~h6等	display: block;
2.内联级盒子	不独占一行，对宽度高度不支持	span、 a等	display: inline;
3.内联块级盒子	不独占一行，对宽度高度支持	img、input等	display: inline-block;
4.弹性盒子	不论父级元素能不能放下子元素，子元素始终横向布局		display: flex;

盒子解析

Content

content，盒模型的实际内容区，该区域的用途是用来放置文本，或者子元素盒子的。

	设置width是否有效	设置height是否有效	内容区大小的决定因素
块级盒子	有	有	由width和height决定
内联级盒子	无	无	有实际存放的文本或者子元素决定

background-color也是对内容区进行设置的，不过一般会溢出到padding里，与border紧紧挨着

Padding

padding，定义了内容区距离边框的这一片区域，该区域是透明的，没有颜色，包含上下左右的四个内边距。

可以使用独立属性，分别给四个边距设置距离

上内边距	右内边距	下内边距	左内边距
padding-top：值px;	padding-right：值px;	padding-bottom：值px;	padding-left：值px;

上述四个属性的语法： padding-xxx: length，只能设置距离，不能设置其他样式(如颜色不能设置)

简化设置： 使用padding属性来简化四个属性的写法

值的个数	每一个值的含义
padding: 值;	1个值时，这个值代表上、下、左、右四个内边距的距离
padding: 值1 值2;	2个值时，第一个值代表上下内边距，第二个值代表左右内边距
padding: 值1 值2 值3;	3个值时，第一个值代表上内边距，第二个值代表左右内边距，第三个值代表下内边距
padding: 值1 值2 值3 值4;	4个值时，上，右，下，左。顺时针记忆。

该区域设置不了颜色，但是内容区的颜色会溢出到该区域

Boeder

元素的边框，在CSS中，通常由的这三个维度属性来控制，分别是边框宽度、边框颜色、边框样式。

每一个边框都有三个维度属性，可以分别对上下左右的边框单独设置宽，颜色，样式，感兴趣可以自己试试，这里不做演示，属性如下：

维度	上边框	下边框	左边框	右边框
宽	border-top-width	border-bottom-width	border-left-width	border-right-width
颜色	border-top-color	border-bottom-color	border-left-color	border-right-color
样式	border-top-style	border-bottom-style	border-left-style	border-right-style

- none: 默认无边框
- dotted: 点虚线
- solid: 实线
- double 双线条
- dashed 虚线
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。效果取决于边框的颜色值

四个边框的同一个维度属性，可以简化成一个属性：

维度	1个值(上下左右)	2个值(上下，左右)	3个值(上，左右，下)	4个值(上，右，下，左)
border-width	X: 10px；	X: 10px 15px;	X:5px 10px 15px;	X: 5px 10px 15px 20px;
border-color	~	~	~	~
border-style	~	~	~	~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            border-width: 5px;
            border-color: blueviolet;
            border-style: solid;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        你好
    </div>
</body>
</html>

四个边框的同一个维度属性的值相同的话，可以继续简化成最终的一个属性：

属性	语法	解析
border	border：10px solid red;	该属性必须设置三个值，分别代表三个维度的值，顺序可以颠倒

盒子尺寸（重点）

盒子的尺寸，也就是盒子的大小，在这里指的是元素的可见大小，不包括外边距，默认情况下由Border + Padding + Content三个部分决定的。因为这几个都可以设置宽度和高度，也就影响了盒子的整体大小。

（内容区内边距边框）

针对于盒子的尺寸，css提供了一个属性box-sizing 来简单控制相应因素的影响效果。

可选值	解析
content-box	属性width和height 用来规定内容区的大小。盒子可见框大小由内容区，内边距和边框共同决定。
border-box	属性width和height用来规定整个可见框的大小，内容区的大小自适应。比如设置了width为100，边框为10，内边距为10，那么内容区的宽就是100 - 10``2 - 10``2 = 60了。

margin(重点)

外边距的基本设置

margin(外边距)属性定义元素周围的空间。作用一般是用来设置该元素所在网页的位置，也有四个属性分别对应四个方向的外边距

上外边距	右外边距	下外边距	左外边距
margin-top：值px;	margin-right：值px;	margin-bottom：值px;	margin-left：值px;

使用margin属性，可以简化写法：

	1个值(上下左右)	2个值(上下，左右)	3个值(上，左右，下)	四个值(上，右，下，左)
margin	X：10px;	X：10px 20px；	X：10px 15px 20px	X：5px 10px 15px 20px;

属性值的特点：

上下左右可以使用具体值，定义一个固定的margin（使用像素，pt，em等）

左右也可以使用百分比

左右使用auto，这样做的结果会依赖于浏览器。但是有居中的效果

外边距的特点：

外边距不会影响盒子可见框的大小

但是外边距会影响盒子的位置

margin会影响到盒子实际占用空间

外边距的折叠

针对于块元素（块级盒子）来说，都是独占一行，因此只涉及到垂直方向上的外边距的重叠(折叠)，即两个元素的相邻外边距会发生重叠问题，也叫合并问题。针对于这种问题，可以概述成两种情况：

1）相邻块元素，也就是兄弟元素

都是正值时：取较大值。

一正一负时：取两者之和。

都是负值时：取绝对值较大的。

兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行特殊处理

2）嵌套块元素，也就是父子元素

父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须要进行处理 （只需要父元素添加border属性）

解决方式：父元素添加border属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #outer {
            border: 1px solid red;
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }

        #d1 {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

        #d2 {
            border: 5px solid blue;
            width: 200px;
            height: 200px;
        }

        #d2 {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="d1">
            <div id="d2">
                1
            </div>
        </div>
    </div>
</body>

</html>

盒子的位置

盒子的位置，也就是元素的位置。一个元素所在的位置，我们一般都是相对于其父元素来说的，而且我们需要从两个方向上来考虑，一个是水平方向上，一个是垂直方向上。

水平方向上的盒子位置

一个块级元素一般都是位于它所在父元素的内容区里，因此在水平方向上，要满足，而且必须满足：

左右外边距 + 左右边框 + 左右内边距 + 内容区宽度 = 父元素内容区的宽度，换成公式，就是下面这样的：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

==== 其父元素内容区的宽度==，如果在手动设置的值上不满足，那么某一个属性值则会失效，然后自动填充，使其满足等式。

第一种情况：七个属性值加起来 ≠内容区宽度，则浏览器会自动调整右外边距margin-right值以使等式成立

案例1：
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
最终会自动填充成如下
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800

案例2：
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
最终会自动填充成如下
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

第二种情况：设置auto值

七个属性中，只有width，margin-left，margin-right这三个属性可以设置auto值，

只有一个属性设置了auto，则自动调整该属性来使等式成立
两个属性设置为auto时，
- 如果是左外边距和右外边距为auto，则位置居中。
- 如果是一个width和一个外边距，则width调整为最大，外边距调整为0
三个属性都设置为auto时，则width调整为最大，外边距调整为0

垂直方向上的盒子位置

垂直方向上的位置，相对来说比较简单，只需要修改上下的外边距即可，没有水平距离复杂。

有一种溢出情况，需要注意。如果溢出了，可以在父元素里设置属性overflow，有以下可选值

visible: 默认值，表示可见
hidden : 将溢出的内容裁剪
scroll: 添加了上下和左右的滚动条设置
auto: 根据需求自动添加滚动条

其他盒子模型

比如span、a等元素，就是默认使用了内联级盒子模型，也就是display的值为：inline。对于内联元素(行内元素)的盒模型来说：

第一点：内联级盒子不会独占一行。

第二点：不支持设置content的宽度和高度，设置也无效，因为内容区的宽度和高度都是内容数据撑起来的

第三点：支持设置左右的padding、border、margin。不支持上下的padding、border、margin设置，因此垂直方向上不会挤压其他元素。

上下左右的padding、border和左右的margin可以显示，但是并不能把内容顶开。

第四点：基于第三点可以知，垂直方向上的两个紧邻的行内元素是内容区紧挨着内容区的

第五点：水平方向上两个紧邻的行内元素的外边距不会重叠，而是求和。

内联块级盒子模型

而img、input等元素，默认使用了内联块级盒子模型，该模型的特点如下：

使用了内联块级盒子模型的元素，具有内联级元素的某些特点

1）也不会独占一行

也有块级盒子模型的特点：

2）上下左右的外边距、边框、内边距、设置都有效。
3）内容区的宽度和高度，设置有效

还有一些特点：

4）垂直和水平方向上两个相邻的内联块级盒子的外边距不会重叠，而是求和。

元素更换盒子模型

如果元素不想使用默认的盒模型，可以通过display属性，来修改自己的盒模型，这样就具备了修改后的盒模型的特点了。

display属性的可选值如下：

block 表示使用块级盒子模型，即具备了块级盒模型的样式特点。
inline 表示使用内联级盒子模型，即具备了内联级盒模型的样式特点
inline-block 表示使用内联-块级盒子模型，即具备了内联块级盒模型的特点。
none 隐藏，不再占用原有的空间，释放出位置，没有任何样式。

注意，修改了元素的盒模型，并不是说元素的性质变了，比如div修改成内联级盒子模型，div还是块元素，并不是行内元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素的盒模型</title>
    <style>
        div{
            border: 1px red solid;
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
        #s1{
            width: 200px;
            height: 50px;
            border: 3px green solid;
            padding: 3px;
            margin: 5px;
            display: block;
        }
        div div{
            display: inline;
        }
    </style>
</head>
<body>
    <div>
        <span id="s1">我是一只鹅</span><span id="s2">你也是一只鹅</span>
        <div>1</div><div>2</div>
    </div>
</body>
</html>

查看全文

http://www.kler.cn/a/591370.html

检查 YAML 文件格式是否正确的命令 yamllint

【Linux】浅谈环境变量和进程地址空间

王者荣耀道具页面爬虫（json格式数据）

Rust + WebAssembly 实现康威生命游戏

如何开始搭建一个交易所软件？从规划到上线的完整指南

常用工具： kafka，redis

【Golang】深度解析go语言单元测试与基准测试

【Kafka】Kafka写入数据

numpy学习笔记7：np.dot(a, b) 详细解释

PHP前置知识-HTML学习

Matlab 高效编程：用矩阵运算替代循环

华为IFS财经变革（51页PPT）（文末有下载方式）

harmonyOS开发，如何使用Record，将一种类型的属性映射到另一种类型

Qt——设计颜色编辑选取对话框

基于FPGA的轨道交通CPCI光纤板(6U)板卡

Unity WebGL IIS报错无法使用

k8s-coredns-CrashLoopBackOff 工作不正常

《星际通信协议中的密码战争：一场跨越光年的攻防博弈》

CentOS下安装ElasticSearch（日志分析）

82.RadioButton的选中处理逻辑 C#例子 WPF例子

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
'	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

前端