|
<h1 id="htmlcss相关问题">HTML&css相关问题
<h3 id="xhtml和html有什么区别">1.XHTML和HTML有什么区别
- HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
- 最主要的不同
- XHTML元素必须被正确地嵌套。
- XHTML元素必须被关闭
- 标签名必须用小写字母
- XHTMl文档必须拥有根元素
- 直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
- HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；
- 在没有样式css情况下也以一种文档格式显示，并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
- 在阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
- 1、用正确的标签做正确的事情。
- 2、html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；
- 3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
- 4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO;
- 5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
- Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
- Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
- Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
- Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]
- 浏览器：IE、Chrome、FireFox、Safari、Opera
- 内核：Trident、Gecko、Presto、Webkit
- HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。
- 绘画canvas
- 用于媒介回放的video和audio元素
- 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
- sessionStorage的数据在浏览器关闭后自动删除
- 语意化更好的内容元素，比如article,footer,header,nav,section
- 表单控件：calendar,date,time,email,url,search
- 新的技术webworker,websocktGeolocation
- 移除的元素
- 纯表现的元素：basefont,big,center,font,s,strike,tt,u;
- 对可用性产生负面影响的元素：frame,frameset,noframes;
- 支持HTML5新标签：
- IE8/IE7/IE6支持通过document,createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
- cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；
- sessionStorage和localStorage的存储空间更大；
- sessionStorage和localStorage有更多丰富易用的接口；
- sessionStorage和localStorage各自独立的存储空间；
- cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
- cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
- cookie数据大小不能超过4K。
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
- localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
- sessionStorage：数据在当前浏览器窗口关闭后自动删除
- cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
- 调用localstorage,cookies等本地存储方式
- WebSocket、SharedWorker
- localstroge另一个浏览器上下文被添加、删除或修改时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
- 注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。
- HTMl5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；而HTMl4.01基于SGMA，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
- ！Doctype声明位于HTML文档的第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。doctype不存在或格式不正确会导致文档以兼容模式呈现。
- 标准模式的排版和JS运作模式都是该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式来显示，模拟老式浏览器的行为以防止站点无法工作。
- 用于声明文档使用哪种规范（html/Xhtml）一般为严格过渡基于框架的html文档。
- 加入XML声明可触发，解析方式更改为IE5.5拥有IE5.5的Bug。
？
- HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来进行）
- 而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
- HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
- HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document对象
- 由于Document对象是window对象的一部分，所以可通过window.document属性对其进行访问。
- title标签；meta标签；header标签；footer标签
- 元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）
- 行内元素：会在水平方向排列，不能包含快级元素，设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效
- 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行
- 兼容性：display:inline-block;display:inline;zoom:1;
- 1.link属于HTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供，只能加载CSS;
- 2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
- import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题；
- 内联，内嵌，外链，导入
- 区别：同时加载，
- 前者无兼容性，后者css2.1以下浏览器不支持
- link支持使用javascript改变样式，后者不可。
- 1、主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
- 2、渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式、然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同、所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核
- 3、JS引擎则：解析和执行javascript来实现网页的动态效果。
- 4、最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核九倾向于只指渲染引擎。
- box-sizing：content-box|border-box|inherit
- content-box：宽度和高度分别应用到元素的内容框。
- 1、父级div定义height。
- 2、结尾处加空div标签clear：both。
- 3、父级div定义伪类：after和zoom。
- 4、父级div定义overflow：hidden。
- 5、父级div定义overflow：auto。
- 6、父级div也浮动，需要定义宽度。
- 7、父级div定义display：table。
- 8、结尾处加br标签clear:both。
- 比较好的是第3种，好多网站都这样用
-
1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
- 1、便于修改，模拟分离，像一些信息管理系统会用到。
-
2、但现在基本不推荐使用。除非特殊需要，一般不推荐使用。
- 1、iframe的创建比一般的DOM元素慢了1-2个数量级
- 2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。
3、iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。
- 1、box-sizing:用来指定模型的大小的计算方式。主要分为border-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。
- 2、transition:当前元素只要有"属性"发生变化时，可以平滑的进行过渡。通过transition-propety设置过渡属性；transition-duration设置过渡时间；transition-timing-function设置过渡速度；transition-delay设置过渡延时。
- 3、translate：通过移动改变元素的位置；有x,y,z三个属性
HTML结构：
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
方法二
.content{
position:absolute;
left:50%;
top:50%;
width:200px;
height:200px;
background:red;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
- block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
- none 缺省值。像行内元素类型一样显示。
- inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
- inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
- list-item 像块类型元素一样显示，并添加样式列表标记。
- table 此元素会作为块级表格来显示。
- inherit 规定应该从父元素继承display属性的值。
- 块级元素：div,p,h1,form,ul,li
- 行内元素：span,a,label,input,img,strong,em;
- css盒模型：内容，border,padding;
- 标签选择符；类选择符；id选择符
- id>class>标签选择
- important优先级高
- 使用带clear属性的空标签；
- 使用css的overflow属性；
- 使用css的：after伪元素；
-
同时为了兼容 IE6，7 同样需要配合zoom使用
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}
- 使用邻接元素处理；
- 父级设置成inline-block；
- br清浮动
- 以浮制浮（父级同时浮动）
- 给浮动元素父级设置高度
- 给父元素添加overflow：hidden 清除浮动方法；
-
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: hidden;
*zoom: 1;
- 1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
- 2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
- rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
- 4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。
- 1、颜色：新增RGBA、HSLA模式
- 2、文字阴影(text-shadow)
- 3、边框：圆角（border-radius）边框阴影：box-shadow
- 4、盒子模型：box-sizing
- 5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
- 6、渐变：linear-gradient、radial-gradient
- 7、过渡：transition可实现动画
- 8、自定义动画
- 9、在CSS3中唯一引入的伪元素是::selection
- 10、多媒体查询、多栏布局
- 11、border-image
- 12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
- 13、3D转换
- Alt当图片不显示时，用文字代表
- Title为该属性提供信息
- Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。
- css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。
- css精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
- css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的"background-image","background-position"的组合进行背景定位，这样可以减少。
- 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。
- 就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简洁明了，易于进行web操作和网站SEO，方便团队的一种标准，以图实现一种“无障碍”的web开发。
- display:none;使用该属性后，HTML元素（对象）的宽高，高度等各种属性值都将“丢失”；
- visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。
p{
color:green;
*color:blue;
_color:black;
}
- 结构层、表示层、行为层
- 结构层（structural layer）：由HTML或XHTML之类的标记语言负责创建。
- 表示层（presentation layer）:由css负责创建。
- 行为层（behaviorlayer）:负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
- 1、map+area或者svg
- 2、border+radius
- 3、纯js实现需要求一个点在不在圆上简单算法，获取鼠标坐标等等
- 1、有两种：IE盒子模型、W3c盒子模型
- 2、盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。
- 3、区别：IE的content部分把border和padding计算了进去
- 文件合并
- 文件最小化/文件压缩
- 使用CDN托管
- 缓存的使用
- IE8以下浏览器的盒模型中定义的元素的宽高不包括内边剧和边距
- 1、双边距BUG float引起的 使用display
- 2、3像素问题使用float引用的使用display:inline -3px;
- 3、超链接hover后点击失效，使用正确的书写顺序 link visited hover active
- 4、le z-index问题给父级添加position:relative
- 5、png 透明使用js代码改
- 6、min-height最小高度 ！important解决
- 7、select 在ie6下遮盖 使用iframe嵌套
- 8、为什么没有办法定义1px左右的宽度器（IE6默认的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）
- css选择符：类选择器、标签选择器、ID选择器、后代选择器（派生选择器）、群组选择器
- 可以继承：类选择器、标签名选择器、后代选择器（派生选择器）、群组选择器
- 优先级算法：
- 标签内直接定义：1000
- ID选择器：100
- 类选择器：1
- 内联和important中，important优先级高
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
