html、css视频总结

关于浏览器对html的解析

浏览器内核有两种引擎：渲染引擎，js引擎。
渲染引擎主要负责加载页面，根据请求获得的响应中的数据部分的html文档来生成DOM树，主要流程是:加载html，解析html生成dom树，加载css，解析css，添加相应样式到dom树的相应dom节点，成为了一棵渲染树，然后浏览器渲染合成，将页面绘制在浏览器界面。

html小概述

html是标记型语言、解释型语言。
标记型语言：标记语言是一种注释文本的语言，以便计算机可以操作该文本。简单来说就是根据语义、效果将文本按规范用标签标记起来。
解释型语言：说明html不会报语法错误，浏览器识别不出的就不会生效。浏览器尽量去解释html文档，直到无法继续下去。
编写html的原则：遵循html标签的语义

html的几大主要部分：

标签（元素节点），文本，注释，DTD，处理信息
各标签组成一棵DOM树的结构，该DOM树的各节点都可在js中获取，对其进行动态操作。
文本即无左右尖括号包裹住的内容部分，如果有左右尖括号则要进行转义，或者放在<!CDATA[text]>中则可不用转义
DTD放在html文档的最前面，声明了该html使用的是哪个规范，浏览器才知道文档可使用哪些标签，以及它们的含义。
html的注释格式：<!--comments-->

关于css：

使用方法：外链、嵌入、内联。
选择器：除了标签选择器、id选择器、class选择器、伪类选择器、属性选择器的基本用法，还要熟悉比如各种模糊匹配方式，以及组合方式。

一些简单案例

产品展示小图链接：

 body,p,h3{margin: 0px;}因为浏览器对很多元素有默认样式，常为内外边距，但我不需要，所以先清除掉
.product{width: 280px;margin: 0px 0px 0px 0px;border: 1px solid gray;text-align: center;/*想设置内容水平方向居中，两个方法：1、左右margin：auto。即自动相等；2、给它的容器的text-align：center*/
.product .product-text{/*注意两者之间的空格，不加空格不生效*/height: 100px;background-color: ghostwhite;margin-top: 20px;padding: 15px;}
<img src="img/th.jpg" alt="girl" width="195px"/>   <!--设置图片大小时，只设置宽或者只设置高即可，这样图片就会自动缩放而不会变形-->

简单导航侧边栏：

#navBody{width: 240px;margin: 50px auto 0px;border: 1px solid black;background-color: rgba(255,255,255,0.6);/*设置背景为白色，半透明*/}
#navBody .navul .navli a{display: block;/*padding-left: 20px;*/text-indent: 2em;/*首行缩进两个汉字宽度*/}
#navBody .navul .navli a:hover{background-color: #ff6700;color: #fff;}

三角形

一个div元素，宽高都为0px，border-top，border-left，border-right，border-bottom都设置，则会形成三角形。需要哪一块，则将其他三个方向的border的颜色都设置为transparent。

快速：直接先写border：50px solid transparent，然后再给需要的那一个方向设置颜色