web典型理论题整理HTML+CSS部分

1.css选择符有哪些?属性继承?优先级算法如何计算?css3新增伪类有哪些?
css选择符:id选择器(# myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器( * )、属性选择器(a[rel = "external"])、伪类选择器(a: hover, li:nth-child)
可继承样式:font-size、font-family、color、text-indent
不可继承样式:border、padding、margin、width、 height
优先级算法: 优先级就近原则,同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准;!important > id > class > tag; important 比 内联优先级高,但内联比 id 要高
CSS3新增伪类举例:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
CSS3新特性:
CSS3实现圆角(border-radius),阴影(box-shadow),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询,多栏布局
border-image
2.列出display的值,说明他们的作用
none 隐藏;block 块显示;inline 内嵌 ;table 表格显示;list-item 项目列表
3.position的值有哪些?relative和absolute定位的原点是?
absolute 生成绝对定位的元素,相对于定位以外的第一个祖先元素进行定位。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
relative生成相对定位的元素,相对于其在普通流中的位置进行定位。
inherit 规定从父元素继承 position 属性的值。
4.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
5.H5有哪些新特性?移除了哪些元素?
新特性:
内容元素,article、footer、header、nav、section。
表单控件,calendar、date、time、email、url、search。
控件元素,webworker, websockt, Geolocation。
移出的元素:
显现层元素:basefont,big,center,font, s,strike,tt,u。
性能较差元素:frame,frameset,noframes。
6.如何处理H5新标签的浏览器兼容性问题?如何区分HTML和HTML5?
处理兼容问题有两种方式:
IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。
使用是html5shim框架
DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。
7.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 :同时加载
前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可
8.iframe的缺点?

9.列举几种页面优化方案?

10.bootscript是什么?能做什么?

11.描述一下css的animation和transition各自的特点?

12.实现双栏布局,左边固定不动,右面根据屏幕自适应(不用JS)

13.在移动端制作WEBapp优化页面的方案?

14.如何让一个元素水平垂直居中?

15.页面布局的方式?

16.设置超出文本宽度自动显示省略号?

17.css script是什么?优缺点?

前端大框

1.前端有哪几个层面组成?作用是什么?

2.从前端出发做好SEO需要考虑什么?

3.浏览器cookie的理解?

时间: 2025-01-02 15:49:30

web典型理论题整理HTML+CSS部分的相关文章

web典型理论题整理JS部分

1.JS的两大支柱函数式编程和基于原型的面向对象编程2.什么是闭包?作用和好处是什么?与普通函数的区别?闭包:由外部定义的内部函数,有权访问另一个函数作用域中的变量.闭包的作用和好处:闭包给访问外部函数定义的内部变量创造了条件.也将关于函数的一切封闭到了函数内部,减少了全局变量.与普通函数的区别:普通函数也能曝光内部的值,但是占用的内存无法释放且函数使用的变量定义到了函数外部不便于理解和管理. 函数每次执行时都会且只会初始化其内部变量,导致了闭包与普通函数的最大区别. 每次调用普通函数时他内部都

web前端大神整理:CSS 布局经典问题

本文来自前端大神的整理,主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等. CSS 基础知识 下面几个入门教程不错: 幕课网 – HTML+CSS基础课程:偏基础,可以在线练习和预览 MDN – CSS入门教程: MDN 的官方文档 学习 CSS 布局:排版和配色特别舒服,简短但不深入,适合概览入门 CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布

Web自动化测试理论知识

Web 自动化理论知识 1.自动化测试概述概念:用工具代替/辅助人工完成完成软件测试活动的过程特点:    可以对程序的新版本自动执行回归测试    可以执行一些手工测试困难或不可能进行的测试    可以更好地利用资源    测试具有一致性和可重复性误区:    期望自动化测试发现大量新故障    安全性错觉    自动化测试的维护开销 2.自动化测试的优势重复多次执行测试时节省很多时间提高测试覆盖率和测试精度实现自动化回归测试减少工作量减少手工测试人为产生的错误 提供规范化的过程和一致性更好的

linux 基础题整理

基础题: 1.查看系统内核版本号及系统名称 2.查看smb服务所用的端口号 3.禁ping 4.查出22端口现在运行什么程序 5.登录提示符前的输出信息"you are welcome!!!" 6.成功登录后自动输出信息"距离全国比赛还剩1天!!!" 7.确认安全终端为tty1 8.取消普通用户的控制台访问的三个权限:reboot.halt.shutdown 9.只允许组ID为10的成员通过su命令改变为root用户 10.禁止Control-Alt-Delete键

web典型应用

关于web 典型应用; 此处是以传智的论坛为模板写的项目;具有注册用户,登录,发帖,回复等功能; 第一个功能的实现:用户的注册 先是创建MySQL数据表: 1 create table user( 2 user_id int unsigned primary key auto_increment comment '主键ID', 3 user_name varchar(20) not null unique key comment '用户名', 4 user_password char(32) n

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

web移动开发最佳实践之 css篇

web移动开发最佳实践之 css篇 一.css概述 css即层叠样式表(Cascading Style Sheets),它的作用主要是控制页面元素的样式,包括布局.颜色.字体.字号.空白.边框.属性等等.css的出现使得html的内容和样式分离,极大的提高了工作效率. 目前最新的标准是css3,下面几节将介绍在使用css过程中应遵循的最佳实践方案. 二.使用高效的css选择器 欲创建一个高效的web应用,你要了解浏览器是如何读取你的web页面并呈现出来的.当浏览器读取你的html文档时,它首先对

【转】手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献给大家. 作者:佚名来源: 68design | 2013-09-04 11:02 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport"

web移动开发最佳实践之 css篇 ——转

 web移动开发最佳实践之 css篇 一.css概述 css即层叠样式表(Cascading Style Sheets),它的作用主要是控制页面元素的样式,包括布局.颜色.字体.字号.空白.边框.属性等等.css的出现使得html的内容和样式分离,极大的提高了工作效率. 目前最新的标准是css3,下面几节将介绍在使用css过程中应遵循的最佳实践方案. 二.使用高效的css选择器 欲创建一个高效的web应用,你要了解浏览器是如何读取你的web页面并呈现出来的.当浏览器读取你的html文档时,它首先