1.md文件的写法

1. 标题

写法：前面带#号，后面带文字，注意，#号后面有空格，分别表示h1-h6，只到h6，而且h1下面会有一条横线。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2. 列表

无序列表

写法:可以用* ， + ， — 来创建

* A
+ B
- C

效果如下：

有序列表

写法：数字后面的点只能是英文的点，特别注意，有序列表的序号是根据第一行列表的数字顺序来的

1. a
2. ab
3. abc
4. abcd

效果如下：

a
ab
abc
abcd

若不按照顺序写

4. aaa
2. bbb
9. ccc

3. 区块引用

写法：想对某个部分做的内容做一些说明或者引用某某的话等，在语句前面加一个 > ，注意是英文的那个右尖括号，注意空格

> 多幸运每场遇见，你都护我周全，哪怕只是同行某一段

效果如下：

陈立农-《年少无邪》

多幸运每场遇见，你都护我周全，哪怕只是同行某一段

也可进行多级嵌套引用

> A一级引用
>> B二级引用
>>> C三级引用

效果如下：

A一级引用

B二级引用

C三级引用

4. 分割线

写法：可以由* - _（星号，减号，底线）这3个符号的至少3个符号表示，注意至少要3个，且不需要连续，有空格也可以。

***
* * *
---
- - -
____
_ _ _

效果如下：

5. 链接

写法：分为行内式和参数式两种方式，

行内式的链接格式是：链接的文字放在[]中，链接地址放在随后的（）中，将鼠标停置在”百度”文字上，会显示“这是百度网”的浮动框。第二行中"这是百度网"为浮窗文本。

