HTML零基础入门学习笔记提供网盘

HTML学习笔记
百度网盘链接：https://pan.baidu.com/s/1__O4dIxmKMIXPsx5OKb8aw
提取码：fmbv

HYML(可在W3School查阅文档)
加粗：< /strong >or 倾斜：or 删除线：or 下划线：or
注释：<!—注释内容–> 快捷键Ctrl+/ Tab键：自动生成

---

分割线（水平线）
自动换行   空格 < <号 > >号 Transparent 透明色 为了元素的稳定性,就设置父元素的宽度,这样就不会因为放大或缩小而打乱排版。例如li，设置ul的宽度 让图片与盒子一样大： Img { width：100%； height：100%； } 图片消失与出现： Img{display:none;} div:hover~img {display:inline-block;}

chrome调试工具
Ctrl+滚轮 改变代码大小 Ctrl+o 复原浏览器大小
点击元素，若样式没有出现，则类名样式引入可能有错；若有黄色感叹号提示，则是样式属性书写错误。

Chrome 查找文字（源代码内）
Ctrl+f——后输入要查找的文字就可

常见图片格式
1.Jpg格式：JPEG（.jpg）对颜色的信息保存较好，高清，颜色较多。经常用于产品类的图片。（255*255种颜色）
2.Gif格式：最多只能存储256色，用来显示简单图形和文字，可以保存透明背景和动画效果，实际用于一些图片小动画效果。
3.Png格式：是一种结合jpg和gif的优点，具有存储形式丰富，能够保存透明背景的新兴格式（想要切成背景透明的图片，就选此格式）
4.PSD格式：PS的专用格式，可存放图层通道、设计稿等。对于前端来说，可直接从上面复制文字，获得图片，还可以测大小和距离。
PS
文件——打开选图
Ctrl+r(视图+r)：标尺 点击标尺，将单位改为像素
PS切图：
1.图层切图：右击图层——快速导出为PNG；选中需要的多个图层——右击图层（图层菜单）——合并图层（ctrl+e）——右击——快速导出为PNG
2.切片切图：用切片工具切图手动选区——文件菜单——导出——存储为web设备所以格式——选择图片格式——选择选中的切片——存储。
3.PS插件切图：Cutterman是PS中的插件（PA必须是完整版的，不能是绿色版的）
导航栏（Nav实际开发是利于li+a做法）
1.让导航栏一行显示———给li添加浮动
2.Nav导航栏先不设置宽度，因此后续可加文字
3.导航栏内每个盒子的文字不一样多，要给a左右添加padding撑开盒子，不是加大宽度。

Emmet语法
快速生成HTML结构语法：
1生成标签：Tab 如：div+tab=

2生成多个标签：” ” 如：p3+tab=

3父子级标签:”>” 如:ul>li+tab=

4兄弟级标签:”+” 如:div+P+tab=

5生成class或id: 如：div.demo+tab= div#demo+tab= 若前面不加div，也会生成div，默认为div。
6若生成的div类名是有顺序的，用自增符号“$” 如：div.demo KaTeX parse error: Expected '}', got 'EOF' at end of input: …爱</div> div{}*5+tab=5个 ，内容1~5。
快速生成css样式的语法
1W200+tab=width:200px;
2lh26+tab=line-height:26px;
3tac+tab=text-align:center;
4ti+tab=text-indent: ;
5使选择器与大括号之间出现空格：右键+格式化文档或重排代码格式
图片

图像属性：border边框；width宽度；heigh高。
相对路径：图片相对html页面的位置。（简洁，保密）例如：同级：img.jpg 下级：images/img.jpg 上级：…/img.jpg
绝对路径：目录下的绝对位置，可直达目标图片。例如：D:\HB\NO.1\images\img.jpg
a链接
可是图片或文本 弹出方式：_self 默认（当前页面） _blank 新窗口
跳转到id为1的目标

跳转到此

