HTML5 / CSS Profile
First, let's talk about what is HTML5, HTML5 can be considered a literal sense, that is the fifth generation of HTML, of course, from another perspective, it is a new rich client solutions.
HTML5 will be the HTML, XHTML and HTML DOM of the new standard.
On a version of HTML was born in 1999. Since then, Web world has undergone a sea change.
HTML5 is still in perfected. However, most modern browsers already have some HTML5 support.
HTML: HTML. Tag label may be referred to, nodes, elements and the like.
HTML is the core of its semantics, that is, the meaning of the label itself. When we write only need to focus on the semantic structure of the label regardless of the style tag.
When write pages, HTML, CSS, JS use for each structure responsible for HTML pages, CSS is responsible for landscaping rendering web pages, JavaScript responsible for user interaction with Web pages.
Before writing pages, be sure to understand the main structure.
CSS
Cascading Style Sheets, which is the core stack, we see the final results are often not able to get a CSS, which is a lot of CSS styles superimposed before the formation of the final user interface to see.
CSS is used:
Inline styles: write directly inline to the style attribute style to write directly on the element.
Internal Style: written in the <style> tag style, add style to select elements on a page by selectors.
External style: written in the CSS file, make calls via link tags.
Three ways, inline style priority is the highest, the priority of two otherwise identical. Write in the page, the same priority is written on the back of the override earlier style. (Recommended to use an external style and writing time to try to make the page structure and style of phase separation, that is, page structure, CSS style is best not to put together)
The main structure of the page
<! DOCTYPE html> declaration document head, is mainly used to declare the code is H5, if not written, then the code would be to downgrade the browser.
All <html> webpage
<Head> is set to write some information on the current page, the content is invisible to the user
<Meta charset = "utf = 8"> Settings page of the character set
<Body> body of the page, then the page content displayed on substantially all here
HTML5 Compatibility
Support Html5 browsers include Firefox(Firefox), IE9and later, Chrome(Google browser) Safari, Operaand so on; domestic travel browser ( Maxthon), and based on IE, or Chromium( Chromeproject version or experimental version called) has launched a 360浏览器, 搜狗浏览器, QQ浏览器, 猎豹浏览器the ability of other domestic HTML5 browsers also have support.
It should be noted that, although many browsers now support HTML5, but the display is still there are differences. At this point, if we start from the style point of view, the following can be used several cssschemes.
CSS Reset
Each browser has a default style sheet, that is user agent stylesheet, the page is not specified style, according to the browser's built-in style sheet to render. This is reasonable, as wordthere are some reserved style, it allows us to be more beautiful and neat layout. Different browsers and even different versions of the same style default browser is different. But so have a lot of compatibility issues, CSSResetall browsers can be set as the default style.
CSS Reset Download: https://meyerweb.com/eric/tools/css/reset/
Normalize(Known as the CSS resetalternative, retains some built-in styles, not clear all).
Download: https://necolas.github.io/normalize.css/
CSS Hack
Due to the different versions from different vendors Browser or some browsers (such as IE6-IE11, Firefox / Safari / Opera / Chrome , etc.), to CSSsupport, to resolve is not the same, resulting in showing a different browser environments inconsistent page to show the effect. At this time, we have to get uniform results page, you need to write specific for different browsers or different versions of the CSSstyle, we write this appropriate for different browsers / versions CSS codeof the process, called CSS hack!
classification:
CSS Hack Generally, there are three kinds of manifestations CSS属性前缀法, 选择器前缀法as well IE条件注释法(ie HTML head reference if IE) Hack, the actual project CSS Hack for most of the performance differences between different versions of the IE browser introduced.
- Attribute prefix method (i.e., within the class Hack): e.g. IE6 recognize underlined
"_"and asterisks, "*", IE7 can identify asterisk "*", but does not recognize an underscore "_", IE6 ~ IE10 know "\ 9", butfirefoxpreceding three can not know. - Selector prefix method (i.e. Selector Hack): e.g.
IE6to identify*html .class{},IE7to identify*+html .class{}or*:first-child+html .class{}. - IE conditional comments method (ie HTML conditional comments Hack): (: IE10 + no longer support conditional comments Note): For all IE, IE6 and for the following versions: Such Hack not only for the entry into force of CSS, all code is written inside the statement in judge will take effect.
Notes conditions for IE refer https://www.cnblogs.com/liujunhang/articles/10667109.html .
CSS hack writing order, are generally applicable to a wide range, the strong recognition CSS defined previously.
Attribute prefix method:
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表
| hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
说明：在标准模式中
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
选择器前缀法:
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body { background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效 等等
CSS Hack利弊：
一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。
优雅降级和渐进增强:
由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
第三方插件:
关于兼容性问题，除了上述的解决方案外，还可以通过使用第三方的插件来解决兼容性问题。
个人笔记
关于一些标签的使用我们可以通过一些网站进行查询，可以去国内较为完善的W3cschool进行了解。
下面是一些零碎的知识点：
get和post的区别（get和post都是表单的属性method的属性值，method是表单提交数据的方式）：
1、get的传输方式的传输速度快，而post的传输速度就比较慢。
2、get的安全程度低，post的安全程度则是相对较高。
3、get的传输数据小，post可以传输的数据比较大。
百度的搜索内容一般就是用get的方式提交，而一些比较隐私的，例如账号登录时的数据提交用的是post。get和post本质没有什么区别，只不过get传输时是直接传输过去，而post则是先发起请求，等待响应返回之后才会开始传输数据，所以才有了以上的区别。
选择器生效的一些注意点：
权重的比较方式：ID选择器的权重最高，类选择器其次，元素选择器最低。
对比时，两个选择器，一个有ID选择器，一个没有，则不管后面有多少个类或者元素都没有ID选择器的高。
在直接选中的情况下，权重的生效，权重相同则是后面的会覆盖前面的样式；
在两个选择器都没有选中的情况下，哪一个更精确，那个就能生效；
两个都没选中而且精确度也是同样的情况下，还是比较权重。
在CSS中标签的等级大致分类：
块级元素：
1、独占一行；
2、可以设置其宽高；
3、不设置宽度，宽度则默认是100%；
4、可以当做容器使用。
行内元素：
可以和其他行内元素并排显示；
不能设置宽高，内容宽度为其宽度，行高为其高度。
行内块元素：
其既可以设置宽高，又可以和其他元素并列一行（非块元素）。ps:表单中的input是行内块元素
标准文档流：
浏览器的解析方式，从上到下、从左到右。
文本流：
网页中的文本内容。
脱离标准文档流的方式：
浮动，绝对定位，固定定位等。
元素浮动后会形成字围效果，是因为其只是脱离了标准文档流，但是没脱离文本流。
子元素全部浮动之后父元素的高度会变成零。
我们一般用有以下几种方法解决：
1、.clearfix{*zoom=1;}.clearfix:before,.clearfix:after{context:" ";display:table;}.clearfix:after{clear:both}（给父元素一个.clearfix的类名，将其放入样式中可以解决浮动的问题）
2、直接设置父元素的高度
3、父元素设置样式：overflow:hidder;
4、隔墙法：再浮动的元素父元素后面写一个div，给这个div加上clear：both的属性，也就是浮动效果清除的属性