HTML CSS JS 的初识

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（复用 声明冲突 继承）：

1. 复用：即重复使用，避免了重复书写，提高开发效率；

2. 声明冲突：属性相同，值不同：比较优先级（优先级高胜）>比较特殊性（特殊性高胜）>比较原次序（原次序后胜） 倘若属性值后面有！important则说明是一条重要说明；示例： color：red ！important
   

3. 子级自动拥有父级某些CSS样式；文本集的样式具有继承性。

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

1. display：none 将元素隐藏并且不保留其物理空间；

2. display：inline 指定元素为行内元素；

3. display：block 指定元素为块级元素；

4. 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 文本第一行
  ###字体类型：

1. 非衬线字体——网页用的较多

2. 衬线字体——印刷用的较多

3. font-family 可设置多个值且用逗号隔开，浏览器会依次读取设置的值，若一个值失效，则读取下一个，所以为避免失效，最后一个值为sans-serif或者serif。

4. 由于font-family为可继承属性，并且一个网页通常都是统一的。因此，通常对body元素使用。

5. font-face加载web字体

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