表格
表格标签：<table align=“对齐方式” border=”边框大小” cellpadding=”单元格边沿与内容之间的空白 1px” cellspcing=”单元格之间的空白 2px”
width=”表格的宽度” height=”表格的高度”>
行： 列： 表头（列头）： 表头（全部th）： 表体：
跨行合并：rowspan=”个数，向下合并” 跨列合并：colspan=”个数，向右合并”
Outline 轮廓
border-collapse:表格风格效果 collapse合并 separate展开 （合并效果与cellspacing="0"一样）
vertical-align: top;文字水平位置
box-shadow: 10px（X轴） 10px（Y轴） 50px（阴影模糊程度） 5px（阴影距离大小） #8A2BE2 inset（内阴影）;

列表
无序：

有序：

自定义：

dd与dt是兄弟，dt是定义，dd是解释。
ul，ol里只能有li，而li里可以是a，p，h1~h6等元素。dl也是如此不能出现其他标签，只能出现dt，dd。
list-style: none;去除前面的点
list-style-type: circle; 点的类型
list-style-position: outside; 点在外面还是在里面

表单
表单：为了收集用户信息。（表单域，表单控件，提示信息）
表单域：
表单控件：input 输入 select 下拉列表 textarea 文本域
输入：
输入类型：button按钮 checkbox复选框（多选） file文件上传 password密码 hidden隐藏字段 image图像提交按钮 radio单选（如男或女）
reset重置 submit提交 text 文本（默认20个字）
输入类型为radio时，设置相同的name,可进行多选一。 当属性checked="checked"时，默认选中
为input定义标注，label绑定一个表单元素，当鼠标点击label内的文本时，将选中或转到相应的表单元素。
例如： 女 input的id对应label的for
下拉列表：默认选项
文本域：3行，每行20个字（列）
CSS（层叠样式表 Cascading Style Sheets 网页的样式）
Css的三种样式表：
1.内部样式表（嵌入式）: 控制本页面
放入内,一般放在内，理论上放哪都行。
2.行内样式表（行内式）:控制当前标签
如

红色

双引号中用css规范。
3.外部样式表（外链式）:多个页面使用

基础选择器：标签（P），类.（class），id（#）通配符（*）。
属性域属性值直接用“：”隔开，选择器与大括号之间要隔个空。
class=”x” x不可以是纯数字或者中文，可用多次，共享性。多类名：class=”x y”用空格隔开（共同样式）。
id选择器，在一个页面只能调用一次，唯一性。
*通配符选择器，对应所有元素。
复合选择器：后代，子，并集，伪类。
后代选择器：选择器之间用空格隔开 如：ul li { } 选择ul下的所有li
子代选择器：选择器之间用”>”隔开 如：div>p { } 选择离div最近的p标签。
并集选择器：选择器之间用“，”隔开 如：div，p { } 选择div标签和p标签。
伪类选择器：用“：”隔开
链接伪类选择器：1.a:link(未被访问) 2.a:visited(已访问，需清除浏览记录) 3.a:hover(鼠标经过时) 4.a:active(鼠标按住时) 按顺序编写（love hate）
Focus伪类选择器：选取获得焦点（光标）的表单元素（input） 如：input:focus {background-color:red;color:pink;} 被点击的input元素背景和字体颜色。
Css的元素显示模式（元素或标签有什么方式进行显示）
块元素：h1-h6，div,p,ul,ol，li等,div是典型的块元素。
独占一行，宽高有效，
内外边距课控制
宽度默认是容器（父级宽度）的100%
容器或盒子里可放行内元素或块元素。（文字类的块元素不能放块元素，如p，h1~h6）

行内元素：a，span,b,i,u,s，strong，em，ins，del等，span是典型的行内元素。
在一行上，可显示多个相邻的行内元素，
一行里面，宽高无效，
默认宽度是本身内容的宽度
行内元素只能容纳文本或其他行内元素
（a里面不能再放a，a里面可以放块元素（特殊情况），但是给a转换一下块级模式比较安全）

