HTML CSS JS的初识
-
HTML 定义了网页的内容
-
-
JavaScript 网页的行为
##什么是HTML?
HTML是用来描述网页的一种语言。 -
HTML指的是超文本标记语言: HyperText Markup Language
-
HTML不是一种编程语言，而是一种标记语言
-
标记语言是一套标记标签 (markup tag)
-
HTML使用标记标签来描述网页
-
HTML文档包含了HTML 标签及文本内容
-
HTML文档也叫做 web 页面
css层叠样式表称为级联样式表
在html引用方式为外联、内联、嵌入。
1.外联：在html文档中使用
2.内联：用
3.嵌入：在元素开始行内
快速格式化快捷键：shift+alt+f
##文本元素：
-
h1~h6 1级标题~6级标题
-
p：段落
-
strong：粗体 重要文本
-
i:斜体 应区别对待的文本
-
blockquote：整段的引用
-
q：小段本文的引用
-
超链接 实例<*a herf=xxxxxxxx target=—blank>XXXXX（target=—blank为开启一个新网页 默认为自身网页打开）链接./代表从当前文件出发（可以省略） ../代表从上个文件夹出发（不可省略）
##实体字符 s s
在html里无论多少个空格都只会表示一个空格
示例：
##元素属性：
-
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：宽高一致，值为宽的一半则为圆形。