Markdown、html学习笔记

[toc]

因为本站不支持html格式，文中的html部分效果看不到，只有代码

 <h1 style="text-align:center;color:blue">Markdown on Typora & Html & css</h1>

Markdown知识点

标题

一个#号、空格、标题内容表示是一级标题
两个#号表示是2级标题。共6级标题
快捷键 ctr+数字键1-6
对应HTML中是h1--h6标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>

列表

  1. 有序列表
  2. 无序列表
  1. 有序列表：1. 列表项。---1、点、空格、内容。对应的是ol标签。
  2. 无序列表：- 列表项。- 、空格、内容。对应的是ul标签。
  3. 有序列表的序号在css中设定，ol{list-style: upper alpha/lower alpha}，可以是数字、大、小写字母等等
  4. 无序列表之前的符号有三种，有实心圆点、空心圆点、实心方框。ul{list-style:disc/circle/square}
<ul style="list-style-type:circle ">       
    <li>水果</li>
    <li>蔬菜</li>
</ul>
<ol style="list-style-type:upper-alpha ">  
    <li>水果</li>
    <li>蔬菜</li>
</ol>
所有的列表清单属性：
属性 Description描述
list-style 在一个声明中设置列表的所有属性
list-style-image 指定图像作为列表项标记
list-style-position 指定列表项标记的位置（项目符号）
list-style-type 指定列表项标记的类型
无序列表的属性值：style="list-style-type:circle"
属性值 描述
disc Sets the list item marker to a bullet (default)实心圆
circle Sets the list item marker to a circle 空心圆
square Sets the list item marker to a square 实心方框
none The list items will not be marked 无
有序列表的属性值：style="list-style-type:lower-alpha"
Value Description描述
decimal The marker is a number(1,2,3,etc.)
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek,小写希腊字母
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek The marker is upper-greek
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
列表示例

​ 蔬菜

  • 白菜
    • 大白菜
      • 河南白
      • 上海青
    • 小白菜
  1. 茄子
    1. 长的
      1. 红
      2. 绿
    2. 圆的

引用

<blockquote>
    Markdown中引用的固定格式：大于号后跟空格跟引用内容。【> 引用内容】
    Markdown在主题文件中用css做了声明，如果是在Html中应该在样式表中声明或者在行内样式中设定。
</blockquote>
段落引用示例：

武汉样本样品采集时间局限于 2019 年 12 月 24 日和 2020 年 1 月 5 日。而那个时候，当地对于疫情的排查集中在了华南海鲜市场，而样本来自几家定点医院，换句话说，样本取样地不具备统计学上的无偏性，这导致最终的数据分析也必然受到了影响
武汉样本样品采集时间局限于 2019 年 12 月 24 日和 2020 年 1 月 5 日。而那个时候，当地对于疫情的排查集中在了华南海鲜市场，而样本来自几家定点医院，换句话说，样本取样地不具备统计学上的无偏性，这导致最终的数据分析也必然受到了影响

事实上，我们根据广东和美国的病例，可以推测出，武汉本地存在更古老的单倍型H13 和 H38。因此，要想完整的溯源，事实上对武汉后续发病例进行更广泛的基因组检测，这样才能更好地确定真正的源头。

行内引用

<q>原本没有路，走的人多了便成了路</q>
在Markdown中也是这样实现。用一对q标签
行内引用示例：

<q>原本没有路，走的人多了便成了路</q>

文字格式

加粗文字
斜体文字
斜体加粗
删除线文字

Markdown中：
    *斜体文字*
    **加粗文字**
    ***斜体加粗文字***
    ~~删除线文字~~
Html中：
    <b>加粗文本</b>
    <i>斜体文本</i>
    <del>删除线文本</del>
    <b><i>斜体加加粗文本</i></b>

分割线

Markdown:
    ---- 连续四给半角的-
Html：
    <hr>

超链接

Markdown:
    [超链接显示名](超链接地址 "超链接title")-
Html：
    <a href="超链接地址" title="超链接title">超链接显示名</a>

插入图片

Markdown:
    ![图片alt](图片链接 "图片title")    ---[图片alt]以及"图片title"可以省略
    ![](url)
    不能改变图片大小，除非从主题文件的css中统一修改，对齐方式等也是css中事先声明了的。
Html：
    <img src="图片链接" alt="图片alt" title="图片title">    --alt="图片alt" title="图片title"可以省略
    <img style="height:200px" src="url" >
    用行内样式即可修改图片大小、位置等。所以在Markdown中插入图片建议用html的img标签，简单易用。

[图片上传失败...(image-2f6076-1583165066743)]

<img style="height:200px" src="https://b104.photo.store.qq.com/psb?/a19204e6-ed66-4f66-8c59-5c1fae920bb2/Thj**IlGIcDrbgJ3P7fMC4iIfUvNna6CWkH7ziQegvg!/b/dLzpCj5WfQAA&bo=WAJYAgAAAAABByA!&rf=viewer_4&t=5" >

表格

Markdown:
    | 左对齐 | 右对齐 | 居中对齐 |
    | :-----| ----: | :----: |
    | 单元格 | 单元格 | 单元格 |
    | 单元格 | 单元格 | 单元格 |
Html：
<table>
    <tr>
        <th>名称</th>
        <th>规格</th>
        <th>数量</th>
    </tr>
    <tr>
        <td>白菜</td>
        <td>1公斤/捆</td>
        <td>30</td>
    </tr>
    <tr>
        <td>西红柿</td>
        <td>公斤</td>
        <td>50</td>
    </tr>
