HTML5 / CSS 프로필
먼저, HTML5 무엇인지에 대해 이야기하자, HTML5가 그 HTML의 5 세대이며, 문자 그대로의 의미로 간주 될 수있다, 물론, 또 다른 관점에서, 그것은 새로운 리치 클라이언트 솔루션입니다.
HTML5는 HTML, XHTML하고 새로운 표준의 HTML DOM됩니다.
HTML의 버전에 1999 년에 태어났다. 그 이후로, 웹 세계는 바다 변화를 겪고있다.
완벽에 HTML5가 아직도있다. 그러나, 대부분의 최신 브라우저는 이미 일부 HTML5를 지원합니다.
HTML : HTML. 태그 레이블은 노드, 요소 등이라고 할 수있다.
HTML은 의미의 핵심, 라벨 자체 즉, 의미입니다. 우리가 쓰기 만하면 스타일에 상관없이 태그의 라벨의 의미 구조에 초점을 맞출 필요가있다.
쓰기 페이지, HTML, CSS는 HTML 페이지에 대한 책임을 각 구조 JS의 사용은, CSS는 조경 렌더링 웹 페이지, 웹 페이지와 사용자의 상호 작용에 대한 자바 스크립트 책임을 담당합니다.
페이지를 작성하기 전에, 주요 구조를 이해해야합니다.
CSS
핵심 스택, 우리는 최종 결과는 종종 볼 수있는 최종 사용자 인터페이스의 형성 전에 중첩 CSS 스타일을 많이하는 CSS를 얻을 수없는 참조입니다 스타일 시트를 계단식.
CSS를 사용한다 :
인라인 스타일 : 요소에 직접 작성하는 직접 인라인 스타일 속성 스타일을 작성합니다.
내부 스타일 :의 <스타일> 태그 스타일로 작성은 선택기로 페이지에서 요소를 선택하는 스타일을 추가합니다.
외부 스타일 : CSS 파일에 기록이 링크 태그를 통해 통화를 할 수.
세 가지 방법, 인라인 스타일의 우선 순위는 달리 동일한 두 가지의 우선 순위가 가장 높은 것입니다. 페이지에 기록, 같은 우선 순위는 재정 이전 스타일의 뒷면에 기록됩니다. (페이지 구조 및 위상 분리의 스타일을 만들려고 노력 외부 스타일 및 쓰기 시간을 사용하는 것이 좋습니다, 즉, 페이지 구조, CSS 스타일이 최고입니다 함께 넣어하지 않음)
페이지의 주요 구조
주로 코드를 선언하는 데 사용되는 <! DOCTYPE html로> 선언 문서 헤드는 작성하지 않을 경우 H5는, 다음 코드는 브라우저를 다운 그레이드하는 것입니다.
모든 <HTML> 웹 페이지
<헤드>가 현재 페이지에 대한 몇 가지 정보를 기록하도록 설정되어, 컨텐츠는 사용자에게 보이지 않는
<메타 문자 집합 = "UTF = 8"> 문자 집합의 설정 페이지
<BODY> 페이지의 본문, 다음 페이지의 컨텐츠가 모두 여기에 표시 실질적
HTML5 호환성
지원 HTML5 브라우저는 포함 Firefox(파이어 폭스), IE9이상 Chrome(구글 브라우저) Safari, Opera국내 여행 브라우저 (, 등 Maxthon) 및 기반 IE, 또는 Chromium( Chrome를 시작했다 프로젝트 버전 또는라는 실험적인 버전) 360浏览器, 搜狗浏览器, QQ浏览器, 猎豹浏览器국내 HTML5 브라우저의 기능도 지원합니다.
그것은 많은 브라우저는 현재 지원하지만, 주목해야한다 HTML5,하지만 디스플레이는 여전히 차이가있다. 우리가보기의 스타일 지점에서 시작하는 경우이 시점에서, 다음과 같은 몇 가지 사용할 수있는 css체계를.
CSS 리셋
각 브라우저의 기본 스타일 시트, 즉이 user agent stylesheet에 따라, 페이지가 지정되지 않은 스타일을 브라우저에 내장 된 스타일 시트를 렌더링 할 수 있습니다. 이 같은 합리적인 word일부 예약 스타일이있다, 그것은 우리가 더 아름답고 깔끔한 레이아웃이 될 수 있습니다. 다른 브라우저와 같은 스타일의 기본 브라우저의 경우에도 다른 버전이 다릅니다. 그러나 이렇게 호환성 문제를 많이 가지고 CSSReset모든 브라우저가 기본 스타일로 설정할 수 있습니다.
CSS 리셋 다운로드 : https://meyerweb.com/eric/tools/css/reset/
Normalize(로 알려진 CSS reset, 다른 일부는 내장 된 스타일 모두를 지우지 유지).
CSS 해킹
때문에 서로 다른 공급 업체의 브라우저에서 다른 버전이나 (예 : IE6-IE11, 파이어 폭스 / 사파리 /와 같은 일부 브라우저로 오페라 / 크롬 등)에 CSS해결하기 위해 지원 일치하지 않는 다른 브라우저 환경을 보여주는 결과, 동일하지 않습니다 페이지는 효과를 표시합니다. 이 때, 우리가 균일 한 결과 페이지를 얻을 수 있고, 당신이 다른 브라우저 또는 다른 버전에 대한 구체적인 작성해야 CSS스타일, 우리는 다른 브라우저 / 버전이 적절한 쓰기 CSS code프로세스를,라고 CSS hack!
카테고리 :
CSS 해킹은 일반적으로 발현 세 종류가있다 CSS属性前缀法, 选择器前缀法뿐만 아니라 IE条件注释法(즉, HTML 헤드 참조하는 경우 IE) 해킹, 도입 된 IE 브라우저의 다른 버전 사이의 성능 차이의 대부분을위한 실제 프로젝트 CSS 해킹.
- (클래스 해킹 내에서 즉,) 접두사 방법을 속성 : 예를 들어, IE6에 밑줄을 인식
"_"\ "9", IE6 ~ IE10이 알고, 별표 "*", IE7은 "*"별표 (*)를 식별 할 수 있지만, 밑줄 "_"을 인식하지 않지만,firefox세 이전하는 것은 알 수 없다. - 선택기 접두어 방법 (즉 선택기 해킹) : 예를 들어
IE6식별*html .class{},IE7식별*+html .class{}또는*:first-child+html .class{}. - IE 조건부 주석 방법 (즉, HTML 조건부 주석이 해킹) : (: IE10 + 더 이상 조건부 주석 주 지원) : 모든 IE, IE6를 들어 다음과 같은 버전 : 이러한 해킹뿐만 CSS의 발효를위한 모든 코드가 적용됩니다 판사의 문 안쪽에 기록됩니다.
IE에 대한 메모 조건은 참조 https://www.cnblogs.com/liujunhang/articles/10667109.html을 .
CSS는 해킹, 순서를 작성 일반적으로 넓은 범위, 이전에 정의 된 강한 인식 CSS에 적용 할 수있다.
접두사 방법을 속성 :
属性前缀法是在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的属性，也就是浮动效果清除的属性