黑马程序员技术交流社区

标题: 整理的技术笔记 [打印本页]

作者: really-hot 时间: 2019-4-19 22:13
标题: 整理的技术笔记
HTML第一天
web标准
01.遵循原因：由于各个浏览器的内核不同，遵循web标准可以让网页能显示在不同浏览器上
02.web标准的好处：易维护、提高页面浏览速度
03.web标准的构成：结构、样式、行为

浏览器内核
IE：trident
firefox： Gecko
chrom、safari：webkit
opera：presto

html骨架(默写) head给浏览器、body用户

文档类型<!DOCTYPE html> (H5的规范)
作用：首位，告知浏览器文档使用哪种规范

页面语言 <html lang = "en">  指定html 语言种类
考虑了浏览器和操作系统的兼容性，目前仍然使用 zh-CN属性值

字符集 <meta charset = "UTF-8" />  必写，否则乱码
字符的编码方式，以便计算机能够识别和储存各种文字

常用标签
分类：单标签、双标签
关系：嵌套关系、并列关系
语义化：根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰
若去掉css，网页结构依然组织有序，则具有良好的可读性

div和span都是用来布局的，而且没有语义的，块级和行级的区别
<strong></strong>加粗    <em></em>倾斜
链接标签：
<a href = "目标地址(#为空链接)" target = "跳转方式"> _self默认/_blank新窗口中打开

图像标签
<img src = "" alt = "图像不能显示时的替换文本"  title = “鼠标悬停时显示的内容”/>

base标签
<base target = "_blank"> 设置整体链接的打开状态

<pre>我是与格式化标签</pre>

特殊字符
空格  
小于号 ⁢
大于号 >
和号 &
版权 &copy
.........

相对路径
当前目录 ./
上级目录 ../
下级目录 /

锚点定位两步
1.找目标：<h3 id = "id名">第二集</h3>
2.找关系：<a href = "#id名">

XHTML extensible(可扩展的)html(超文本标签语言)
XHTML时、是以XML格式编写的HTML元素，是严格版的HTML
HTML第二天
表格 table(会用)
作用：不是用来布局的，用来常见显示、展示表格式数据；只有行没有列
基本用法：
<table>
// tr表示一行
<tr>
<td> // td表示单元格
</td>
</tr>
属性：
border 默认0
cellspacing 默认2
cellpadding 默认2
宽、高、align(在网页中的水平对齐方式)左中右

表头标签：<th></th>
标题标签：<caption></caption>

合并单元格：(要删除多余的单元格)
跨行合并:rowspan = "个数"
跨列合并:colspan = "个数"

列表标签(重点)
无序列表 ul > li
有序列表 ol > li
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>

<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
表单标签(重点)
目的:收集用户信息
构成:表单控件、提示信息、表单域(容器)
表单控件
input 控件
属性
type
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域

name 控件的名称-用于区别不同的表单
value 默认文本值
size 在页面中的显示宽度
checked 定义选择控件默认被选中的项
maxlength  控件允许输入的最多字符数

label标签
作用：用于绑定一个表单元素
绑定方法一：包裹input表单
绑定方法二：属性 for = "表单的name属性值"

textarea控件文本域
与文本框的区别：显示多行/双标签/用于留言板

select下拉列表
语法：
<select>
<option>选项1</option>
<option>选项2</option>
...
</select>
注意：
至少包含一对option
option中定义 selected = "selected"时，当前项即为默认选中项

form表单域
用户信息通过form表单域传递给服务器
属性：
action URL地址
method get/post提交的方式
name 用于指定表单的名称，以区别同一页面的多个表单

CSS笔记
引入方式
行内样式：style=""
内部样式：半分离，只控制当前页面，一般在head中，理论上哪都能放，type在H5中可以省略
外部样式：完全分离，<link rel="stylesheet" type="text/css" href="路径">
rel：关系，定义文档间的关系，被链接的文档是一个样式表文件

选择器 (选对人，做对事)
基础选择器 / 复合选择器

基础选择器
通配符选择器
id选择器
类选择器
标签选择器

高级选择器
后代选择器
指定标签选择器
并集选择器

font字体
font-style 字体风格--normal / itallic (倾斜)
font-weight 字体粗细--normal / bold / 100~900 (400=normal  700=bold)
font-size 设置字号-----一般先给body指定整个页面的字号
font-family 字体样式--用中文时注意兼容，可以用英文或unicode
综合设置
CSS外观属性
color 文本颜色有三种方式
text-align 文本内容水平对齐方式
line-height 行高
text-indent 首行缩进
text-decoration 文本修饰
none 取消下划线
underline 添加下划线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线

复合选择器
1.后代选择器
作用：用来选择元素组的祖孙后代
符号：空格
语法：父级子级{属性:属性值;属性:属性值;}
2.子元素选择器
作用：只能选择第一层
符号：大于号
语法：.class > h3{color:red;font-size:14px;}
3.交集选择器
作用：选择既有标签一的特点，又有标签二的特点
符号：无
语法：如 p.one  （中间不能有空格）
4.并集选择器
作用：集体声明
符号：逗号
语法：.one, p , #test {color: #F00;}
5.伪类选择器
链接伪类选择器
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动上的链接
a:active 选定的链接

标签显示模式display
块级元素
h1、p、div、ul、ol、li
特点：默认宽度是父级的100%，高宽，内外边距可以控制

行级元素
a、strong、b、em、i、del、s、ins、u、span
特点：只能容纳文本或其他行内元素，高宽直接设置是无效，默认宽度由内容撑开