</table>
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格 
    <tr>
        <th>名称</th>
        <th>规格</th>
        <th>数量</th>
    </tr>
    <tr>
        <td>白菜</td>
        <td>1公斤/捆</td>
        <td>30</td>
    </tr>
    <tr>
        <td>西红柿</td>
        <td>公斤</td>
        <td>50</td>
    </tr>
</table>
单元格合并
  1. Markdown不可以
  2. Html可以实现
    1. colspan 列合并，后面的数字表示合并的列数
    2. rowspan 行合并，后面的数字表示合并的行数
<table>
    <tr>
        <th>名称</th>
        <th>规格</th>
        <th>备注</th>
    </tr>
    <tr>
        <td style="border:1px solid red">钻头</td>
        <td style="border:1px solid red; text-align:left" rowspan=2>D8*17FL-80L<sub>0</sub></td>
        <td style="border:1px solid red">无货、已订货在途</td>
    </tr>
    <tr>
        <td style="border:1px solid red">阶梯钻</td>
        <td style="border:1px solid red">不详细</td>
    </tr>
    <tr>
        <td style="border:1px solid red">非标镗刀</td>
        <td style="border:1px solid red" colspan=2>不详细</td>
    </tr>
</table>

上下标

Markdown:
    ^上标文字^
    ~下标文字~
Html：
    <sub>下标文字</sub>
    <sup>上标文字</sup>

我 上标文字 下标文字

我下标文字

我上标下标

公式

行内公式：
    $A=X^2+Y^3$
    $s=\pi*r^2$
公式块：快捷键 ctrl+shift+m
    c(u)=\begin{cases} \sqrt\frac{1}{N}，u=0\\ \sqrt\frac{2}{N}， u\neq0\end{cases}

A=X^2+Y^3
c(u)=\begin{cases} \sqrt\frac{1}{N}，u=0\\ \sqrt\frac{2}{N}， u\neq0\end{cases}
s=\pi*r^2

分式表达
算式 Markdown
1/2 1/2
\frac{1}{2} \frac{1}{2}
省略号表达
省略号 Markdown
\cdots \cdots
开根号表达
算式 Markdown
\sqrt{2} \sqrt{2}
矢量表达
算式 Markdown
\vec{a} \vec{a}
积分表达
算式 Markdown
\int{x}dx \int{x}dx
\int_{1}^{2}{x}dx \int_{1}^{2}{x}dx
极限表达
算式 Markdown
\lim{a+b} \lim{a+b}
\lim_{n\rightarrow+\infty} \lim_{n\rightarrow+\infty}
累加表达
算式 Markdown
\sum{a} \sum{a}
\sum_{n=1}^{100}{a_n} \sum_{n=1}^{100}{a_n}
累乘表达
算式 Markdown
\prod{x} \prod{x}
\prod_{n=1}^{99}{x_n} \prod_{n=1}^{99}{x_n}
希腊字母表达
大写 Markdown 小写 Markdown
A A \alpha \alpha
B B \beta \beta
\Gamma \Gamma \gamma \gamma
\Delta \Delta \delta \delta
E E \epsilon \epsilon
\varepsilon \varepsilon
Z Z \zeta \zeta
H H \eta \eta
\Theta \Theta \theta \theta
I I \iota \iota
KKK K \kappa \kappa
\Lambda \Lambda \lambda \lambda
M M \mu \mu
N N \nu \nu
Xi \Xi \xi \xi
O O \omicron \omicron
\Pi \Pi \pi \pi
P P \rho \rho
\Sigma \Sigma \sigma \sigma
T T \tau \tau
\Upsilon \Upsilon \upsilon \upsilon
\Phi \Phi \phi \phi
\varphi \varphi
X X \chi \chi
\Psi \Psi \psi \psi
\Omega \Omega \omega \omega
三角函数表达
三角函数 Markdown
\sin \sin
对数函数表达
算式 Markdown
\ln2 \ln2
log_28 \log_28
\lg10 \lg10
关系运算符表达
运算符 Markdown
\pm \pm
\times \times
\cdot \cdot
\div \div
\neq \neq
\equiv \equiv
\leq \leq
\geq \geq
其它特殊字符表达
符号 Markdown
\forall \forall
\infty \infty
\emptyset \emptyset
\exists \exists
\nabla \nabla
\bot \bot
\angle \angle
\because \because
\therefore \therefore
空格表达

a \quad b

a \quad b

HTML、CSS知识点

Html元素标签列表

css主要属性：

font 字体属性：

可以同时设定多个属性

  1. font-style:字体样式(noemal、italic、oblique、inherit)如果标准样式nomal可以省略。
  2. font-weight:字体粗细(normal、bold、bolder、lighter、100～900数字设定)
  3. font-size:字体大小(数字+单位。单位有：pt、px、pc、em)
  4. font-family:字体系列(华文仿宋、华文中宋、华文楷体、华文行楷、微软雅黑、等线、等线light)
<p style="font: italic 100 1.5em 华文行楷;background-color:#bcd68d;line-height:6mm;padding-left:2em;text-indent: 1em;text-align:justify;color:#0078d7;border:5px solid red;">跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。
</p>
text属性

文字属性