行内块元素：img,input,textare，td
和相邻行内（行内块）元素在一行上，之间有空白（想要消除空白可在父元素中设置font-sixe=0；（有些面试考到）），一行可显示多个
默认宽度是本身内容的宽度
宽高有效，行高，内外边距可控制
行内元素或行内块元素要水平居中，可给其父元素添加text-align:center
模式转换：
转为行内块元素：display: inline-block;
转为块元素：display: block;
转为行内元素：display: inline;
CSS的三大特性（层叠性，继承性，优先级）
层叠性：给相同的选择器设置相同样式，但样式值不同，此时一个样式就会覆盖（层叠）另一个样式。样式冲突问题。（就近原则）
继承性：子标签会继承父标签的某些样式，如文本颜色和字号。（子承父业）
行高的继承性：行高可跟单位也不可单位，若子元素没有设置行高，则会继承父元素的行高（如1.5），此时子元素的行高为子元素的文字大小*1.5。
优先级：当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行；
选择器权重

属性选择器的权重也是10
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

Css书写顺序：

盒子模型（就是把HTML页面中的布局元素看作一个矩形的盒子，也就是盛装内容的容器）
Border(边框)：可以设置元素的边框：宽度，样式，颜色
border-widht| border-style| border-color
Border-style:none|hidden|dotted(点)|dashed(虚线)|solid（实线）|double（双实线）
Border：宽度 样式 颜色（无顺序排列）
Border-collapse：collapse（表示将相邻的边框合并在一起）
Padding：盒子边框与内容之间的距离
Padding：X（上下左右）| X Y(上下 左右) | X Y Z（上 左右 下）| X Y Z L(上 右 下 左)
Margin：盒子与盒子之间的距离
Margin：X（上下左右）| X Y(上下 左右) | X Y Z（上 左右 下）| X Y Z L(上 右 下 左)
Margin可让块级盒子水平居中，1.有宽度；2.左右边距为auto
Margin：0 auto； | Margin：auto
外边距合并：
1.相邻块元素垂直外边距的合并：尽量只给一个盒子加Margin值
2.嵌套块元素垂直外边距的塌陷：可以为父元素定义上边框；可以为父元素定义上边距；可以为父元素添加over:hidden.
消除内边距外边距:
*{padding=0;margin=0}通常放置在css的第一行
行内元素只有左右边距，转换模式即可。

