写在前面的话
关于“https://ke.qq.com/course/231570?taid=1441318010325138”课程的学习笔记
HTML标签
初级标签
html——hyperText markup language
超文本标记语言
lang="en"为了告诉搜索引擎爬虫，我们的网站是关于什么内容的，lang="zh"
<html lang="en"> 根标签
<head>
<meta charset="utf-8">gb2312 gbk unicode
<title></title>
<meta content="服装" name="">
<meta content="描述" name=""> 靠前的概率更大
</head>
<body>
life is shit！！美好的生活！！
</body>
</html>
<p></p>成段显示
<h1></h1>标题
<strong>加粗</strong>
<em>斜体</em>
<strong>
<em></em>
</strong>
<del>$50</del>
<address></address>地址标签
最重要的标签：方便规格化，分块好维护好编写（容器）
<div></div>会换行
<span></span>直接显示
高级标签
空格文本 
要将有语法含义的标签写成文本信息<div>
回车标签
有序列表，会包含序号1234/abcd
<ol type="i/a" start="5/c">
<li></li>
<li></li>
</ol>
不包含序号，序号点
父子结构更好
<ul type="circle">
<li></li>
<li></li>
</ul>
引入图片
<img src="" alt="这是范爷” title=“this is 范冰冰”>
alt一定程度弥补图片的损失，图片占位符
title：图片提示符，鼠标移动到图片上显示
1、网上的url
2、本地的绝对路径
3、本地的相对路径
标签
<a href="https://baidu.com" target=_blank>www.baidu.com</a>
1、超链接
a标签可以包裹任何东西，包括图片，文字，css
新标签中打开或者本标签内打开
2、锚点
3、打电话发邮件
href内部写电话号码tel：xxxxx
4、协议限定符
表单标签
<form method="get/post" action="后端地址">
<p>
username:<input type="text" name="username" value=“请输入用户名” onfocus=" " 有焦点 onblur=" "失去焦点>没有name就不能submit成功
</p>
<p>
password:<input type="password">
</p>
input组件
<input type="submit" value="提交">
单选块
<input type="radio" name="star" value="" 默认选中 checked=“checked””>
复选块
<input type="checkbox" name=“fruit” value="">
select组件
<select name=""fruit>
<option>orange</option>value标签先
<option></option>
</select>
</form>
css学习
初级篇
cascading style sheet 层叠样式表
引入css
1、行间样式
<div style=""></div>
2、页面级css
<style type="text/css">
div{
}
</style>
<div></div>
3、外部css文件
<link rel="stylesheet" type="text/css" href="xxx.css">
选择器
- id选择器
一对一，#(id){} - class选择器
多对多，.(class){}，class=“demo demo1” - 标签选择器
div{}所有div标签都会随之发生变化 - 通配符选择器
*{} - 属性选择器
[class]，[id=“only”] - 父子选择器/派生选择器
不在于一定实用标签在于父子关系 - 直接子元素选择器
div>em{} - 并列选择器
自右向左的顺序 - 分组选择器
em，strong，span{} - 伪类选择器
a（任意元素）：hover{}//鼠标移入之后的效果
css 权重（256进制）
行间样式（1000）>id（100）>class属性选择器 | 伪类谁在后看谁（10）>标签（1）|伪元素>*（0）
行间样式优先级高于外部css文件
单个属性值之后加入！important（正无穷）甚至大于行间样式
css属性
www.css.88在线字典
div{
font-size：50px；
font-weight：bold/border/100-900；
font-style：italic；
font-family：arial；
color：
1、土鳖式：纯英文单词
2、颜色代码
r （00-ff）g（00-ff）b（00-ff）
3、颜色函数
rgb（0,255,255）
border：
border-width：20px；
border-style：solid/dashed；
border-color：red，transparent；
text-align：right/center/left；//对齐方式
height：200px；
line-height：200px；//文本高度=容器高度，垂直居中的方式
text-indent：2em；//首行缩进
em：相对单位，1em=1*该标签的font-size
px：像素是相对的，代表一个颜色单元
text-decoration：line-through/none（del标签没有线）/underline/overline；//两个标签的text样式一致
cursor：pointer/help/resize；//光标定位值
margin：距离墙之间的距离
}
企业级用法
元素分类：
1、行级（内联）元素inline
feature：内容决定元素所占位置，不可以通过css改变宽高
span、strong、em、a、del
2、块级元素block
feature：独占一行，可以通过css改变宽高
div、p、ul、ol、form、address
3、行级块元素
feature：内容决定大小，可以改变宽高
img
可以通过改变属性值display：inline/block/inline-block来修改
凡是带有inline的元素，都有文字特性，图片横向排列4px
反向编程思路：
1、先定义功能，后选定样式
2、标签选择器的目的不是为选中标签，而是初始化很多标签
3、通配符选择器：初始化所有标签，好多标签在刚开始就有margin和padding属性，利用通配符直接能够将其初始化为0
盒子模型：
盒子的三大部分：
盒子壁：border
内边距：padding上右下左，如果三个值，则先展示左右等距
盒子内容：width+height
margin
盒模型的计算问题：
求可视区的大小，不包含margin
层模型
absolute绝对定位：
1、脱离原来位置进行定位，不属于一个层，可以随机定位
2、相对于最近的有定位的父级进行定位，如果没有，那么仙姑低于文档进行定位
relative关系定位
1、保留原来位置进行定位，属于之前的确定位置不会让位置，同样也不属于同一层
2、相对于原来出身的位置进行新的定位
fixed固定定位
1、滚动条怎么动都不会动
相对于可视区居中的固定写法：
div{
position:fixed;
left:50%;
top:50%;
width:100px;
height:100px;
background-color:red;
margin-left:-50px;
margin-top:-50px;
border-radius:50%;
}
那么何时使用absolute？何时使用relative？
relative是机架，absolute当作定位技术，减小对后续元素的破坏
给定一个属性z-index：确定第几层
重点：关于布局
两端布局
margin塌陷：垂直方向的margin父子会粘在一起，水平方向父子分离定位
解决办法：
1、给父级一个border；
2、bfc block format context块级格式化上下文
如何触发一个盒子的bfc
position：absolute
display：inline-block
float：left/right
overflow：hidden溢出部分隐藏
css2.0 float：浮动元素可以用来站队
1、浮动元素产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素。并不能说完全产生分层，只有块级元素是。
2、外边的包住里边的全部小元素，利用p标签可以将身边的浮动流删去，之后使用会使用伪元素实现
p{
border: 0 solid green;
clear: both;//清除左右浮动，能清除的必须是块级元素
}
伪元素
伪元素天生就存在before和after，可以通过css将其选出来，伪元素是行级元素，需要修改之后才可以定位显示
position:absolute; float:left/right;直接打内部把元素直接转换成inline-block，会直接根据元素内容大小自适应
升华篇
文字溢出处理
溢出容器，要打点展示
1、单行文本
white-space: nowrap;//强制性不换行
overflow:hidden;//溢出隐藏
text-overflow:ellipsis;//结尾省略号实现
2、多行文本
估算内容大小和容器大小的关系
确定大小展示，利用height=line-height的倍数+overflow：hidden
背景图片展示
background-image：url（fy.jpg）
background-size：100px 100px；
background-repeat：no-repeat；
background-position：top center；
解决方法1：将文字写到框外
解决方法2：height0利用padding将盒子撑开，图片填充
行级元素只能嵌套行级元素，块级元素可以嵌套任何元素
1、p>标签不能套块级元素
2、a>标签不能套a标签
css要点补充说明
自适应
块级元素
margin：0 auto；
元素特点
inline，inline-block属于文本类元素
有时会采用margin-left：-6px处理，但是上传服务端之后便无效
解决办法直接删去空格换行
内部转化
一旦语句position：absolute/float：left/right便将元素转化为display：inline-block
对齐
文本和文本之间底对齐，图片和文本也是底对齐
一旦一个文本元素或块级元素内部填写好对后就会变成行对齐
如何确定对齐线？
vertical-align：middle，-1px，-5px
左右浮动
style{float：left；float：right}
@规则
@charset 设置样式表的编码
@import 导入其他样式文件
@media 媒体查询（移动端开发）做适配
@font-face 自定义字体，自定义图标
好处：样式重置直接导入
模块化
扫一扫
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