Property Description
color 设置文字颜色
direction 指定文字方向/书写方向
letter-spacing 设置字符间距
line-height 设置行高
text-align 文字的水平对齐方式
text-decoration 指定添加到文本的修饰
text-indent 首行文字的缩进
text-shadow 文本的阴影效果
text-transform 控制文本大写
text-overflow 指定应如何向用户发送未显示的溢出内容信号
unicode-bidi 与[direction]属性一起使用，可设置或返回是否应重写文本以支持同一文档中的多种语言
vertical-align 垂直对齐方式
white-space 指定如何处理元素内的空白
word-spacing 设置单词间距
color颜色属性：

  1. 字体颜色 color

  2. 背景颜色 backgroun-color

  3. 边框颜色 在border属性中设定：style="border:1px solid red "

多种表达

  1. 名称：【red、yellow、blue、gray】
  2. 16进制颜色值【#00FF00，相当于#rrggbb】
  3. rgb【rgb(255,255,255)】
  4. rgba【rgba(255,0,0,0.5)比rgb多了一位数表示透明度】
text-align文本水平对齐属性：

适用于块容器内。

  1. left 【默认居左】
  2. center 【居中】
  3. right 【居右】
  4. justify 【两端对齐】
  5. inherit 【继承父元素】
vertical-align元素垂直对齐 :

设置内容在元素框中的垂直对齐方式

属性值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
line-height行高属性：

这样其实实现了行间距的设定

属性值 描述
normal 默认。一般为字体高度的1.2
数值 缩放比例。该数字与当前字体高度相乘
长度 固定线高，以px，pt，cm等为单位，可为负数。
% 以当前字体大小的百分比表示
inherit 继承父级元素 
<h6 style="text-align:center;color:blue">行高属性比较</h6>
<h6>line-height:normal</h6>
<p style="line-height: noemal;border:1px solid">行高设定为：normal。为默认的设定值，大约为字体高度的1.2倍</p>
<h6>line-height:1.3</h6>
<p style="line-height: 1.3;border:1px solid">行高设定为：缩放因子1.3。行高的大小为比例值乘以字体高度值</p>
<h6>line-height:2cm</h6>
<p style="line-height: 2cm;border:1px solid">行高设定为：长度值 2cm。用一个绝对值设定了行高</p>
<h6>line-height:80%</h6>
<p style="line-height: 80%;border:1px solid">行高设定为：百分比80%。当前的行高为字体高度的80%</p>
letter-spacing/word-spacing字符/单词间距：

设定属性值可以改变字符间距。

另外一个属性WORD-SPACING与此类似，是设定单词之间的间距，这对于英文来说很好理解，letter-spacing设定的是每个字母之间的间距，word-spacing设置的是单词之间的间距。那么对于汉字？每个汉字之间的间距是用letter-spacing来设定的。如果汉字之间出现了空格，那么就将空格两边当作是两个单词了，word-spacing设定的就是这个空格的大小。

Value Description
normal No extra space between characters. This is default
length 指定字符之间多余的空格。允许使用负值。
inherit 继承父级元素的值 
<div style="background-color:#f2f1f1">
    <p style="letter-spacing:normal">This is a Paragraph 1，normal</p>
    <p style="letter-spacing:15px">This is a Paragraph 1,15px</p>
    <p style="letter-spacing:5px">This is a Paragraph 1,5px</p>
    <p style="letter-spacing:-1px">This is a Paragraph 1,-1px</p>
    <p style="letter-spacing:15px">这是一个中文汉字的段落，一个汉字为一个字符。设定的是两个汉字之间的间距,15px</p>
</div>
```###### text-indent首行缩进

text-indent属性指定文本块中第一行的缩进。 注意：允许使用负值。如果值为负，第一行将向左缩进

```html
<p style="text-indent:2em;background-color:#def7f7;width:300px;margin-right:3em;float:right">
   text-indent属性指定文本块中第一行的缩进。 注意：允许使用负值。如果值为负，第一行将向左缩进.本段缩进2em。正值的效果是向右缩进。
</p>
<p style="text-indent:-2em;background-color:#def7f7;width:300px;margin-left:3em;folat:left">
   text-indent属性指定文本块中第一行的缩进。 注意：允许使用负值。如果值为负，第一行将向左缩进.本段缩进-2em,负值的效果是向左缩进了。 
</p>
```###### direction文字方向属性

将文本方向设置为“从右到左”

| Value   | Description                                     |
| :------ | :---------------------------------------------- |
| ltr     | left-to-right. This is default                  |
| rtl     | right-to-left                                   |
| inherit | Inherits this property from its parent element. |

```html
<div style="background-color:#f1f1f1">
<h4 style="text-align:center;color:red">direction属性说明</h4>
<p>这个段落是默认的，文字是从左到右的方向。</p>
<p style="direction:rtl">这个段落设置了direction:rtl，文字是从右到左的。</p>
</div>
```###### text-decoration添加文本修饰线

- text-decoration-line (必须的)设置要使用的文字修饰类型
  - underline
  - overline
  - line-through
- text-decoration-color
- text-decoration-style
  - solid 实线
  - double 双实线
  - dotted 点划线
  - dashed 虚线
  - wavy 波浪线

```html
<h4 style="text-align:center;color:red">text-decoration添加文本修饰线</h4>
<p style="text-decoration-line:underline">看这个段落的效果，这里设置如：text-decoration-line:underline</p>
<p style="text-decoration-line:underline line-through;text-decoration-color:blue;text-decoration-style:wavy;">看这个段落的效果，这里设置如：text-decoration-line:underline line-through;text-decoration-color:blue;text-decoration-style:wavy</p>
```###### text-shadow添加阴影

| Value         | Description                                                  |
| :------------ | :----------------------------------------------------------- |
| *h-shadow*    | Required. The position of the horizontal shadow. Negative values are allowed |
| *v-shadow*    | Required. The position of the vertical shadow. Negative values are allowed |
| *blur-radius* | Optional. The blur radius. Default value is 0                |
| *color*       | Optional. The color of the shadow. Look at for a complete list of possible color values |

```html
<h1 style="text-shadow:5px 5px 5px #ff0000">Text-shadow with blur effect</h1>
text-transform改变大写