注意
边框和内边距会影响盒子的大小
Button默认有个边框，需要手动去掉：border:0
圆角边框（border-radius）：(椭)圆与边框的交集所形成的圆角效果
圆的半径越大，角越大；参数可是数值也可是百分比
正方形变圆形：把数值改为高度或者宽度的一半（也可写成50%）
矩形变四角弧度一样：把数值改为高度的一半
四个值：border-radius：左上 右上 左下 右下（顺时针）
两个值（对角线）：border-radius：左上+右下 左下+右上
盒子阴影（阴影不占空间不影响排列）
Box-shadow:X(水平) Y(垂直) blur(阴影模糊程度) spread(阴影大小) color inset(内阴影，默认outset外阴影)
X、Y可选负值，正值往下和右移，负值往左和上移
模糊值越大越模糊（阴影越虚，虚与实）
Color可用rgba()形式
鼠标经过时，盒子出现阴影：如div:hover{box-shadow:……….}
文字阴影
Text-shadow:X Y blur color
浮动（float）
布局方式：盒子如何进行排列顺序
三种布局方式：标准流，浮动，定位
网页布局准则：多个块元素纵向排列找标准流，横向排列找浮动；先设置盒子大小，之后设置盒子的位置
标准流（基本，普通流或文档流）：标签按照规定好的默认方式排列
块元素独占一行，从上到下按顺序排列；行内元素从左到右排列，遇到父元素自动换行
浮动：用于创建浮动框，将其移动到一边，直到边缘触及块元素或另一个浮动框的边缘
Float:none\left\right
浮动特点：
1.浮动元素会脱离标准流（脱标）的控制，移动到指定的位置。
浮动的盒子不在保留原先的位置，标准流的盒子会向上移顶替浮动的位置，但是会被浮动的盒子挡住。
2.浮动的元素会在一行内显示，并且元素按照顶部对齐方式排列。
若父元素的宽度不够，多出的盒子会另起一行（若多一些外边距，可以把父元素宽度加大一点，看不见）
3.浮动的元素具有行内块元素的特性。
任何元素都可浮动，浮动后具有行内块元素的特性（宽高有效）
浮动注意点：
浮动和标准流的父盒子搭配；
一个元素浮动了，理论上其他的兄弟元素也要浮动（一浮全浮）。
浮动的盒子只会影响浮动盒子后面的标准流盒子，不影响前面的盒子都加浮动。
浮动的盒子没有外边距合并的问题。
行内块元素之间有空隙，消除空隙就加浮动。
约束浮动元素位置：
先用标准流父元素排列上下位置，然后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
清除浮动
清除浮动的本质是清除浮动元素造成的影响。策略是闭合浮动。
Clear:both(左右都清除浮动)\left\right
父元素不设置高度
清除浮动的方法：
1.额外标签法（隔墙法）：在浮动元素的末尾添加一个空的标签（必须是块元素），如

通俗易懂，书写方便，但结构化差，父元素没有高度。
2.父级元素添加一个属性overflow: hidden\auto\scroll;
代码简单，但是无法显示出溢出的部分
3.After伪元素法（额外标签法的升级版，给父元素添加）
代码如下：.clearfix:after { (必有)content:””; display:block; clear:both; } .clearfix { *zoom:1; }(css为了兼容IE6、IE7清除浮动的写法)
与1的区别就是不用添加新的空标签，此方法结构更简单，但是需要照顾低版本的浏览器，代表网站有：百度，淘宝，网易云等
4. 双伪元素清除浮动（父级元素添加）
代码：.clear:before, .clear:after { content:””; display:table; } .clear:after{ clear:both; } .clearfix { *zoom:1; }
代码更简洁，但是需要照顾低版本的浏览器，代表网站有：小米，腾讯等
为什么要清除浮动？

若一个盒子既有左属性又有右属性，则会默认执行左属性。上下属性也一样，会默认执行上属性。

定位
定位：可以在盒子自由的在父盒子内移动位置或固定在屏幕中的某个位置，并且可以压住其他的盒子（将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子。）
定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式。 位偏移：决定了该元素的最终位置
定位模式：position：static(静态定位)\relative(相对定位)\absolute(绝对定位)\fixed(固定定位)

静态定位（static）：元素的默认定位方式，无定位。如：.top { positin:static; }
该定位按照标准流特性摆放，没有位偏移，该定位在布局时很少用。
相对定位（relative）:元素在移动位置时，是相对于原先的位置移动。（自恋型）
参照点是原先的位置，保留原先位置，不脱标。（给绝对定位当爹）
绝对定位（absolute）：元素在移动时，相对于他的祖先元素的。（拼爹型）
若没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。如果祖先有定位，则以最近一级有定位的祖先元素为参考。不占有原先的位置，脱标。
固定定位（fixed）：元素固定于浏览器可视区的某一位置。（在滚动页面时，该元素的位置不变）
以浏览器的可视窗口为参照点移动元素，跟父元素没有关系。不占有原先的位置，脱标，特殊的绝对定位。
粘性定位（sticky）：可以被认为是相对定位和固定定位混合。
1.以浏览器的可视区为参照点移动元素（固定定位）
2.占有原先的位置（相对定位）
3.必须添加top\left\bottom\right中的一个才有效
兼容性差，IE不支持

