一、HTML学习总结
1.何为HTML
（1）HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
（2）定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
（3）HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
（4）HTML 文档包含了HTML 标签及文本内容。
2.HTML文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑 :) </p>
</body>
</html>（1）<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无
（2）<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
（3）<head></head>: <head>元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
（4）<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。
（5）<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。
（6）<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
（7）body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
3.HTML元素
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等等。
[元素构成]
（1）开始标签（Opening tag）：包含元素的名称（此处为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
（2）结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。
（3）内容（Content）：元素的内容。
（4）元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
4.HTML文档相关说明
4.1 注释：特殊的记号<!--和-->包括起来。
注： 在 code 软件中，输入Ctrl + /即可快捷的进行注释！
4.2 空元素：一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>等等。我们称其为空元素。
注：<br>元素放到<p>元素之中——这被称作嵌套！
4.3 元素的属性：元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">一个属性必须包含如下内容：
1）一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2）属性名称，后面跟着一个 = 号。
3）一个属性值，由一对引号 "" 引起来。
5.标题（Heading）
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>。
- 因为搜索引擎使用标题为您的网页的结构和内容编制索引
- 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
6. 文本格式
HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。这些HTML标签被称为格式化标签。
- <b> 定义粗体文本
- <em> 定义着重文字
- <i> 定义斜体字
- <small> 定义小号字
- <strong> 定义加重语气
- <sub> 定义下标字
- <sup> 定义上标字
- <ins> 定义插入字
- <del> 定义删除字
7. 超链接
超链接语法：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明：
1）href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)
2）target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3）超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
7.1 锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
eg：<!-- 文档其余部分 -->
<h2 id=“C4”>第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a> href=“#C4”>跳到第四章</a>
<!-- 文档其余部分 -->
注意：
- 元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
- 超链接中的地址需要有#符号
8. 图片及文件路径
（1）在页面中插入一张图：
<img src=“https://mdbootstrap.com/img/logo/mdb192x192.jpg” alt=“MDB Logo” width=“200” height=“200”>
说明：
1）src属性为要显示图片文件的位置 URL，即图片文件的路径
2）alt属性当获取图片出现问题时显示的文字（占位符）
3）可为图片指定高宽度，但不建议（可能导致图片变形）
（2）文件路径
1）绝对路径：<img src=“https://mdbootstrap.com/img/logo/mdb192x192.jpg” alt=“MDB Logo” width=“200” height=“200”>
2）相对路径：
9. 表格 Table
有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可：
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
10. 列表 List
我们也可以使用列表来呈现内容，分为无序列表和有序列表。
（1）无序列表
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
例如：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li></ul>
(2)与序列表
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
例如：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
11. 表单 Form
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
<input>:输入框。输入类型由type定义。
1）文本域（Text Fields）
文本域通过 <input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。 注意： 表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
2）密码字段
密码字段通过标签 <input type=“password”> 来定义, 注意： 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
3）单选按钮（Radio Buttons）
<input type=“radio”> 标签定义了表单的单选框选项。
4）复选框（Checkboxes）
<input type=“checkbox”> 定义了复选框。复选框可以选取一个或多个选项。
5）提交按钮(Submit)
<input type=“submit”>定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理。
12. 其他
HTML 的元素可以以称为区块 Division 或 内联 Inline 的方式进行显示。
12.1 区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
12.2 内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
12.3 预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。
12.4 特殊字符
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
原因是：在 HTML 中，某些字符是预留的。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
二、CSS总结
1. 何为CSS
1）CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
2）样式定义如何显示 HTML 元素
3）把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
4）外部样式表通常存储在 CSS 文件中
2.CSS语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：
- 选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
- 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用
{}包裹，且声明用;分割） - 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
选择器：一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。
1）元素选择器：基本语法：元素名称{属性：值；}
例如： div
{
color: red;
}
2）id选择器：
#sky
{
color: blue;
}
这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。
3）类选择器：class选择器前面有.号
.center
{
text-align:center;
}
- 提示： 元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。
3. CSS如何生效
我们一般有三种方法：外部样式表，内部样式表，内联样式
3.1 外部样式表
引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。
新建如下内容的一个 HTML文件（后缀为.html)；
在同一目录新建一个样式表文件mycss.css（注意后缀名为css）
3.2 内部样式表
我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
提示： 一般而言，只有页面的样式规则较少时可采用这种方式。
3.3 级联的优先级
这就涉及样式的优先级问题，从高到低分别是：
1）内联样式
2）内部样式表或外部样式表
3）浏览器缺省样式
提示： 其实，一句话可总结为哪个样式定义离元素的距离近，哪个就生效。
4. 颜色，尺寸，对齐
4.1 颜色:关键字#
1）十六进制颜色#
h1 {
color: #b71540;
}
颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。
十六进制表示法（通常缩写为十六进制）是 RGB 的速记语法，十六进制范围为 0-9 和 A-F。当以六位数序列使用时，它们被转换为RGB数值范围，该范围为0-255，分别对应于红色，绿色和蓝色通道。
2）RGB颜色（红色，绿色，蓝色）#
h1 {
color: rgb(183, 21, 64);
}
RGB 颜色使用 rgb（） 颜色函数定义，使用数字或百分比作为参数。这些数字需要在 0-255 范围内，百分比介于 0% 和 100% 之间。RGB在0-255刻度上工作，因此255将相当于100%，0到0%。
3）HSL（色相，饱和度，亮度）#
h1 {
color: hsl(344, 79%, 40%);
}
HSL 代表色调、饱和度和亮度。色相描述色轮上的值，从 0 到 360 度，从红色开始（同时为 0 和 360）。色调为 180 或 50% 将在蓝色范围内。这就是我们看到的颜色的起源。
饱和度是所选色调的鲜艳程度。完全不饱和的颜色（饱和度为 ）将显示为灰度。最后，亮度是描述添加光从白色到黑色的比例的参数。
4.2 CSS尺寸
- height 设置元素的高度
- max-height 设置元素的最大高度
- max-width 设置元素的最大宽度
- min-height 设置元素的最小高度
- min-width 设置元素的最小宽度
- width 设置元素的宽度
4.3 对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐)。
5.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
说明：
- Content 盒子的内容，如文本、图片等
- Padding 填充，也叫内边距，即内容和边框之间的区域
- Border 边框，默认不显示
- Margin 外边距，边框以外与其它元素的区域
注意：一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
6. 边框与边距
无论边框、内边距还是外边距，它们都有上下左右四个方向。
6.1 边框
.example-1 {
border: 1px dotted black; /∗ 上下左右都相同 ∗/
}
.example-2 {
border-bottom: 1px solid blue; /∗ 只设置底部边框∗/
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /∗ 边框圆角 ∗/
}
.example-4 {
border-left: 5px solid purple;
}
6.2 边距
padding: 20px; /∗ 上下左右都相同 ∗/
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /∗ 简写形式，按上，右，下，左顺序设置 ∗/
padding: 25px 10px; /*∗简写形式，上下为25px，左右为10px ∗/
7.定位
position属性用于对元素进行定位。该属性有以下一些值：
- static 静态
- relative 相对
- fixed 固定
- absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
1）static
设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
2）reletive
设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
3）fixed
设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口
4）absolute
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。
8. 溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
- visible 默认值，溢出部分不被裁剪，在区域外面显示
- hidden 裁剪溢出部分且不可见
- scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
- auto 裁剪溢出部分，视情况提供滚动条
9. 浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局，
float 属性的常用值包括:
- left 靠左浮动
- right 靠右浮动
- none 不浮动
clear属性用于指定一个元素的左侧或右侧是否允许出现浮动元素，可能的取值如下：
- left 左侧不允许出现浮动元素
- right 右侧不允许出现浮动元素
- both 左侧和右侧不允许出现浮动元素
- none 默认值，允许左侧和右侧出现浮动元素
10. 不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
11. 组合选择器
11.1 后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
11.2 子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。
12 .伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 离开必须填写的输入框时出现红色的外框进行警示
- 保证段落的第一行加粗，其它正常
使用伪类/伪元素的语法如下：
/∗选择器后使用 : 号，再跟上某个伪类∗/
selector:pseudo-class/pseudo-element {
property:value;
}
/∗选择器后使用 :: 号，再跟上某个伪元素∗/
selector::pseudo-element {
property:value;
}
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