text-transform属性控制文本的大小写。

Value Description
none 没有大写。文本按原样呈现。这是默认值
capitalize 将每个单词的第一个字符转换为大写
uppercase 将所有字符转换为大写
lowercase 将所有字符转换为小写 
<div style="background-color:#f1f1f1">
<h4 style="text-align:center;color:red">text-transform控制文本的大小写</h4>
<p style="text-transform:capitalize">看这个段落的效果，这里设置如：text-transform:capitalize</p>
<p style="text-transform:uppercase">看这个段落的效果，这里设置如:text-transform:uppercase</p>
</div>
```###### white-space空白处理

空白属性指定如何处理元素内部的空白

| Value    | Description                                            |
| :------- | :----------------------------------------------------- |
| normal   | 空格序列将折叠为单个空格。必要时将自动换行。这是默认值 |
| nowrap   | 文本永远不会换行，直到遇到\<br/>标记                   |
| pre      | 空白保留。文本只会换行。行为类似于HTML中的\<pre>标签   |
| pre-line | 合并空白，保留换行符                                   |
| pre-wrap | 保留空白，可正常换行。                                 |

```html
<div style="background-color:#b2b2d0;width:200px;margin-left:15%">
<h4 style="text-align:center;color:red">white space设置比较。冒号后面有8个空格</h4>
<p style="white-space:pre;">这里设置为：        white-space:pre</p>
<p style="white-space:nowrap;">这里设置为：        white-space:nowrap</p>
<p style="white-space:pre-wrap;">这里设置为：        white-space:pre-wrap</p>
<p style="white-space:pre-line;">这里设置为：        white-space:pre-line</p>
</div>
background背景属性

CSS背景属性用于定义元素的背景效果

  • background-color 背景颜色 默认定位在left-top开始
  • background-image 图片背景
    • background-image:url()
  • background-repeat 默认图片水平、垂直平铺，可以通过此属性定义重复特点
    • background-repeat: none
    • background-repeat: repeat-x 水平平铺
    • background-repeat: repeat-y 垂直平铺
    • background-repeat: no-repeat 不重复
  • background-attachment 背景图片在no-repeat下设置图片是固定的还是滚动的
    • background-attachment: fixed 固定
    • background-attachment: scroll 滚动
  • background-position
    • left-top
    • right-top
    • left-bottom
    • right-bottom
    • center