位偏移：

布局小技巧：
将盒子固定于版心盒子的右侧：
4.让固定定位的盒子left：50%，移动到浏览器可视区（版心）的一半位置。
5.让固定定位的盒子margin-left:版心的宽度的一半距离。再移动版心宽度的一半位置，就可以移动到版心的右侧位置。
使绝对定位的盒子居中显示（加了绝对定位的盒子不能通过margin：0 auto进行水平居中）：
1.left：50%，让盒子的左侧移动到父级元素的水平中心位置。
2. margin-left：-宽度的一半，让盒子向左移动自身宽度的一半（向左移就是负数）。
子绝父相的由来（子绝对定位，父相对定位）：
1.子级绝对定位，不占有位置，可以放在父盒子的任何位置，不会影响其他的兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内显示。
3.父盒子布局时需要占有位置，因此父盒子只能是相对定位，相对定位经常用来作为绝对定位的父级。
总结：父需要位置——相对定位；子不需要位置——绝对定位；若父盒子不需要位置，父绝子绝也可以。
定位叠放顺序：（z-index）可以使用z-index来控制盒子的前后顺序（z轴） 代码： 选择器 { z-inedx: x; }
数值可以是正整数、负数、或0，默认是auto,数值越大，盒子越靠前。
如果属性值相同，则按照书写顺序，后来居上（auto）
数字的后面不能加单位
只有有定位的盒子才有z-index属性

定位的特殊性
1.行内元素添加绝对或固定定位，可设置宽高。
2.块级元素添加绝对或固定定位，若没设置宽高，默认大小为其内容大小。
脱标的盒子不会触发外边距塌陷：浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并。
绝对（固定）定位会完全压住盒子（压住下面标准流所有的内容）。而浮动元素不同，只会压住它下面标准流的盒子，但不会压住其文字（图片），因为浮动产生的目的最初是为了做文字环绕效果的。文字环绕浮动元素。

元素的显示与隐藏 : 本质是让一个元素在页面中隐藏或显示出来
1.display属性用于设置一个元素应如何显示
display:none(隐藏)/block(除了转换为块元素之外，还表示显示元素)，display隐藏元素后，不再占有原先的位置，
应用广泛，搭配JS可做许多网页特效
2.visibility(可见性)：用于指定一个元素应可见还是隐藏
visibility:visible(元素可见)/hidden(元素隐藏)，visible隐藏后，保留原先的位置。
需要保留位置——-visibility:hidden 不需要保留原先的位置———display:block(用处更多，重点)
3.overflow(溢出)：指示溢出部分会怎么样显示
overflow:visible(默认显示)/hidden(溢出隐藏)/scroll(出现滚动条)/auto(有溢出才出现滚动条，没有溢出则不会出现滚动条；而scroll滚动条一直存在)，
如果有定位的盒子要慎用overflow:hidden,会隐藏溢出部分。
Css精灵技术（css sprites, css雪碧）：为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。（可用FW软件）
精灵图核心：
1.精灵图主要针对于小的背景图片使用；
2.主要借助于背景图片位置来实现：background-position: x y ;
3.一般情况下精灵图都是负值（图片是往左和往上移动，从第四现象往其他三个现象移动）
字体图标(iconfont)：可以为前端工程师提供一种方便高效的图片使用方式（展示的是图标，本质属于字体）
优：轻量级——一个图标字体要比一系列的图片小；灵活性——本质是文字，可改变颜色，产生阴影，透明效果等
兼容性：几乎支持所有的浏览器
字体图标不能代替精灵技术，字体图标只是对工作中的图标部分技术的提升和优化。
字体图标可直接从网上下载：1.字体图标的下载；2. 字体图标的引入；3. 字体图标的的追加。
有关网站：两者都是免费的
1.icomoon字库，http://icomoon.io (外国的，网速慢，)
2.阿里iconfont字库，http://www.iconfont.cn/ (国内的，)
Icomoon字库的有关操作：
1.将文件夹下的（已下载解压的字体图标包）fonts文件夹复制到项目下（根目录）——将.css文件内的@fontface复制到style下或css内——打开.html，复制图标（小方框或代码，代码前面加‘\’）到span内——在style下或css内设置span的各种属性如span { font-family:”icomoon”; }
2.追加：import icons——selection.Json
下载后，原先文件先不要删除，后续肯可能还会用到。
总结：结构和样式简单的小图标，用字体图标；结构和样式复杂的小图片，就用精灵图。
CSS用户界面样式
1鼠标样式cursor : 代码如： li { cursor:default(小白，默认)/pointer(小手)/move(移动)/text(文本)/not-allowed(禁止)；}
也可：