[百度网](http://www.baidu.com)点击一下
[百度](http://www.baidu.com "这是百度网")

百度网点击一下
百度

参数式：把链接当成参数，适合多出使用相同链接的场景，注意参数的对应关系。链接的文字可以为中文。

[name]: http://www.baidu.com/name "名称"
[home]: http://www.baidu.com/home "首页"
[测试]: https://juejin.cn/ "测试一下哇"
> 这里是[name],这里是[home]，这里是[测试]

这里是name,这里是home，这里是测试

6. 图片

写法:分为行内式和参数式两种，和链接的写法类似，但是前面要加一个!

行内式图片：
![陈立农](https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2915819795,826199084&fm=26&gp=0.jpg)

[农农]: https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1756886155,3286377353&fm=26&gp=0.jpg
参数式图片，这里是![农农]

行内式图片：陈立农

参数式图片，这里是

7. 代码框

写法：引用代码，单行用``，多行用三个```，那个`是英文状态下Esc键下面一行的第一个键，即第二行第一个键打出来的。

#### 单行用``
`<input type="button" value="登录"/>`

#### 多行用三个```
``` 可以写注释
<input type="button" value="登录"/>
<input type="text" value="name"/>```

单行用``

<input type="button" value="登录"/>

多行用三个```

<input type="button" value="登录"/>
<input type="text" value="name"/>

8. 表格

写法：第一种的分割线后面的冒号表示对齐方式，写在左边表示左对齐，右边为右对齐，两边都写表示居中。

第一种

| name | age | sex |
|:-----:|:----|------:|
| tony | 20  |  男  |
| lucy | 18  |  女  |

name	age	sex
tony	20	男
lucy	18	女

第二种

表1  |  表2
-------|-------
c1   |  c2
c3   |  c4

表1	表2
c1	c2
c3	c4

第三种

学号|姓名|分数
-|-|-
农农|男|91
jk|男|97

学号	姓名	分数
农农	男	91
jk	男	97

9. 强调

写法：一个星号或者是一个下划线包起来，会转换为<em>倾斜，如果是2个符号，会转换为<strong>加粗

* *倾斜字体*
* _字体倾斜_
* **字体加粗**
* __加粗字体__

倾斜字体
字体倾斜
字体加粗
加粗字体

10. 转义

写法：在需要转义的符号前加上反斜线\即可

* \\
* \*
* \~
* \`
* \_
* \-
* \+
* \.
* \!

11. 删除线

写法：在需要删除的内容前后加上~~

~~删掉我吧哈哈哈哈~~

~~删掉我吧哈哈哈哈~~

2. 观察任意一个网站，看哪个标签是用得最多的，并思考为什么

CSDN网站，<span>和<div>标签用得较多，因为首页具有较多内容板块，设计者根据内容需求方便在板块中添加内容。因为它没有默认样式，可以任意地放入内容，使用方便。

3. 阅读”index.css”文件，理解其属性意思，并对没见过或者不熟悉的属性记录或者给属性添加注释

stylelint规则

at-rule-empty-line-before: 需要或不允许at-rules前空一行
at-rule-name-space-after: 需要一个空格后at-rule名称
at-rule-no-unknown: 不允许at-rules不明。
no-duplicate-selectors: 不允许重复的选择器
declaration-bang-space-before: bang声明之前需要一个空格或者不允许空白
string-no-newline禁止在字符串（转义）换行

input::-ms-clear

::-ms-clear代表文本输入框 <input> 边缘的一个按钮（清除按钮），用于清除文本框 <input> 的当前值。只有文本框 <input> 聚焦且非空的情况下该按钮才会出现。

input::-ms-reveal {
  display: none;
}

::-ms-reveal用于显示和应用样式的“密码泄露按钮”，通常在边缘显示<input>的元素type="password"，密码显示按钮以纯文本显示密码字段的值（而不是通常隐藏的隐私全星号显示）。如果清除按钮出现，则会裁剪文本框右侧边缘的内容。解决方案是使用 display: none 隐藏该按钮

伪类与伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。

a::hover
a::active
a[disable]
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

css3中属性前缀（-moz、-ms、-webkit、-o-）

-moz-代表firefox浏览器私有属性
-ms-代表ie浏览器私有属性
-webkit-代表safari、chrome私有属性
-o-代表Opera

-ms-overflow-style用于控制元素内容溢出时滚动条的行为。属性值：auto | none | scrollbar | -ms-autohiding-scrollbar,scrollbar——如果元素的内容溢出，则显示“传统”滚动条。-ms-autohiding-scrollbar——如果元素的内容溢出，则使用自动隐藏滚动条。
-webkit-tap-highlight-color设置点击链接的时候出现的高亮颜色。
::-moz-focus-inner Firefox中，::-moz-focus-outer和::-moz-focus-inner伪元素主要针对按钮类型的元素，包括button类型, reset类型以及submit类型。

@-ms-viewport让网站自动适应不同的IE10窗口大小
@viewport ，让我们可以对文档的大小进行设置 viewport 。这个特性主要被用于移动设备，但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器，如微软的Edge。
svg可缩放矢量图形

svg:not(:root) 合起来就是，svg非根元素的元素

box-x属性

box-sizing 属性

允许以特定的方式定义匹配某个区域的特定元素。例如，需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。可以令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}

box-decoration-break 属性

规定当元素框被分段时，如何应用元素的 background、padding、border、border-image、box-shadow、margin 以及 clip-path。

用法与效果图如下

        span{
            border: 5px solid red;
            padding:  0em 1em;
            border-radius: 16px;
            font-size: 24px;
            line-height: 2;
        }
        span.t1{
            -webkit-box-decoration-break: clone;
            -o-box-decoration-break: clone;
            box-decoration-break: clone;
        }
        span.t2{
            -webkit-box-decoration-break: slice;
            -o-box-decoration-break: slice;
            box-decoration-break: slice;
        }

box-shadow 属性

向框添加一个或多个阴影。用法与效果图如下

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 5px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;//h-shadow v-shadow blur color
}

display属性

规定元素应该生成的框的类型，

- block——此元素将显示为块级元素，此元素前后会带有换行符。

span{ display: block;}

- inline——默认。此元素会被显示为内联元素，元素前后没有换行符。

<head>
<style type="text/css">
p {display: inline}
div {display: none}//none-此元素不会被显示。
</style>
</head>

<body>
<p>把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>

定位属性

position属性

规定元素的定位类型。

<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

top/bottom属性

top-规定元素的顶部边缘，定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom-规定元素的底部边缘，定义了定位元素下外边距边界与其包含块下边界之间的偏移。如果 "position" 属性的值为 "static"，那么设置 "top/bottom" 属性不会产生任何效果。

<head>
<style type="text/css">
img
{
position:absolute;
bottom:500px
}
</style>
</head>
<body>

<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>

</body>

left/right属性

left-规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right-规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。如果 "position" 属性的值为 "static"，那么设置 "left/right" 属性不会产生任何效果。

img
{
position:absolute;
left:100px
}

clip属性

剪裁绝对定位元素。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

cursor属性

规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

overflow属性

规定当内容溢出元素框时发生的事情。

div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}

overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。

div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;//不提供滚动机制。
overflow-y:hidden;//不提供滚动机制。
}

text-x属性

text-size-adjust

允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准，使用时必须加上前缀：-moz-text-size-adjust，-webkit-text-size-adjust,，和 -ms-text-size-adjust。属性值：auto(默认)|none|<percentage>-用百分比来指定文本大小在设备尺寸不同的情况下如何调整。
因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了 100%，他的文本大小会增加直到达到一个易读的大小，但是不会修改布局。 注意,-webkit-text-size-adjust放在body中会导致页面缩放失效,不要把-webkit-text-size-adjust设置为全局或者可继承的。

text-transform

控制文本的大小写。

select{ 
text-transform: none; 
}

text-rendering

定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。属性值：optimizeLegibility——浏览器在绘制文本时将着重考虑易读性。

text-decoration

定义文字装饰的样式。

如在 a 标签中定义none，不显示链接的下划线。

<a href="https://www.lanqiao.cn/saas/school/" style="text-decoration:none;"><span>学校版</span></a>

text-decoration-skip

定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。属性值：objects——拥有完整盒模型的原子行内元素会被跳过，例如图片和行内块元素。

-webkit-text-decoration-skip: objects；

animation-x动画属性

animation实现动画效果，-webkit-animation在Chrome实现动画效果
animation-name 属性为 @keyframes 动画指定名称。
animation-duration属性定义动画完成一个周期需要多少秒或毫秒。
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

animation-play-state属性指定动画是否正在运行或已暂停。属性值：running、paused。
animation-timing-function规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

@-webkit-keyframes antFadeIn {
  0% {/*使用@keyframes规则，你可以创建动画。0％是开头动画，100％是当动画完成。*/
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

opacity 属性设置元素的不透明级别。属性值：从 0.0 （完全透明）到 1.0（完全不透明）。
使用@keyframes规则，可以创建动画。0％是开头动画，100％是当动画完成

@keyframes antMoveDownIn {
  0% {
    transform: translateY(100%);/*定义转换，只是用 Y 轴的值。*/
    transform-origin: 0 0;
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}
@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);/*定义 2D 旋转，在参数中规定角度*/
  }
}
@-webkit-keyframes antSlideDownOut {
  0% {
    transform: scaleY(1);/*通过设置 Y 轴的值（即1）来定义缩放转换。*/
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。属性值：

- translate(x,y)——定义 2D 转换。
- translate3d(x,y,z)——定义 3D 转换。
- scale(x,y)——定义 2D 缩放转换。
- scale3d(x,y,z)——定义 3D 缩放转换。
- rotate(angle)——定义 2D 旋转，在参数中规定角度。
- rotate3d(x,y,z,angle)——定义 3D 旋转。

transform-origin 属性允许改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。注意，该属性必须与transform 属性一同使用。

其它属性

margin设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度
margin-top 属性设置元素的上外边距
margin-bottom 属性设置元素的下外边距。
font-variant设置小型大写字母的字体显示文本
font-feature-settings 属性允许控制 OpenType 字体中的高级印刷特性
tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。
none !important表示使outline属性无效，使绘制于元素周围的一条线无效。
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓线不会占据空间，也不一定是矩形。
line-height 属性设置行间的距离（行高）。属性值：inherit——规定应该从父元素继承 line-height 属性的值。
vertical-align 属性设置元素的垂直对齐方式。属性值：baseline——默认。元素放置在父元素的基线上。
transparent——默认。背景颜色为透明。

background-color: transparent;

transition属性，允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。属性值：color——通过红、绿、蓝和透明度组件变换（每个数值单独处理）

transition: color 0.3s;

pointer-events 属性定义元素是否对指针事件做出反应。
touch-action属性用于设置触摸屏用户如何操纵元素的区域，属性值：manipulation——浏览器只允许进行滚动和持续缩放操作。

touch-action: manipulation；

border-radius该属性允许为元素添加圆角边框。
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，属性值：collapse——如果可能，边框会合并为一个单一的边框。

padding-top 属性设置元素的上内边距（空间），
padding-bottom属性设置元素的下内边距（空间）。
caption-side属性设置标题的位置。

appearance 属性允许您使元素看上去像标准的用户界面元素。 -webkit-appearance: listbox;

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}

white-space 属性设置如何处理元素内的空白。

outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。
clearfix清除浮动

短语标签

<code> 标签用来定义计算机代码文本
<kbd> 标签定义键盘文本。
<samp> 标签用来定义计算机程序的样本文本。
<dfn> 标签是一个短语标签，用来定义一个定义项目。
<strong> 定义计算机程序的样本重要的文本

其它标签

<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<textarea> 标签定义一个多行的文本输入控件。
<dl> 标签定义一个描述列表。<dl> 标签与 <dt> （定义列表的项目/名字）和 <dd> （描述每一个项目/名字）一起使用。在 <dd> 标签内，能放置段落、换行、图片、链接、列表等等。写法与效果如下:

<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。
<sub> 标签定义下标文本。
<sup> 标签定义上标文本。
<small> 标签定义小型文本（和旁注）。
<caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后。
<fieldset> 标签可以将表单内的相关元素分组。<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。
<progress> 标签定义运行中的任务进度（进程）。
<summary> 标签为 <details> 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。
<figcaption> 标签为 <figure> 元素定义标题,使用 <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
使用 <hgroup>标签对标题进行组合：<main> 标签用于指定文档的主体内容。
<nav> 标签定义导航链接的部分，并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。
<abbr> 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。
<address> 标签定义文档作者/所有者的联系信息。<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。

前端学习Day2

1.md文件的写法

1. 标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2. 列表

无序列表

有序列表

若不按照顺序写

3. 区块引用

4. 分割线

5. 链接

6. 图片

7. 代码框

单行用``

多行用三个```

8. 表格

9. 强调

10. 转义

11. 删除线

2. 观察任意一个网站，看哪个标签是用得最多的，并思考为什么

3. 阅读”index.css”文件，理解其属性意思，并对没见过或者不熟悉的属性记录或者给属性添加注释

伪类与伪元素，伪元素采用双冒号写法。

css3中属性前缀（-moz、-ms、-webkit、-o-）

box-x属性

box-sizing 属性

box-decoration-break 属性

box-shadow 属性

display属性

定位属性

position属性

top/bottom属性

left/right属性

clip属性

cursor属性

overflow属性

text-x属性

text-size-adjust

text-transform

text-rendering

text-decoration

text-decoration-skip

animation-x动画属性

其它属性

短语标签

其它标签