<h4 style="text-align:center;color:red">background-image:url()</h4>
<p style="background-image:url(https://m.qpic.cn/psc?/7aca91a4-be15-44d8-a32a-80d8889718b7/uBYLWP1rBn1tc1x0uHNIVY37XuL3Vx9TNAYelRt6BHX5XFzNpu5WIrYTcjHbl*V8RN3qvwiLwQ6Kfl0XsliULnc3o8Njt5izm5Tncwhex9E!/b&bo=jABxAAAAAAADB98!&rf=viewer_4&t=5);width:80%;margin-left:10%;">
若要人不知，除非己莫为。为人不做亏心事，半夜敲门心不惊。贼是小人，智过君子。君子固穷，小人穷斯溢矣。富贵多忧，贫穷自在。不以我为德，反以我为仇。宁可直中取，不可曲中求。人无远虑，必有近忧。知我者谓我心忧，不知我者谓我何求？晴天不肯去，直待雨淋头。成事莫说，覆水难收。是非只为多开口，烦恼皆因强出头。忍得一时之气，免得百日之忧。近来学得乌龟法，得缩头时且缩头。惧法朝朝乐，欺公日日忧。人生一世，草长一春。黑发不知勤学早，转眼便是白头翁。月过十五光明少，人到中年万事休。儿孙自有儿孙福，莫为儿孙做马牛。人生不满百，常怀千岁忧。今朝有酒今朝醉，明日愁来明日忧。路逢险处须回避，事到临头不自由。人贫不语，水平不流。一家养女百家求，一马不行百马忧。有花方酌酒，无月不登楼。三杯通大道，一醉解千愁。深山毕竟藏猛虎，大海终须纳细流。惜花须检点，爱月不梳头。大抵选她肌骨好，不搽红粉也风流。
</p>
<h4 style="text-align:center;color:red">background-image:url();background-repeat: repeat-x</h4>
<p style="background-image:url(https://m.qpic.cn/psc?/7aca91a4-be15-44d8-a32a-80d8889718b7/uBYLWP1rBn1tc1x0uHNIVY37XuL3Vx9TNAYelRt6BHX5XFzNpu5WIrYTcjHbl*V8RN3qvwiLwQ6Kfl0XsliULnc3o8Njt5izm5Tncwhex9E!/b&bo=jABxAAAAAAADB98!&rf=viewer_4&t=5);width:80%;margin-left:10%;background-repeat: repeat-x">
若要人不知，除非己莫为。为人不做亏心事，半夜敲门心不惊。贼是小人，智过君子。君子固穷，小人穷斯溢矣。富贵多忧，贫穷自在。不以我为德，反以我为仇。宁可直中取，不可曲中求。人无远虑，必有近忧。知我者谓我心忧，不知我者谓我何求？晴天不肯去，直待雨淋头。成事莫说，覆水难收。是非只为多开口，烦恼皆因强出头。忍得一时之气，免得百日之忧。近来学得乌龟法，得缩头时且缩头。惧法朝朝乐，欺公日日忧。人生一世，草长一春。黑发不知勤学早，转眼便是白头翁。月过十五光明少，人到中年万事休。儿孙自有儿孙福，莫为儿孙做马牛。人生不满百，常怀千岁忧。今朝有酒今朝醉，明日愁来明日忧。路逢险处须回避，事到临头不自由。人贫不语，水平不流。一家养女百家求，一马不行百马忧。有花方酌酒，无月不登楼。三杯通大道，一醉解千愁。深山毕竟藏猛虎，大海终须纳细流。惜花须检点，爱月不梳头。大抵选她肌骨好，不搽红粉也风流。
</p>
<h4 style="text-align:center;color:red">background-image:url();background-repeat: repeat-y</h4>
<p style="background-image:url(https://m.qpic.cn/psc?/7aca91a4-be15-44d8-a32a-80d8889718b7/uBYLWP1rBn1tc1x0uHNIVY37XuL3Vx9TNAYelRt6BHX5XFzNpu5WIrYTcjHbl*V8RN3qvwiLwQ6Kfl0XsliULnc3o8Njt5izm5Tncwhex9E!/b&bo=jABxAAAAAAADB98!&rf=viewer_4&t=5);width:80%;margin-left:10%;background-repeat: repeat-y">
若要人不知，除非己莫为。为人不做亏心事，半夜敲门心不惊。贼是小人，智过君子。君子固穷，小人穷斯溢矣。富贵多忧，贫穷自在。不以我为德，反以我为仇。宁可直中取，不可曲中求。人无远虑，必有近忧。知我者谓我心忧，不知我者谓我何求？晴天不肯去，直待雨淋头。成事莫说，覆水难收。是非只为多开口，烦恼皆因强出头。忍得一时之气，免得百日之忧。近来学得乌龟法，得缩头时且缩头。惧法朝朝乐，欺公日日忧。人生一世，草长一春。黑发不知勤学早，转眼便是白头翁。月过十五光明少，人到中年万事休。儿孙自有儿孙福，莫为儿孙做马牛。人生不满百，常怀千岁忧。今朝有酒今朝醉，明日愁来明日忧。路逢险处须回避，事到临头不自由。人贫不语，水平不流。一家养女百家求，一马不行百马忧。有花方酌酒，无月不登楼。三杯通大道，一醉解千愁。深山毕竟藏猛虎，大海终须纳细流。惜花须检点，爱月不梳头。大抵选她肌骨好，不搽红粉也风流。
</p>
<h4 style="text-align:center;color:red">background-image:url();background-repeat: no-repeat</h4>
<p style="background-image:url(https://m.qpic.cn/psc?/7aca91a4-be15-44d8-a32a-80d8889718b7/uBYLWP1rBn1tc1x0uHNIVY37XuL3Vx9TNAYelRt6BHX5XFzNpu5WIrYTcjHbl*V8RN3qvwiLwQ6Kfl0XsliULnc3o8Njt5izm5Tncwhex9E!/b&bo=jABxAAAAAAADB98!&rf=viewer_4&t=5);width:80%;margin-left:10%;background-repeat: no-repeat;">
若要人不知，除非己莫为。为人不做亏心事，半夜敲门心不惊。贼是小人，智过君子。君子固穷，小人穷斯溢矣。富贵多忧，贫穷自在。不以我为德，反以我为仇。宁可直中取，不可曲中求。人无远虑，必有近忧。知我者谓我心忧，不知我者谓我何求？晴天不肯去，直待雨淋头。成事莫说，覆水难收。是非只为多开口，烦恼皆因强出头。忍得一时之气，免得百日之忧。近来学得乌龟法，得缩头时且缩头。惧法朝朝乐，欺公日日忧。人生一世，草长一春。黑发不知勤学早，转眼便是白头翁。月过十五光明少，人到中年万事休。儿孙自有儿孙福，莫为儿孙做马牛。人生不满百，常怀千岁忧。今朝有酒今朝醉，明日愁来明日忧。路逢险处须回避，事到临头不自由。人贫不语，水平不流。一家养女百家求，一马不行百马忧。有花方酌酒，无月不登楼。三杯通大道，一醉解千愁。深山毕竟藏猛虎，大海终须纳细流。惜花须检点，爱月不梳头。大抵选她肌骨好，不搽红粉也风流。
</p>
<h4 style="text-align:center;color:red">background-image:url();background-repeat: no-repeat;background-position:center;</h4>
<p style="background-image:url(https://m.qpic.cn/psc?/7aca91a4-be15-44d8-a32a-80d8889718b7/uBYLWP1rBn1tc1x0uHNIVY37XuL3Vx9TNAYelRt6BHX5XFzNpu5WIrYTcjHbl*V8RN3qvwiLwQ6Kfl0XsliULnc3o8Njt5izm5Tncwhex9E!/b&bo=jABxAAAAAAADB98!&rf=viewer_4&t=5);width:80%;margin-left:10%;background-repeat: no-repeat;background-position:center;background-attachment: scroll;">
若要人不知，除非己莫为。为人不做亏心事，半夜敲门心不惊。贼是小人，智过君子。君子固穷，小人穷斯溢矣。富贵多忧，贫穷自在。不以我为德，反以我为仇。宁可直中取，不可曲中求。人无远虑，必有近忧。知我者谓我心忧，不知我者谓我何求？晴天不肯去，直待雨淋头。成事莫说，覆水难收。是非只为多开口，烦恼皆因强出头。忍得一时之气，免得百日之忧。近来学得乌龟法，得缩头时且缩头。惧法朝朝乐，欺公日日忧。人生一世，草长一春。黑发不知勤学早，转眼便是白头翁。月过十五光明少，人到中年万事休。儿孙自有儿孙福，莫为儿孙做马牛。人生不满百，常怀千岁忧。今朝有酒今朝醉，明日愁来明日忧。路逢险处须回避，事到临头不自由。人贫不语，水平不流。一家养女百家求，一马不行百马忧。有花方酌酒，无月不登楼。三杯通大道，一醉解千愁。深山毕竟藏猛虎，大海终须纳细流。惜花须检点，爱月不梳头。大抵选她肌骨好，不搽红粉也风流。
</p>
```##### width/height宽、高属性：

对于块级元素来说就像个盒子，那么盒子的尺寸宽和高是可以设定的。没有设定时，盒子会根据内部存放内容的大小自动调整。如果设定了宽度，那么内容超过后会自动换行。如果设定高度后，宽度自动到最大或设定值都不能容纳内部内容则内容会溢出。

1. width (500px;50%)
2. height (300px;20%)

```html
<p style="font: normal 100 1.2em 等线light;background-color:#bcd68d;line-height:6mm;padding-left:2em;text-indent: 1em;text-align:justify;color:#0078d7;border:2px solid red;width:60%;margin-left:15%">跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。
</p>

