为了账号安全,请及时绑定邮箱和手机立即绑定

关于HTML和CSS,我有话说【征文】

标签:
Html/CSS 征文

1.什么是浏览器?什么是服务器?浏览器分类?一次完整的HTTP事务是怎样的一个过程?
答:浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件。服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。
IE: trident内核;Firefox:gecko内核;Safari:webkit内核;Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核;Chrome:Blink(基于webkit,Google与Opera Software共同开发)。
基本流程:a. 域名解析b. 发起TCP的3次握手c. 建立TCP连接后发起http请求d. 服务器端响应http请求,浏览器得到html代码e. 浏览器解析html代码,并请求html代码中的资源f. 浏览器对页面进行渲染呈现给用户。

2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
答:行内元素:a、b、span、img、input、strong、select、label、em、button、textarea;
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote;
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img。
3.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。
4.说说你对语义化的理解?
答:1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
4,便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
5.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?你知道多少种Doctype文档类型?
答:(1)<!DOCTYPE> 声明位于文档中的最前面,处于 <html>标签之前。告知浏览器以何种模式来渲染文档。如果不设置,浏览器会默认开启quirks mode(怪异模式)解析(quirks mode(怪异模式)是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式)。
(2严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。(3在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。(4DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirk(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
6.介绍一下CSS的盒子模型?
答:在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。1)有两种,IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
7.为什么要初始化CSS样式?
答:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。例如:
1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
4)ul默认带有上下的margin以及左边的padding
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化
8.margin两种特殊的现象:外边距合并现象和margin塌陷现象?
答:外边距合并:如果两个上下排序的div,上面的div和下面的div分别设置了margin-bottom和margin-top的时候,这两个margin会发生合并现象,合并的值是较大的那个;margin塌陷:当大盒子包含小盒子且小盒子设置了margin-top时,大盒子会跟着小盒子向下平移。解决方案:①给大盒子加边框;②给大盒子设置overflow;③大盒子设置浮动。
9.对BFC规范的理解?
答: BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。)
10.行高单位的理解
答:行高的单位有:①具体的像素值 px,②百分号%,③em,④纯数值(不带单位);如果单位是em、%,在设置行高的时候,行高会先计算结果后继承给子元素,如果不带单位时,行高先继承给子元素再计算。
11.解释下浮动和它的工作原理,浮动元素引起的问题,清除浮动的技巧。
答:浮动元素脱离标准流,在页面上不占位置,在标准流之上;浮动元素碰到它的边框或者浮动元素的边框停留。浮动元素引起的问题:①父盒子的高度无法被撑开,影响与父盒子同级的元素②与浮动元素同级的非浮动元素会紧随其后③如果不是第一浮动的元素,那么元素之前的元素也要浮动,否则会影响页面的显示结构。清除浮动的方法:①使用空标签清除浮动,在浮动盒子后面添加一个空标签设置css样式为clear:both,但是增加了页面无意义的标签;②使用overflow属性,给包含浮动盒子的父盒子添加overflow:hidden或者overflow:auto,zoom:1兼容IE6,但是可能产生隐藏溢出元素问题;③使用伪元素:before和:after,
.clearfix:before,.clearfix:after{ content : “ “; display : block; height : 0; line-height : 0; clear : both; visibility : hidden; } .clearfix{zoom:1;}
或者.clearfix:before, .clearfix:after { content: “”; display: table; } .clearfix:after { clear: both; } .clearfix { Zoom: 1;/*IE678*/ }
12.position中的absolute与fixed的共同点与不同点。
答:共同点:①改变行内元素的呈现方式,display被置为block②让元素脱离标准流,不占据空间③默认覆盖到非定位的元素上;不同点:absolute的相对位置可以设置,而fixed的相对位置为浏览器窗口,当滚动页面时,fixed元素与浏览器窗口之间的距离都是不变的。
13.元素的隐藏
答:display:none,隐藏对应的元素,在页面布局中不占据位置。Visibility:hidden,隐藏对应的元素,但是在页面还保留原来的空间。Overflow:hidden,将超出部分裁剪掉。

点击查看更多内容
125人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消