最近两三个月都在忙着小论文，断断续续怕之前的基础都忘了。最近调参数的同时回顾一下之前的基础内容，一些心得体会做一些记录。
一、H5基础
1.标签
1.<!DOCTYPE html> <!--命名文档类型-->
2.<html></html> <!--说明文档是：标记语言，也是根标签-->
3.<head></head> <!--文件头部-->
4.<title></title> <!--文件标题-->
5.<meta charset="utf-8"> <!-- meta 定义文件信息，便于引擎查找-->双标记又称常规标记，单标记又称空标记。
1.加粗的两个标签<b></b>与<strong></strong>、<i></i>与<em></em>的区别，前者（b、i）都仅为样式好看，后者有语义化的强调。在页面中推荐时候后者，因为样式可以在css 中设置
2.一般的嵌套规则：
块状元素可以嵌套行内元素，块状可以嵌套块状
行内可以嵌套行内，但行内不能嵌套块状
例如：<a></a>中不能再嵌套<a></a>，但<div></div>中可以再嵌套一个<div></div>
3.xhtml与html 的区别
1）xhtml 中的单标签必须关闭，而html中两者都可
2）xhtml 和 html 都要求正确的嵌套
3）xhtml 区分大小写，html不区分
4）xhtml 属性要加""，html可以不要
5）xhtml 用 Id 代替 name
6）xhtml 属性必须要有属性值，html 属性名与值相同时，属性值可以省略
以上内容可以与 “H5的特点” 结合记忆
4.H5的特点
1）骨架更简单
2）语法更宽松（不是好事）
1> 空元素可以省略反斜杠：<br> <hr> <img> <input> <link> <meta>
2> 可省略结束标签的元素：<colgroup> <dt> <dd> <li> <optgroup> <p> <head> <thead> <tbody> <tfoot> <td> <th>
3> 可全部省略标签的元素：<html> <head> <body> <tbody>
4> 不区分大小写 <em></Em> 合法
5> 当引用外部 css 或 Js 时，type 属性可以省略
3）标签语义化
因为引入了新增的标签：<header>、<nav>、<section>、<article>、<aside>、<footer>、<fugure>、<figcaption>等
而且这里仅仅只有结构标签，有语义化。语义化顾名思义就是看到这个标签，就知道这是作用于哪里，传统使用id名或class名语义化加以标识
4）多设备跨平台
能适应多个浏览器的版本，在不同设备上仍然能保持较好的页面效果
5）自适应网页设计
这里的原因是因为页面具有宽高自适应，在移动端或PC端都能完整呈现。（chrome 上可以切换）引入外部样式表的两种方式，一般只是用第一种链接样式
1.<link rel="stylesheet" type="text/css" href="XXX.css">
2.<style>
@import url(XXX.css)
</style>
引入样式的三种方法：内联 > 内部 > 外部 （内部和外部样式的优先级：页面从上到下，谁先书写谁有效）
2. 其他注意点
一个页面中 h1 只能使用一次，h2~h6 可以使用多次，不过一般用到 h3
text-indent 、text-align 在行内元素中使用无效
background 可以有多张背景图，后者覆盖前者
font-wight :100~500 没有加粗效果，600~900 的加粗效果相同 400 等同于 normal ，700等同于 bold
ie6 只能之别png 的8位
二.css
1.盒模型
块状元素：
<body> <div> <h1>~<h6> <ul> <ol> <p> <dl> <table> <tr> <td> <form> 行内元素
<a> <i> <u> <b> <iframe> <span> <font>行内块元素
<input> <img> <select> <textarea>
盒模型包括border(边框)、margin(边界)、padding(补白)、content(内容区)
margin允许负值，而padding 不允许有负值。同级元素同级浮动时，margin值不会重叠。同级不浮动会重叠
这里注意一点，给子元素设置margin-top，会导致父元素一起向下移动。解法：给父/子元素设置浮动。
2.设置省略号
有时文本内容超出规定区域后，为保持内容的完整性，需要显示省略号。这里需要满足4个条件
1）定义宽度 width:value
2）white-space: nowrap
3）overflow:hidden
4）text-overflow:ellipsis
这里省略号只能针对块状元素使用。（行内文本元素要转换为块状元素的方法：1. 设置浮动 2. display: block ）
3.display
系统自带行内元素 display : inline ，块状元素 display :block ，行内元素 display: inline - block
li 是 list - item ，table 是 table
块状级元素：block list - item table flex 行内级元素 inline inline-block inline-table inline-flex
4.css 可继承和不可继承属性
1）列表可继承 list-style list-style-image
2）文本可继承 letter-spacing word-spacing white-space line-height color text-decoration text-transform
font-family/size/style/weight
5.解决img 匿名文本问题
img 是行内块元素，放在块状元素中，会将父元素撑大3~5 px。解决办法
1）给父元素设置 font-size:0; 但是如果img 有同级的文本，会要重新设置文本大小
2）将img 转换为块状元素 display : block
6. 行内块元素（在父元素中垂直居中）
行内块元素与文本的默认对齐方式：基线对齐。 行内块元素用的最多的是 middle 属性，与同级的文本垂直居中对齐。
具体做法：1）将img 的vertical-align ：middle
2）对行内元素设置：
1.height:100%
2.width:0;
3.display:inline-block
4.vertical-align:middle也就是将行内块+行内的组合，转换为行内块+行内块的组合，利用行内块同级时，可以相对于同级元素居中。而且将转换后的行内块元素高度设置为与父元素同高，也就最终做到了在父元素内的垂直居中。
这里也就提到如何在父元素里垂直居中的问题，同样还有另外一个解决办法。
1.height:xx
2.line-height:xx高度与行高相同，也能保持垂直居中
7.定位
定位有4种类型：
1）absolute 针对第一个父元素定位
2）fixed 相对于浏览器定位，常见于页面上的固定导航栏
3）relative 相对于其正常位置定位，不改变正常文档流
4）static 默认值
5）inherit 继承
html 是最大的一个绝对定位参照物，也就是最大的包含块。当某子元素要绝对定位时，会向上找到position 被设置的父元素，也就是无论父元素是position中的任何一种（通常父元素设置为 relative ：即不会改变自身在文档流中的位置，又能使自己是子元素绝对定位的参照物。也有父元素是 absolute 的。只要父元素写了position，就可以作为子元素的参照物）
8.锚点
锚点链接又名锚记，可以通过链接直接跳转到页面的某一部分。通常可以实现轮播图，不过主流现在用JS 实现。
实现方法：
1.<标记 id="锚记名" ></标记>
2.<a href="#锚记名" ></a>9.元素权重
| 内联 | id | class | 元素 | 权重值 |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 0000 |
| 1 | 0 | 0 | 0 | 1000 |
| 0 | 1 | 0 | 0 | 0100 |
| 0 | 0 | 1 | 0 | 0010 |
| 0 | 0 | 0 | 1 | 0001 |
规则：某一css 样式的权重=所有元素的权重之和
通配符 *{} 、子元素 > 、兄弟元素 + 、继承的样式：权重为0
10.相对单位和绝对单位
最常用的单位是 em（当前元素文字的大小） px 和ex(当前元素中字母x 的大小 )
举例：若 p=15px ,width=10em ，则 width=150px
p=10px ,width=10em ，则 width=100px
也有的样式中 只写了类似1.5 、2.0 等，这时找到当前元素中的文本大小，再乘以显示的倍数，即可知道该元素的行高。
通常em 可以省略不写。
11.精灵图
在精灵图上有很多小图标，可以给父元素引入一整张精灵图，然后子元素要使用使，切换背景图定位即可。
优点：1、减小图片体积 2、减少服务器请求次数
与定位结合，可以实现滑动门技术（盒子的自适应）
12.transform
transform 可以实现位移、旋转、放大缩小、倾斜等效果
1）位移：transform : translate(x,y)
也可以分开写
：translate-X
:translate-Y
2）scale(): 0~1 是缩小倍数 ==1 与原内容一致
==0 消失
3）rotate() : 正值：顺时针旋转
负值：逆时针旋转这里与margin padding 做一个对比，margin padding 永远基于父元素大小，而 translate 参数值是百分比时，参照的是自身的大小
与伪类结合，可以实现上下箭头，边框等效果
伪类:after{content:"";display:block;position:absolute;right：Xpx;top:Ypx;transform:rotate(-Zdeg);border-color:#aaa #bbb transparent transparent;border:npx solid;}这个写法与清除浮动的伪类写法相似
应用：让一块内容在父元素中垂直居中，又要使元素不论放大缩小，都居中
解法：
1.设置子元素绝对定位 position:absolute
2.子元素 top:50%
3.子元素 transform:translate-Y(-50%)13.伪对象选择符（伪元素选择符）
1）：after 与content 属性一起使用，定义对象后的内容
示例
div:after{content:url(XX.jpg);} <!---将链接内容作为显示的内容--->
div:after{content:"文本内容";}
div:after{content:attr(class/href)/...} <!---将属性作为显示的内容--->2）:before 定义对象前的内容，使用方法与: after 一致
3）:first-letter 定义对象内第一个字符的样式，只能用于块级元素
4）:first-line 定义对象内一行的样式，只能用于块级元素
5）：：selection 因为是c3 新定义的，所以用两个" ："
语法
E：：selection{color:.....;background:....;}14.visibility 与 display 的区别
visibility : none 对象属性不可见，但仍占据空间，等于留出了空白区域
display :none 使对象彻底消失
15.清除浮动方法
1）加空盒子，并为这个盒子添加clear 类：.clear{clear:both;}
2) overflow : hidden 给父级元素使用（最好是添加第三种方法的类，但是在二级导航中，已经给一级导航使用过添加类了，可以给有二级导航的子元素设置 overflow : hidden）
3）直接添加 .clear 类,在需要清除浮动的父元素上添加这个类 clear
1 .clear:after{display:block;clear:both;content:"";height:0;visibility:hidden;}
2 .clear{zoom:1}
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
