HTML&CSS总结
一、HTML总结
-
何为HTML？
HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 -
文档剖析
1.<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
2.<html></html<:这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
3.<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>: 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。 - 超链接
超链接语法：
<a href=“https://www.baidu.com/” target=“_blank”>百度一下
说明：
- href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)
- target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
- 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
- 图片及其路径
<img src=“https://mdbootstrap.com/img/logo/mdb192x192.jpg” alt=“MDB Logo” width=“200” height=“200”>
说明：
- src属性为要显示图片文件的位置 URL，即图片文件的路径
- alt属性当获取图片出现问题时显示的文字（占位符）
- 可为图片指定高宽度，但不建议（可能导致图片变形）
路径示例：
-
表格
表格使用<table>标签，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示） -
列表List
1.无序列表
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
2.有序列表
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
二、CSS总结
1.何为css？ CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。 网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
2.css语法 
选择器一般分为id和class选择器，class选择器使用非常普遍。
3.颜色、尺寸、对齐
- 颜色：颜色采用RGB16进制值，来设定前景或背景的颜色
- 尺寸：我们可以用 height 和 width设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等
- 对齐：对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐）
4.盒子
盒子有内外边距，其中padding表示填充（内边距），margin表示外边距，border表示边框，默认不显示，content表示盒子里的内容，例如文字、图片等。
对于边框border，可以设置border-radius圆角等属性，使其看着更美观。
5.定位
position属性用于对元素进行定位。该属性有以下一些值：
- static 静态
- relative 相对
- fixed 固定
- absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
6.溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
- visible 默认值，溢出部分不被裁剪，在区域外面显示
- hidden 裁剪溢出部分且不可见
- scroll裁剪溢出部分，但提供上下和左右滚动条供显示
- auto 裁剪溢出部分，视情况提供滚动条
7.浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
8.不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。
9.伪类和伪元素
伪类或伪元素用于定义元素的某种特定的状态或位置等。比如我们可能有这样的需求：
- 鼠标移到某元素上变换背景颜色
- 超链接访问前后访问后样式不同
- 离开必须填写的输入框时出现红色的外框进行警示
- 保证段落的第一行加粗，其它正常
- …
伪类/伪元素一般使用：
以上就是常见的css用法总结。