HTML CSS JS 的最先的认识

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
##什么是HTML?
HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言: HyperText Markup Language
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML使用标记标签来描述网页
HTML文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

css层叠样式表称为级联样式表
在html引用方式为外联、内联、嵌入。
1.外联：在html文档中使用<link>元素。
2.内联：用<style>元素使用。
3.嵌入：在元素开始行内<style>后面使用。
快速格式化快捷键：shift+alt+f

##文本元素：

h1~h6 1级标题~6级标题
p：段落
strong：粗体重要文本
i:斜体应区别对待的文本
blockquote：整段的引用
q：小段本文的引用
超链接实例<*a herf=xxxxxxxx target=—blank>XXXXX</a>（target=—blank为开启一个新网页默认为自身网页打开）链接./代表从当前文件出发（可以省略） ../代表从上个文件夹出发（不可省略）

##实体字符
在html里无论多少个空格都只会表示一个空格
示例：<p>s s</p>

##元素属性：

width；width：500px；设置元素宽度；
height；height：100px;设置元素高度；
color；color：red；设置元素内容颜色；
background-color；background：red；设置元素北京颜色；
font-size；font-size：1px；设置文字大小；
font-weight；font-weight：1px；设置文字粗细；
text-align；text-align：center；设置文字排列方式；
border；border：1px solid;设置元素边框样式；

##选择器
| Tables | Are | Cool |

| ------------- |:-------------:| -----:|
| 通配* |选中当前文档所有元素 | *{...} |

| 元素 | 选中当前文档所有该元素| div{...} |

| id | 选中属性值匹配的元素，具有唯一性 | #login{...} |

| class |选中当前文档所有该类元素 | .center{....} |

| 子级 |选中当前文档符合条件的子级元素 | header>nar{...} |

| 后代 |选中当前文档符合条件的所有后代 | ul空格li{...}|

| child |选中当前文档符合条件的子级元素 | li：nth child（-n+x）{...} |(n为0~x)

| 并集 |选中当前文档匹配上的多个元素 | login，center，xxx{....} |

##CSS（复用声明冲突继承）：

复用：即重复使用，避免了重复书写，提高开发效率；
声明冲突：属性相同，值不同：比较优先级（优先级高胜）>比较特殊性（特殊性高胜）>比较原次序（原次序后胜）倘若属性值后面有！important则说明是一条重要说明；示例： color：red ！important
子级自动拥有父级某些CSS样式；文本集的样式具有继承性。

##盒模型
盒模型是css基石之一，它规定一个元素在页面上如何显示，在某种程度上.............
###块级元素：占据所有可用宽度，以换行开始，通常用于较大的内容块，比如标题或结构化元素
###行内元素：只占据内容所需宽度，在同一行内一个接一个摆放，通常用于较小的内容块，如被选择为粗体或斜体。
不同元素产生的盒子类型也就不同，display属性决定了盒子类型。

display：none 将元素隐藏并且不保留其物理空间；
display：inline 指定元素为行内元素；
display：block 指定元素为块级元素；
display：inline-block 指定元素为行内块元素；

####盒模型取值：paddin margin：

10px 上右下左；
10px，20px 上下左右；
10px，20px，30px 上左右下；
10px，20px，30px，40px 上右下左；
单独指定某一方向：margin-top/right/bottom/left；
padding是边框和内容间可选距离。

##视觉格式化
视觉格式化模型规定了三种定位系统

常规流（normal flow）：在没有css的干预下，块级元素独占一行，宽高可设；行内元素，单排显示，宽高自动。
浮动（float）：有两个值，一个为left，一个为right；float：left ：左浮动，浮动定位；float：right ：右浮动，浮动定位
绝对定位（absolute positioned）

####任何一个元素都必须属于其中某一种定位体系。不同的设定体系中，尺寸和位置都会有一些差异。

浮动盒子位置：

右浮动盒子向上向右排列
左浮动盒子向上向左排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够空间放下盒子。

##overflow

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

#美化：

##美化文本

font-size 字体大小（不要取奇数）
font-weight 字体粗细
font-style 字体样式（加粗倾斜之类）
letter-spacing 文字间距
word-spacing 词间距
text-indent 第一个文字缩进
text-decoration 线条：none 没有线条；overline 文字顶部划线；underline 文字底部划线；line through 文字中部划线
：：first-letter 文本第一个字
：：frist-line 文本第一行
###字体类型：

非衬线字体——网页用的较多
衬线字体——印刷用的较多
font-family 可设置多个值且用逗号隔开，浏览器会依次读取设置的值，若一个值失效，则读取下一个，所以为避免失效，最后一个值为sans-serif或者serif。
由于font-family为可继承属性，并且一个网页通常都是统一的。因此，通常对body元素使用。
font-face加载web字体

##美化边框
border-radius：宽高一致，值为宽的一半则为圆形。