[学习交流] 学习经历

经过10多天的学习总结一下自己所学的知识；第一天 html：1-前言 web标准 2-认识HTML 3-HTML常用标签
主线-认识WEB-浏览器-浏览器内核-WEB标准-HTML认识-开发工具-文档类型-字符集-常用标签-路径

第二天 HTML：1. 网页由文字、图片视频音频等等这些元素组成的

2.web标准：结构（HTML）表现（CSS）行为（javascript）

3.HTML骨架结构

<html>
  <head>
<title></title>
  </head>
  <body></body>
</html>

标签的格式： < 标签名 > </标签名>

标签分为：单标签  < 标签名 />

         双标签 < 标签名 > </标签名>

标签之间的关系：

嵌套关系（父子级）

例如： head 标签和 title 标签的关系

并列关系（兄弟级）

例如： head 和body 标签属于并列关系

骨架结构

lang属性用于告诉浏览器当前网页中的内容是什么语言  en 英语  zh-CN 简体中文

<meta charset="UTF-8" /> 用于设置当前网页在浏览器中使用的字符集编码

GBK GB2312  BIG5

HTML的概念：超文本标记语言主要用于描述网页中的元素

常用的HTML标签

标签语义化：在合适的地方使用合适的标签

排版标签：

h1~h6 标题标签

p  段落标签

hr 水平线标签

br 换行标签

div 和span 容器标签

文本格式化标签

strong  加粗  b

em 倾斜  i

ins  下划线 u

del 删除线 s

注释标签  

图像标签  <img src="图片所在路径/文件名" alt="图片不显示的时候替换文本" title="鼠标放到图片上面的时候显示的文字信息">

链接标签：

<a href="链接地址" target="_blank"> 链接文字/图片 </a>

target="_blank" 设置链接在新窗口中打开  _self 默认在当前窗口跳转

外部链接

<a href="http:// 网址"> 链接文字/图片 </a>

内部链接

<a href="文件路径、文件名"> 链接文字/图片 </a>

空连接

<a href="#"> 链接文字/图片 </a>

锚点链接

1. 锚点要跳转的目标位置（只在当前页面）设置id属性

2. 在链接中设置 href = #id名称

<base target= "_blank"/> 设置页面上所有的a链接都在新窗口中打开

路径

相对路径

  当前html文件和要引入的文件在同一级目录什么都不写或者 ./
  直接写文件名即可

  当前要引入的文件在html文件的下一级目录中  /
  文件夹名称 / 文件名

  当要引入的文件在 html文件的上一级目录中  ../
  ../ 文件名

绝对路径

  本地绝对路径：一般不用  C:/html/index.html

  网络地址绝对路径：

  预格式化标签  pre ：将代码中的所有格式原样保留到网页上

  特殊符号：

  空格  > >  < <  ©
第三天 HTML：表格标签

<table width = “100”> 表格标签
<caption> 表格的标题标签 </ caption>
<tr> 表格行标签
   <td></td> 表格单元格标签
   <td></td>
   <td></td>
</tr>
<tr> 表格行标签
   <td>  </td> 表格单元格标签
   <td></td>
   <td></td>
</tr>
<tr> 表格行标签
   <td></td> 表格单元格标签
   <td></td>
   <td></td>
</tr>
</table>

表头单元格标签 <th> </th>

表头标签  <thead></thead>
表格主体标签 <tbody> </tbody>
表格底部标签 <tfoot> </tfoot>

表格的属性

cellspacing 设置单元格外边距（单元格和单元格之间的距离）

cellpadding 设置单元格内边距（单元格边框和内容之间的距离）

border 表格的边框属性

单元格合并：

跨行合并  rowspan

跨列合并  colspan

合并步骤：

1.先找目标单元格确定合并的数量
2.根据先上后下先左后右  删除的单元格都适合下边的和右边的
删除单元格的数量 = 合并的数量 - 1

列表标签

无序列表

<ul>
  <li> </li>
</ul>

有序列表

<ol>
  <li> </li>
</ol>

自定义列表

<dl>
  <dt>自定义标题</dt>
  <dd>自定义描述</dd>
  <dd>自定义描述</dd>
  <dd>自定义描述</dd>
</dl>

表单：

