黑马程序员技术交流社区
标题:
学习经历
[打印本页]
作者:
asd1834134832
时间:
2019-3-19 14:09
标题:
学习经历
经过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 默认显示 后来者居上(按照元素的书写顺序进行显示,后写的元素在最高层级显示)
如果设置了层级属性则 按照 层级属性大小显示 层级越大 显示越靠前
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2