行内块级元素
特点：高宽边距都能设置，宽度默认内容撑开

常见导航布局思路
一般导航的布局结构是一个大的 div表示整体盒子，里面是ul嵌套多个li。li里面嵌套a，我们需要将li在一行先是(fudong ,inline-block),然后用IDS【play：block将li里

行高
行高大于高度，偏下；反之偏上
背景 background
颜色 -color
图片 -image url(地址)
平铺 -repeat
repeat 、no-repeat、repeat-x、repeat-y
位置 -position
左/中/右(X坐标)  上/中/下(Y坐标)
背景附着
background-attachment：scroll  |  fixed
背景透明
background：rgba(0,0,0,0)

CSS三大特性
覆盖性
继承性
子元素继承父元素的样式：(text-  font-  line-  color)
优先级权重
!important 无穷大、行内1000、id100、class 10、标签 1、继承 0、最后一位不进位

网页布局本质
1.设置盒子大小，放位置
2.盒子里放入元素
盒子模型
没有边框 border：none
内盒实际大小 = 内容宽高(widrh/height) + 内边距 + 边框
表格细线边框 collapse(合并)
1.cellspacing="0"
2.border设置1px
3.取消重叠：table{ border-collapse:collapse; }
padding显示问题
如果给默认宽高的盒子设置了padding，盒子会被撑大
如果没有给一个盒子指定宽度，如果给这个盒子指定padding，则不会撑开盒子。

块级盒子水平居中
1.盒子必须指定宽度
2.margin：0 auto

文字居中
text-align:center 盒子里面的行内和行内块元素也可以水平居中对齐

插入图片(多)和背景图片的区别

相邻块元素垂直外边距的塌陷
产生条件：上下相邻元素外边距相遇，会取两个值得较大者
解决方案：
1.尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷
产生条件：
1.如果父元素没有上内边距及边框
2.父元素的上外边距  与  子元素的上外边距发生合并
3.合并后的外边距取两者中的较大者
解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加 overflow:hidden(强制区分父级和子级的关系)

盒子模型布局稳定性
根据稳定性来分，建议优先使用宽度 > 内边距 > 外边距

border-radius
圆角边框，正方形：50% ；矩形：height/2 px
取值个数详解：
一个值：表示四个角都是一样的
两个值：对角，左上角和右下角左下角和右上角
三个值：左上右上和左下右下
四个值：左上右上右下左下

盒子阴影
div {
width: 200px;
height: 200px;
border: 10px solid red;
  box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4)
box-shadow:水平位置垂直位置模糊距离阴影尺寸（影子大小）阴影颜色  内/外阴影；
box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
}
书写规范：空格

浮动
CSS布局的三种机制：普通流、浮动、定位
特性：脱离文档流
浮动的作用：
1.能使多个盒子水平排列成一行  (inline-blobk的话会有空白间隙)
2.能使盒子左右对齐
3.最早是来实现文字环绕图片的效果
浮动的特点：
1.会改变元素的display属性生成的块级框和行内块极其相似。
2.若父元素宽度不够，则会挤下去
3.尽量宽高实体化
常见布局
左右布局
左中右布局
一父三子，12左，3右，2margin
浮动布局注意
建议给浮动的元素设置一个父元素，父元素设置固定的宽高，避免出现兼容性问题
浮动的扩展
浮动元素与父盒子的关系
1.子的浮动参照父对齐
2.不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动元素与兄弟(前后)盒子的关系
1.前浮，后前顶对齐
2.前普后浮，后顶与前底齐
浮动只会影响当前或者后面的标准流盒子，不会影响前面的标准流。
所以浮动一般都是，父盒子里的子盒子全部浮动

清除浮动(清除浮动造成的影响)
需要清除浮动的情况：
1.父级没高度
2.子盒子浮动
3.影响下面布局，就应该清除浮动了
本质:为了解决父级元素因为子元素浮动而引起的内部高度为0的问题。清除后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
1.额外标签法
在浮动元素末尾添加一个空的标签，如<div style="clear:both"></div>
缺点：添加无意义标签，结构化差
2.父元素添加 overflow：hidden | auto | scroll
缺点：内容多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3.使用after伪元素清除浮动(添加空元素的升级版)
缺点，IE6-7不支持，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝、网易等
.clearfix:after {
content: ""; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix {
*zoom: 1;
} /* IE6、7 专有 */
4.使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}
缺点：和3一样，但是代码更简洁

定位
三种机制：
普通流(地面)、浮动(半空)、定位(天上)

相对定位：
1.相对于它在标准流的位置来移动的
2.原来在标准流的区域继续占有，后边的盒子任然以标准流的方式对待它
绝对定位：(依赖父级)
1.完全脱离文档流--完全不占位置
2.若父元素没有定位，则以了浏览器为准定位 Document
3.父元素(祖先，逐级向上寻找) 要有定位，相对|绝对|固定都是
固定定位：
1.完全脱标，---完全不占位置
2.只根据浏览器的可视窗口
浏览器可是窗口 + 边偏移属性

定位的扩展
1.绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置 margin：auto设置水平居中
方法：left + top+ margin-left + margin-top
2.z-index
不加单位，若同值，后来居上
3.定位改变display属性
inline-block 转换行内块
float 转换行内块(类似，并不一样，因为脱标)
绝对定位和固定定位也和浮动类似，默认转换行内块

脱离文档流的元素不会发生垂直外边距合并的问题

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2