提示信息

表单元素

表单元素的作用：收集用户信息

<input type = "text" /> 文本框
<input type = "password" /> 密码框
<input type = "radio" /> 单选按钮(单选框)
<input type = "checkbox" /> 复选框
<input type = "submit" /> 提交按钮
<input type = "reset" /> 重置按钮
<input type = "button" value="按钮显示文字"/> 普通按钮
<input type = "image" src="图片路径"/> 图片按钮
<input type = "file"/> 文件域

<textarea> </textarea> 文本域

下拉列表
<select>
  <option></option>
</select>

表单元素的属性

value 设置文本框和按钮的值

name 用于区别表单元素给表单元素分组

checked 设置单选按钮或者多选按钮默认选中

selected 设置下拉列表中默认选中项

placeholder 设置文本框和文本域密码框的占位符

表单域

<form action="设置表单内容的提交地址" method="设置表单的提交方式" name="userinfo">
表单元素
</form>
凡是使用表单元素的地方都需要使用表单域标签form进行包裹

表单提交方式：

get （默认以get方式提交）

post

name 表单域进行命名分组用来区别多个表单域
第三天 css：CSS  层叠样式表

CSS作用：主要用于美化HTML结构，为结构中的内容增加样式，颜色，字体大小，边框等等...

CSS 的书写位置：

1. 行内样式：直接在标签的style属性中书写样式

<div style="color:pink;"></div>

2. 内部样式（内嵌样式）：在head标签中写style标签在style标签中书写css样式

<style>
  选择器 {
样式属性:值;
  }
</style>

3. 外链样式表（外部样式表）
  a. 先新建一个外部的css文件  直接在文件中书写样式及选择器
  b. 在需要的页面中引入css文件： <link rel="stylesheets" href="css文件路径" />

CSS 选择器

  选择器名 {
样式属性:值;
  }

CSS基本选择器

标签选择器：选中当前页面中某一类标签

  标签名 {
样式属性:值;
  }

类选择器：选中当前页面中所有使用这个类名的元素  类选择器可以被重复使用

1.定义类样式
.类名 {
样式属性:值;
  }

2.使用类样式：<div class="类名"></div>

id选择器:  选中当前页面中使用这个id名的元素，但是只能使用一次

#id名 {
样式属性:值;
  }

<div id="id名称"></div>

通配符选择器 * 选中页面上所有的标签一般用于初始化页面的样式使用

*  {
样式属性:值;
  }

字体样式：

  color 文字颜色属性

  css中颜色的表示方式：

  1.内置颜色： pink

  2.16进制  #000 #fff #ff0000
第四天 css：
  3.rgb(0~255,0~255,0~255)
  font-size 设置字体大小

  font-weight 设置字体粗细  normal 400  bold 700 bolder 900 100~900 整百

  font-style 设置字体倾斜  italic 倾斜  normal 不倾斜

  font-family 设置字体  注意：当字体名称是中文或者多个英文单词或者 Unicode编码的时候需要加引号

  字体简写属性 font: font-style font-weight font-size/line-height font-family

  在字体简写中 font-family 和font-size不可以省略并且所有简写属性顺序不能变化

  文本样式：

text-align:center 设置文字水平居中对齐

line-height 行高（行间距）比文字字号大7~8px即可

text-indent 2em 首行缩进  1em = 1个字的大小（font-size）

text-decoration: none underline line-through  设置文字下划线

调试工具：

f12 - >elements
第五天 css：复合选择器

后代选择器：嵌套结构中选中所有后代（子子孙孙）元素

格式：  基本选择器1 基本选择器2 { 样式属性 }  后代选择器使用空格连接

子代选择器 :  在嵌套结构中选中所有子一级（不包括后代元素）元素

基本选择器1 > 基本选择器2 { 样式属性 }  后代选择器使用空格连接

交集选择器在普通结构中选择既是... 又是... 的一个元素

标签选择器.类选择器 { 样式属性 } 例如： <div class="one"> </div>  div.one { ... }

并集选择器：在普通结构中主要用于对相同的样式进行集体声明

基本选择器1,基本选择器2 { 样式属性 }  例如：  div,h1,p { color:red; }

链接伪类选择器：