<p style="font: normal 100 1.2em 等线light;background-color:#bcd68d;line-height:6mm;padding:15px;text-indent: 1em;text-align:justify;color:#0078d7;border:2px solid red;width:500px;height:100px;">跟着我来复习HTML相关知识,这将有助于我将来的学习工作中的文字编辑和排版。特别是我对文档的高要求准的人，甚至于在中方面有些强迫症。平常使用中多加练习，熟能生巧，相信假以时日必将熟练掌握。
</p>
border边框属性：

style="border: 2px solid blue"可以一次设定。如果四个边线不尽相同，则需要分别设置。border-left、border-right、border-top、border-bottom

border属性值

属性值 描述
border-width 边框的宽度,默认值为“midium”,用宽度值表示，如：5px
border-style 边框线的样式。默认为“none”。
dotted:虚线
dashed:点划线
solid:实线
double:双线
groove:3D沟槽边框。效果取决于边框颜色值
ridge:3D脊状边框。效果取决于边框颜色值
inset:3D嵌入边框。效果取决于边框颜色值
outset:3D起始边框。效果取决于边框颜色值
border-color 边框线的颜色。默认为文本的颜色 
<p style="width:50%;background-color:#def7f7;border-left:3px dotted #5f5f5f;border-top:3px dashed #5f5f5f;border-right:3px double #5f5f5f;border-bottom:15px groove #dd5044;">style="border: 2px solid blue"可以一次设定。如果四个边线不尽相同，则需要分别设置。border-left、border-right、border-top、border-bottom
</p>
```##### border-radius边框圆角属性：

可以一次指定四个角的圆角值，如果需要可以分别指定。

1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-left-radius
4. border-bottom-right-radius

| Value    | Description                                           |
| :------- | :---------------------------------------------------- |
| *length* | Defines the shape of the corners. Default value is 0. |
| *%*      | Defines the shape of the corners in %                 |
| initial  | Sets this property to its default value.              |
| inherit  | Inherits this property from its parent element.       |

```html
<p style="width:50%;background-color:#def7f7;border:1px solid #5f5f5f;border-radius:25px">
边框属性：border
style="border: 2px solid blue"可以一次设定。如果四个边线不尽相同，则需要分别设置。border-left、border-right、border-top、border-bottom
边框圆角属性：border-radius
可以一次指定四个角的圆角值，如果需要可以分别指定
</p>

<p style="width:50%;background-color:#def7f7;border:1px solid #5f5f5f;border-top-left-radius: 25px;border-bottom-right-radius: 25px">
边框属性：border
style="border: 2px solid blue"可以一次设定。如果四个边线不尽相同，则需要分别设置。border-left、border-right、border-top、border-bottom
边框圆角属性：border-radius
可以一次指定四个角的圆角值，如果需要可以分别指定
</p>
margin属性

margin属性设置元素的边距，并且是以下属性的简写属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

设置4个属性值

  • margin: 10px 5px 15px 20px;
    • top margin is 10px
    • right margin is 5px
    • bottom margin is 15px
    • left margin is 20px

设置3个属性值

  • margin: 10px 5px 15px;
    • top margin is 10px
    • right and left margins are 5px
    • bottom margin is 15px

设置2个属性值

  • margin: 10px 5px;
    • top and bottom margins are 10px
    • right and left margins are 5px

设置1个属性值

  • margin: 10px;
    • all four margins are 10px

Note: 允许使用负值

