html+css总结

标题

段落

水平线标记

---

---

1.align 水平线对齐 2.size 大小 3.color 颜色 4.width 宽度

图片

1.src 路径
超链接

1 .href 目标
2. target 方式
<换行>

文本标记

1.color 文字颜色
2.size 文字大小
3.face 文字字体

文本格式化
1. 文字粗体
2. 文字斜体
3. 文字加删除线
4. 文字加下画线

图像标记

1.ait 替换文本
2.width height 宽高
3.border 边框
4. align 对齐
5.title 鼠标悬停内容

列表
有序

1.type有disc cirle square 3种属性值
无序

1.type有1 a i（1 A I) 3种属性

伪类
link 没访问时状态
visited 访问后状态
hover 鼠标经过和悬停状态
active 鼠标点不动时状态

表格

1. 边框 宽度 高度 对齐 颜色 图像
   2.cellspacing 单元格和单元格距离
   3.cellpadding 单元内容和单元边框距离

单元格 1. 边框 宽度 高度 对齐 颜色 图像 2.colspan 跨列 3.rowspan 跨行 表头 创建表单 1.action url地址 2.method 提交方式 3.name 表单名称

</ input>控件
（type）
1.text 单行文本框
2.password 密码框
3.radio 单选框
4.checkox 复选框
5.button 普通
6.submit 提交

placeholder（文本值）

控件（创建多行文本）
1.cols 每行的字符数
2.rows 显示的行数

控件（下拉菜单）
属性
1.size 下拉可见数
2.multiple=multiple 可以多选
1.

float浮动

左右方向和none 不浮动
相对定位relative（相对原来位置 原来位置还在）
绝对定位adsolute（父元素的定位）
固定定位（页面怎么滚动不变）

引入css样式
1.行内式 （标签中style=）
2.内嵌式 (
3.链入式（<link href=“路径”type=“text/css”rel=“stylesheet“/>

选择器
1.标签选择器（标签名{ }）
2.类选择器（ .类名）
3.id选择器（#id名）
4.并集选择器用逗号连接

文本样式
font-**（文本字号的样式）
1.size 大小
2.family 字体
3. weight 粗细
4.variant 变体（对英文才有用）
5.style 风格

文本外观属性
1.color 颜色
2.letter-spacing 字间距
3.line-height 行间距
4.word-spacing 单词间距
5.text-align 水平对齐方式
6.text-decoration文本装饰

盒子模型

1. border 边框
   2.padding 内边距
   3.margin 外边距
   4.background 背景
   a.background-color 颜色
   b.background-image；url（路径）
   no-repeat不平铺
   background-position 背景图片位置
   方向和像素
   background-attachmene背景图片固定
   。scroll 滚动
   。不滚+动

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计 ，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
3. 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的 KaTeX数学公式 语法；
5. 增加了支持甘特图的mermaid语法¹ 功能；
6. 增加了 多屏幕编辑 Markdown文章功能；
7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“