:link 用来设置鼠标未点击过的链接样式

:visited  设置鼠标点击过的链接样式

:hover 设置鼠标经过链接时候显示的样式  （使用最多的伪类）

:active  设置鼠标按下不松开的时候链接显示的样式

元素的显示模式：默认标签的显示方式例如：div默认占一行显示 span 可以在同一行显示

块元素：
特点：1. 独自占一行显示
   2.可以设置宽度和高度及内外边距
   3.默认宽度是父元素宽度的100%（默认宽度和父元素一样大）
   4.块级元素内部可以嵌套任何元素

   注意：个别文本类块级元素不能嵌套其他块级元素 h p dt
   常见的块级元素标签：  容器标签（盒子）一般都是块级元素  div ul li p h

行内元素
特点：
   1.在一行内可以显示多个行内元素
   2.不能设置宽度和高度及垂直方向的内外边距
   3.默认大小和内容大小一致
   4.行内元素只能嵌套文本和其他行内元素

   注意：a标签可以嵌套块级元素 a标签不能和自身进行嵌套
   常见的行内元素标签：和文字相关的标签 span  a strong em ins del
行内块元素
   1.可以在一行内显示多个
   2.可以设置宽度和高度
   3.默认大小和内容大小一致
   常见的行内块元素：表单元素+图像标签  img input textarea select

转换块级元素
   display:block
转换行内元素
   display:inline
转换行内块元素
   display:inline-block

CSS背景属性

background-color: 设置背景颜色
background-image：url(图片路径)
background-repeat: 设置背景图片是否平铺 no-repeat  repeat  repeat-x  repeat-y
background-position: x y; 设置背景图片的位置  可以设置方位名称还可以设置具体的数字
background-attachment: 设置背景图片是否跟随滚动条滚动 scroll  fixed

背景属性的简写：
background: 背景颜色背景图片背景是否平铺背景位置（坐标或者方位名词）背景固定

背景透明
background-color
rgba(0~255,0~255,0~255, 0~1)  0完全透明 1 不透明

CSS三大特性：

层叠性 : css解决样式冲突的一种机制

同一个标签被相同的选择器选中设置了相同的样式的时候距离标签最近的样式生效
前提条件：必须权重相同

继承性 CSS 中一部分样式属性可以被继承在嵌套的结构中子元素会继承父元素的样式

CSS中与文字有关的样式都可以被继承其他的样式都不可以被继承

优先级  当选择器不同的时候样式冲突时候浏览器的解决方式

继承0 0 0 0 < * 通配符 < 标签选择器 < 类选择器(伪类) < id选择器 < 行内样式 < !important

1.权重不存在进位关系 0 0 0 0
2.元素都被选中的情况下比较权重
3.权重相同不比较优先级执行层叠性
第六天 css：
CSS的三大特性：

层叠性: 在选择器权重相同的时候设置相同的样式给同一个元素浏览器执行距离标签最近的那个样式属性

继承性: 在嵌套的元素中设置设置样式的时候我们可以通过给父元素设置样式让子元素也具有相同的样式

可以被继承的属性：凡是与文字有关的样式属性 text- font- line- color

优先级（权重）

当给元素设置的样式相同但是选择器权重不同时候浏览器的解决方式

!important > 行内样式 > #id > .class > 标签选择器（标签默认样式） > 通配符 > 继承

权重的叠加计算
行内样式 id class  标签选择器
0    0    0    0

注意：权重不可以进位（官大一级压死人）

盒模型：

边框  border  内边距 padding  内容大小width height

border: border-width border-style border-color

border-style: solid 实线  dashed 虚线  dotted点线

border-collapse: collapse 设置表格边框合并  （细线表格边框）

padding  盒子边框与内容之间的距离

一个值：  上下左右

两个值：上下  左右

三个值:  上左右下

四个值:  上右下左

盒子的实际大小 = 内容的大小（width height） + padding 内外边距  + border 边框

padding会撑开盒子（改变盒子的实际大小）

特殊情况：当盒子没有设置内容的大小（width 和height ）的时候盒子不会被撑大

外边距 margin 盒子与盒子之间的距离

一个值：  上下左右

两个值：上下  左右

三个值:  上左右下

四个值:  上右下左