Value Description
length Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed.
% Specifies a margin in percent of the width of the containing element
auto The browser calculates a margin
inherit Inherits this property from its parent element. 
<h4 style="text-align:center;color:red">The margin Property</h4>
<p style="background-color:#f1f1f1">A paragraph with no specified margins.没有指定margin值的段落</p>
<p style="margin: 35px 70px 50px 90px;background-color:#f1f1f1">This paragraph has a 35 pixels margin for top, a 70 pixels margin for right, a 50 pixels margin for bottom, and a 90 pixels margin for left.</p>
<p style="background-color:#f1f1f1">A paragraph with no specified margins.没有指定margin值的段落</p>
padding属性

padding值是元素的内容和边界之间的空间。 padding属性是以下内容的简写属性：

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

padding是在元素内创建的额外空间，margin是在元素周围创建空间

4个属性值：

  • padding:10px 5px 15px 20px;
    • top padding is 10px
    • right padding is 5px
    • bottom padding is 15px
    • left padding is 20px

3个属性值

  • padding:10px 5px 15px;
    • top padding is 10px
    • right and left padding are 5px
    • bottom padding is 15px

2个属性值

  • padding:10px 5px;
    • top and bottom padding are 10px
    • right and left padding are 5px

1个属性值

  • padding:10px;
    • all four paddings are 10px

Note: 允许负值

<h4 style="text-align:center;color:red">The padding Property</h4>
<p style="border:2px solid red">A paragraph with no specified paddings.没有指定padding值的段落</p>
<p style="padding: 35px 70px 50px 90px;border:2px solid red">This paragraph has a 35 pixels padding for top, a 70 pixels padding for right, a 50 pixels padding for bottom, and a 90 pixels padding for left. </p>
<p style="border:2px solid red">A paragraph with no specified paddings.没有指定padding值的段落</p>
columns 列属性：
  • column-width 列宽 省略时按照指定的列数自动平均分配
  • column-count 列数 将页面分为多列
  • column-gap 列间距
  • column-rule 列界线的宽度、样式，颜色

column-width将定义每列的最小宽度，而column-count定义最大列数。 通过使用此属性，多列布局将自动以窄的浏览器宽度分解为单列，而无需媒体查询或其他规则。

<h4 style="text-align:center;color:red">The column property</h4>
<p style="column-count:3;column-gap:30px;column-rule:3px solid #ff00ff;text-align:justify">
周日（3月1日），马来西亚新总理穆希丁（Muhyiddin Yassin）宣誓就职。这是在前总理马哈蒂尔（Mahathir Mohamad）约一周前突然辞职后，马来西亚政坛又一令人意外的消息。94岁的马哈蒂尔是世界最年长民选总理。他2月24日向国家元首递交辞呈后，在马来西亚政坛引发震动。而对这一新的总理人选，马哈蒂尔的表态是：“不合法”、“背叛”。实际上，就在几天之前，马哈蒂尔也被指责“背叛”。马哈蒂尔的指定接班人，安瓦尔（Anwar Ibrahim，又译安华）23日就曾指责马哈蒂尔及其领导的马拉西亚土著团结党谋划组建新的执政联盟将他排斥在外，是“背叛”。针对新总理人选，马哈蒂尔表示将在国会争取议员表决，看新总理穆希丁是否真的得到国会下议院半数议员的支持。根据马来西亚宪法，总理由最高元首任命，必须是一名“应该会得到国会下议院多数议员信任的议员”。在观察人士看来，马哈蒂尔与安瓦尔“鹬蚌相争”之际，马来西亚国家元首认定穆希丁是有可能在国会下议院获得多数议员支持的候选人，使穆希丁成为马来西亚混乱政局中的得利“渔翁”。另外按照马来西亚宪法的规定，如果总理不再获得国会下议院多数议员的支持，就必须递交辞呈。如此一来，马来西亚新一任总理即便走马上任，但政局并未就此稳定，仍然充满了变数。
</p>
float浮动属性

CSS float属性指定元素应如何浮动。float属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本。

  • float:left
  • float:right