• 
  2轮廓线outline(表单)：给表单元素添加outline:0;或outline:auto;可消去默认的蓝色边框。
  3防止拖拽文本域resize(textarea) 代码如： textarea { resize:none; }
  Vertical-align:经常用于设置图片或者表单（行内块元素）和文字的垂直对齐。用于设置一个元素的垂直方式，只针对行内元素或行内块元素。
  Vertical-align:baseline/top/middle/bottom

  将行内块元素的Vertical-align值设为middle,可让文字与图片居中对齐。

  CSS三角：主要是不要设置宽高，把其他三个部分的颜色设置为透明色。代码如下：
  Div { width:0; height:0; line-height:0; font-size:0;(前两个是为了兼容性) border:50px solid transparent; border-left-color:pink; (显示为粉色的左) }
  一个矩形盒子多出一个三角的效果：利用css三角和定位。先做好一个父盒子，然后做出三角作为子盒子，利用定位就可。（子绝父相）

  常见布局技巧：
  1Margin负值运用：如边框变粗（1px+1px=2px）
  让每个盒子margin往左移-1px，正好压住相邻盒子边框。
  鼠标经过某个盒子时（:hover），提高当前盒子的层级即可（如果没有定位就添加相对定位（保留位置），如果有定位就添加z-index）
  2文字围绕浮动元素
  巧妙运用浮动元素不会压住文字的特性
  3行内块元素巧妙运用
  如页数的设计：代码

  *n
  a { display:line-block(设为行内块元素可以设宽高)；…其他属性， }
  要另外设置上一页、下一页所在的a的宽度，另外要注意权重问题
  4Css三角强化
  如此效果，一个大盒子里，有两个行内元素span,第一个span里包含一个i(子盒子，三角)，利用定位，把i移到指定位置。
  把左边和下边的边框设为0，把上边宽度调大，后面再利用定位。（子绝父相）
  i { width:0; height:0; border-color:transparent red transparent transparent; border-style:solid; border-width:22px 8px 0 0; }

  bug:图片底侧盒子边框有空白缝隙，因为行内块元素会和文字的基线对齐。
  1.给图片添加vertical-align:middle\top\bottom（提倡）
  2.将图片转换为块级元素:display:block;

  溢出的文字省略号显示：
  1.单行文本溢出显示（需要满足三个条件）
  1.1先强制一行显示：white-space:nowrap;(默认normal,自动换行)
  1.2超出部分隐藏：overflow:hidden;
  1.3文字用省略号代替溢出的部分：text-overflow:ellipsic;
  2.多行文本溢出显示省略号（有较大的兼容性问题，适用于webkit浏览器或移动端（移动端大多是webkit内核））
  溢出隐藏，用省略号显示：overflow:hidden; text-overflow:ellipsic
  弹性盒子伸缩模型显示：display:-webkit-box;
  限制在一个块元素内显示的文本行数：-webkit-line-clamp:2；
  设置或检索伸缩盒子对象的子元素的排列方式：-webkit-box-orient:vertical；
  多行的可让后台人员来做，他们可以设置显示多少个字。