margin外边距合并（外边距塌陷）

body 在浏览器中有默认 8px的外边距

* {
  margin:0;
  padding:0;
}

1. 垂直方向相邻的两个盒子外边距合并问题浏览器在显示的时候只会显示较大的外边距，较小的不显示

解决方案: 只设置一个盒子的外边距即可避免设置垂直方向的两个外边距

2. 嵌套的两个盒子垂直方向的外边距合并问题浏览器在显示的时候只会显示较大的外边距，较小的不显示

解决方法：

1. 给父元素设置border

2. 给父元素设置padding

3. 给父元素设置 overflow :hidden
  第七天 css：
圆角边框  border-radius:50%  圆形

盒子阴影 box-shadow: 水平位置垂直位置阴影大小阴影模糊程度阴影颜色内外阴影

页面布局的三种方式：

标准流:  页面所有的元素都按照默认的显示方式进行排列

浮动：让块级元素同一行显示并且脱离标准流

定位

浮动：

为什么要学习浮动？  为了让多个块级元素可以在同一行显示方便我们进行页面布局

float: left / right / none

浮动的特性:

1. 浮动的元素脱离标准流，在标准流中不再占有位置 (后面标准流的兄弟元素会占据浮动元素原来的位置)

2. 浮动的元素显示模式会发生变化变成类似行内块元素的显示方式

3. 浮动的元素与父元素的关系: 浮动的子元素只能和父元素的内容区进行对齐不会超出 padding 和border 部分

4. 浮动的元素与标准流中兄弟元素的关系：浮动的元素只会影响标准流中后面的兄弟元素

浮动的元素在使用的时候:
1. 一般情况为了不让浮动的元素影响后面标准流中的元素，会为其增加一个父元素

2. 一般情况为了布局稳定，当前元素浮动兄弟元素也应该浮动

清除浮动:

为神马要清除浮动？

1. 当父元素没有高度的时候，浮动的子元素无法撑开父元素，导致父元素高度为0，父元素后面标准流中的兄弟元素就会占据父元素的位置

清除浮动的属性:  clear:both

清除浮动的方法:

1. 额外标签法增加一个带有清除浮动属性的空标签
用法: 谁浮动就给最后浮动的元素后面增加一个带有清除浮动属性的空标签
缺点:会给页面增加许多没有用的空标签导致页面结构混乱

2. 给父元素设置overflow :hidden
  第八天 css：
页面布局方式

标准流

浮动

定位：

定位模式 + 边偏移 ( top left right bottom )

定位模式 position

1.static 静态定位
元素默认的定位方式不能设置边偏移不可以设置层级（z-index）  不脱标

2.relative 相对定位

相对定位的元素参考自身之前在标准流中的位置进行定位可以设置边偏移可以设置层级  不脱离标准流（在标准流中保留位置）

3.absolute 绝对定位

绝对定位的元素参考距离最近带有定位（相对定位、绝对定位、固定定位）的父元素（祖级元素）进行对齐，如果没有定位的父元素则参考浏览器进行对齐

可以设置边偏移，可以设置层级，完全脱离标准流（在标准流中不保留位置）

绝对定位的元素会转换元素的显示模式变成近似行内块的显示方式

绝对定位的元素不存在外边距塌陷

4. fixed 固定定位

固定定位的元素只参考浏览器可视区进行对齐

可以设置边偏移，可以设置层级

完全脱离标准流（在标准流中不保留位置）

固定定位的元素显示模式会发生变化变成近似行内块的显示方式

固定定位的元素不会跟随浏览器滚动条滚动

固定定位的元素不存在外边距塌陷

子绝父相：

子元素设置绝对定位父元素设置相对定位

绝对定位的盒子居中对齐：
1.先设置绝对定位的子元素边偏移为 50%
2. 设置绝对定位的子元素 margin 负值

定位元素的层级属性 z-index

定位（静态定位除外）的元素层级都会高于标准流和浮动

只有设置了定位（静态定位除外）的元素才有z-index

元素默认的层级为 0 默认显示后来者居上（按照元素的书写顺序进行显示，后写的元素在最高层级显示）

如果设置了层级属性则按照层级属性大小显示层级越大显示越靠前

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 学习经历

0 个回复