<h4 style="text-align:center;color:red">The float property right light none</h4>
<p style="text-indent:2em;color:Tomato">习近平总书记说，新冠肺炎疫情不可避免会对经济社会造成较大冲击。越是在这个时候，越要用全面、辩证、长远的眼光看待我国发展，越要增强信心、坚定信心。综合起来看，我国经济长期向好的基本面没有改变，疫情的冲击是短期的、总体上是可控的。复工就是稳就业，复产就是稳经济。时不我待、只争朝夕，把落下的“功课”补回来，把耽误的“时间”抢回来——政府在行动，企业在行动，个人在行动。</p>
<p style="line-height:100%;"><img style="height:200px;float:right;margin-left:10px;" src="https://b104.photo.store.qq.com/psb?/a19204e6-ed66-4f66-8c59-5c1fae920bb2/Thj**IlGIcDrbgJ3P7fMC4iIfUvNna6CWkH7ziQegvg!/b/dLzpCj5WfQAA&bo=WAJYAgAAAAABByA!&rf=viewer_4&t=5"> 郑晓莉说，在汉阳方舱医院，医务人员和保洁、安保等工作人员进出舱前后，要经过缓冲间、污染间、半污染间、清洁区四个区域。每个区域都配备了专门的院感人员，指导、帮助进出舱的工作人员做好防护、消毒工作。“在高强度的工作之后，许多一线的战友们无法仔细精准地按照院感要求去脱防护用品。例如，有的人忘记要先脱什么；有的人忘记脱口罩不能接触口罩外面；有的人摘口罩、脱防护服时太快……这个时候就需要我们来提醒、帮助他们。”郑晓莉说，“有一次，一位医生第一次出舱十分紧张，手一直发抖，甚至忘了怎么脱防护用品。我安慰她说，不要紧张，慢慢来，我会一步一步提醒你怎么完成。我相信第二次她就不会这样紧张，能够淡定出舱。”武汉供电公司电力工人潘凯，是战“疫”中一位特殊的“志愿者”。毕业于华中科技大学的他，于2017年夺得湖北省职业职工技能大赛维修电工组项目个人和团体冠军，被称为“湖北最牛维修电工”。   
</p>
<p style="line-height:100%;"><img style="height:200px;float:left;margin-right:10px;" src="https://b104.photo.store.qq.com/psb?/a19204e6-ed66-4f66-8c59-5c1fae920bb2/Thj**IlGIcDrbgJ3P7fMC4iIfUvNna6CWkH7ziQegvg!/b/dLzpCj5WfQAA&bo=WAJYAgAAAAABByA!&rf=viewer_4&t=5"> 郑晓莉说，在汉阳方舱医院，医务人员和保洁、安保等工作人员进出舱前后，要经过缓冲间、污染间、半污染间、清洁区四个区域。每个区域都配备了专门的院感人员，指导、帮助进出舱的工作人员做好防护、消毒工作。“在高强度的工作之后，许多一线的战友们无法仔细精准地按照院感要求去脱防护用品。例如，有的人忘记要先脱什么；有的人忘记脱口罩不能接触口罩外面；有的人摘口罩、脱防护服时太快……这个时候就需要我们来提醒、帮助他们。”郑晓莉说，“有一次，一位医生第一次出舱十分紧张，手一直发抖，甚至忘了怎么脱防护用品。我安慰她说，不要紧张，慢慢来，我会一步一步提醒你怎么完成。我相信第二次她就不会这样紧张，能够淡定出舱。”武汉供电公司电力工人潘凯，是战“疫”中一位特殊的“志愿者”。毕业于华中科技大学的他，于2017年夺得湖北省职业职工技能大赛维修电工组项目个人和团体冠军，被称为“湖北最牛维修电工”。   
</p>
<p style="line-height:100%;"><img style="height:200px;" src="https://b104.photo.store.qq.com/psb?/a19204e6-ed66-4f66-8c59-5c1fae920bb2/Thj**IlGIcDrbgJ3P7fMC4iIfUvNna6CWkH7ziQegvg!/b/dLzpCj5WfQAA&bo=WAJYAgAAAAABByA!&rf=viewer_4&t=5"> 郑晓莉说，在汉阳方舱医院，医务人员和保洁、安保等工作人员进出舱前后，要经过缓冲间、污染间、半污染间、清洁区四个区域。每个区域都配备了专门的院感人员，指导、帮助进出舱的工作人员做好防护、消毒工作。“在高强度的工作之后，许多一线的战友们无法仔细精准地按照院感要求去脱防护用品。例如，有的人忘记要先脱什么；有的人忘记脱口罩不能接触口罩外面；有的人摘口罩、脱防护服时太快……这个时候就需要我们来提醒、帮助他们。”郑晓莉说，“有一次，一位医生第一次出舱十分紧张，手一直发抖，甚至忘了怎么脱防护用品。我安慰她说，不要紧张，慢慢来，我会一步一步提醒你怎么完成。我相信第二次她就不会这样紧张，能够淡定出舱。”武汉供电公司电力工人潘凯，是战“疫”中一位特殊的“志愿者”。毕业于华中科技大学的他，于2017年夺得湖北省职业职工技能大赛维修电工组项目个人和团体冠军，被称为“湖北最牛维修电工”。。   
</p>
浮动其他块级元素：

下面的例子将两个列表应用float并排放置了。

<ul style="float: right;margin-right:20%;margin-top:1em">
    <li>亚洲</li>
    <ul>
        <li>中国</li><li>日本</li><li>韩国</li><li>新加坡</li>
    </ul>
    <li>欧洲</li>
    <ul>
        <li>德国</li><li>法国</li><li>英国</li><li>荷兰</li>
    </ul>
    <li>南美洲</li>
    <ul>
        <li>墨西哥</li><li>巴西</li><li>乌拉圭</li><li>厄瓜多尔</li>
    </ul>
</ul>           
<ol style="float: left;margin-left:20%;margin-top:1em">
    <li>亚洲</li>
    <ol>
        <li>中国</li><li>日本</li><li>韩国</li><li>新加坡</li>
    </ol>
    <li>欧洲</li>
    <ol>
        <li>德国</li><li>法国</li><li>英国</li><li>荷兰</li>
    </ol>
    <li>南美洲</li>
    <ol>
        <li>墨西哥</li><li>巴西</li><li>乌拉圭</li><li>厄瓜多尔</li>
    </ol>
</ol>

度量单位：

绝对长度：
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)[
pc picas (1pc = 12 pt)
相对长度：
Unit Description
em 相对于元素字体的大小
rem 相对于根元素的字体大小
vw Relative to 1% of the width of the viewport* 相对于视口宽度的百分比
vh Relative to 1% of the height of the viewport*相对于视口高度的百分比
% 相对于父元素的百分比
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无标题文章
    width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵胜奥阅读 4,905评论 0赞 1
  • HTML学习笔记（完）
    概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时，所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,390评论 0赞 7
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0赞 1
  • 学习笔记（一）
    浏览器与服务器的基本概念 浏览器（安装在电脑里面的一个软件） 作用： ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,165评论 0赞 0
  • css学习笔记
    盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 不同部...
    吾皇PIPA丘阅读 665评论 0赞 0