Html-Css-Note(一)

2018-01-16

对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
XHTML属于HTML向XML过渡的语言

Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?参考理解

<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

严格模式:又称标准模式，是指浏览器按照W3C 标准解析代码。

混杂模式:又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

严格模式与混杂模式的来源：

当年Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题，但是依然延续CSS实现中的其它故障（主要是盒模型问题）。

为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有的 css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。

行内元素有哪些？块级元素有哪些？CSS的`盒模型`？

行内元素：a、span、input、img

块级元素：div、p、ul、h1-h6、form

块级元素独占一行，可以设置width,height。行内元素设置width,height无效。

inline-block:将一个对象呈递为内联对象，但是对象的内容作为快对象呈递。（inline意思是可以与其他元素排成一排，block意思是他可以设置宽高）

CSS的盒模型：内容，内边距(padding)，边框(border)，外边距(margin)

CSS引入的方式有哪些? link和@import的区别是?

四种引入方式：行内样式、内嵌样式表、链接样式(外部样式表link)、导入样式(类似链接样式但是使用关键词import)

优先级(理论上)：行内>内嵌>链接>导入

link和@import的区别：

引入方式不对

link引入方式：

1
2
3

<head>
<link rel="stylesheet" href="../style.css" />
</head>

@import引入方式：

1
2
3

<style type="text/css">
@import url(../style.css);
</style>

link是html标签，只能在html页面中使用，@import属于css,因此在样式表中使用。
link无兼容性，@inport在css2.1以下浏览器不支持。
link是html标签则可以使用javascript改变样式，@import则不可以。

前端页面有哪三层构成，分别是什么？作用是什么？

html-->结构层、css-->表现层、js-->行为层

写出几种IE6 BUG的解决方法(本人未测试过这么古老的浏览器)

双边距BUG float引起的使用display
3像素问题使用float引起的使用dislpay:inline -3px
超链接hover 点击后失效使用正确的书写顺序 link visited hover active
Ie z-index问题给父级添加position:relative
Png 透明使用js代码改
Min-height 最小高度！Important 解决’
select 在ie6下遮盖使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

标签上title与alt属性的区别是什么？

alt:当图片不显示是用文字代表
title:为该属性提供信息

描述css reset的作用和用途

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并：目的是减少http请求，Web性能优化最佳实践中最重要的一条是减少HTTP 请求，减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。
文件最小化/文件压缩：目的是直接减少文件下载的体积。
使用CDN托管
使用缓存
meta标签优化（title,description,keywords）、heading标签的优化、alt优化

什么是语义化的HTML？

直观的认识标签(markup)和属性(attribute)的用途和作用。概括为：用正确的标签做正确的事情。

清除浮动的几种方式，各自的优缺点

使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
是用afert伪元素清除浮动(用于非IE浏览器)