达内广州C++学院|c++培训|广州达内科技C++/C#培训|.NET培训|IT培训|达内广州岗顶中心 达内广州C++学院|c++培训|广州达内科技C++/C#培训|.NET培训|IT培训|达内广州岗顶中心
PHP互联网工程师
 当前位置:主页 > 高端课程 > PHP互联网工程师 >

php中文网线上班前端(HTML5/CSS3)测试题

时间:2019-11-08  来源:未知  作者:广州达内培训


前端测试题(HTML5/CSS3)参考答案

● 每题5分,共20题, 总分100

● 选做题, 做错不扣分, 做到+10分

快动手看看自己能考多少吧!


1. HTML5部分

1.1 HTML5常用的结构标签有哪些,它替代了之前哪些标签

● <header>,<nav>,<main>,<article>, <aside>,<footer>,<section>

● <div class="header">,<div class="nav">,<div class="main">,...

1.2 HTML文档采用UTF-8编码集的优势是什么

● utf-8: 使用3个字节表示一个符号, 基本上可以覆盖世界上所有语言

● 与传统的gb2312,gbk相比, 可识别的字符集更多, 也是行业界推荐

1.3 标签中最常用的四大属性是什么

● id, class, title, style

● 这四个属性,几乎每个html标签都会有, 需要特别关注

1.4 标签中的title与alt属性的区别是什么

● title: 是标签的描述, 当鼠标移入时,稍等会出现这个描述信息

● alt: 用在可置换元素上, 当外部资源无法正确加载时, 这个信息会显示在该占位符上

1.5 标签中的href 与 src属性有什么区别

● 二者都是对外部资源的引用

● href: 用于超文本或样式,用在<link>和<a>标签上

● src: 用在外部资源占位标签上,如<img>,<iframe>,<script>,<video>...

1.6 什么是置换元素和非置换元素,每种类型至少举出二个案例

● 置换元素的内容来自外部, 该元素仅是外部资源的占位符,如<img>,<video>,<audio>...

● 非置换元素内容来自当前文档,必须使用双标签,如<p>, <h1> - <h6>, <ul>...

1.7 iframe标签主要功能是什么, 有什么优缺点

● 优点: 当前页面,直接加载其它页面, 而不必发生跳转

● 缺点: 框架中的内容不会被搜索引擎读取, 且会增加过多的HTTP请求,影响页面载入速度

1.8 <form>标签中的name属性与表单控件,如<input>中的name有何不同

● <form>中的name属性, 与它的id是一样的,用来唯一标识该标签

● 表单控件中的name属性, 是提供给服务器端应用程序读到表单数据的变量名

1.9 表单中的按钮有几种, 常用的标签有哪几个

● 按钮有三种: 普通按钮, 提交按钮, 重置按钮

● <input type="button">,<input type="submit">,<input type="rest",<button>

1.10 无序列表与有序列表是否可以互相替代, 使用的属性是什么

● type

1.11 表单数据的提交方式有几种, 分析使用场景(选做)

● POST: 表单数据通过请求体发送

● GET: 表单数据通过URL地址栏发送


2. CSS3部分

2.1 外部样式表,内部样式表,行内样式声明各自的使用场景是什么

● 外部样式表: 适于所有引用该CSS的HTML文档

● 内部样式表: 仅适用于当前HTML文档

● 行内样式表: 仅适用于当前HTML元素

2.1 @import指令有什么用处, 应该用在哪里, 有哪些限制

● 仅允许用在 CSS 文档中

● 必须位于 CSS 文档的首行

2.3 什么是块级元素, 行内元素, 行内块元素, 并举例

● 块级元素: 默认垂直排列,如<div>,<table>,<ul>...

● 行内元素: 默认水平排列, 如<span>,<a>, <input>...

2.4 简单选择器有几种, 写出基本语法形式

● 元素: body {...}

● ID: #active {...}

● 类: .red {...}

● 属性: [title]

● 群组: h1,h2,h3 {...}

● 通配: div * {...}

2.5 结构(上下文)选择器有几种, 并举例说明

● 后代: main div {...}

● 子元素: section > span {...}

● 同级相邻: div + p {...}

● 同级所有: div ~ p {...}

2.6 :nth-child(n)和:nth-of-type(n)

● :nth-child(n): 只与位置关联

● :nth-of-type(n): 与位置和类型均关联

2.7 :nth-child(n)和:nth-of-type(n)中的参数n的使用规则

● 用在字面量中, 从1开始, 如: :nth-child(3)

● 用在表达式中, 从0开始, 如: :nth-child(2n+1)

● 允许负值

2.8 弹性盒子(FlexBox)解决CSS中的布局中的什么问题,最适合用在哪里

● 解决了传统布局中的元素垂直对齐, 以及响应式布局的问题

● 主要用于跨设备的页面布局,特别适合响应式,如移动端

2.9 弹性元素flex属性的常用值,与对应的值组合有哪些,并一一说明

● initial,auto, content, 数值

● 默认值: flex: 0 1 auto

● flex: flex-grow flex-shrink flex-basis

● 各种组合,如flex: 1 1 auto; 等价于: flex: auto,...

2.10 vh/vw单位,与auto, 100%有什么区别

● vh/vw: 视口大小占比, 与设备相关

● auto: 为默认值, 通常与设备无关

● 100%: 自知识父容器大小

2.11 (选做)为什么align-content只能用在多行弹性容器中

● 单行容器中, 交叉轴上可使用align-items属性设置


上一篇:PHP成立25周年:看看大佬们对PHP都有哪些评价
下一篇:没有了

友情链接:
  • 全球最大晶圆代工半导体制造厂,台积电斥资订购艾斯摩尔机器设备
  • 英特尔依然是那个英特尔,且看英特尔的城防体系
  • 支持双 DRAM 内存接口,慧荣企业级 SSD 主控方案披露
  • 在全球被反垄断罚款,冤!高通到底哪里得罪了欧盟?
  • 强强联合!万业、微电子所和芯鑫共同打造全新半导体设备
  • 复旦大学校长称:对于集成电路产业发展,大学应该主动担当
  • 技术再升级!无锡中科芯攻克晶圆级再布线及晶圆级凸点制备关键技
  • 聚力!万业企业设立集成电路装备集团,提供自主可控设备
  • 德州仪器C2000微控制器增强连通性和控制性
  • 英特尔打出降价策略,以免被竞争对手 AMD 打败?
  • 贸易摩擦的闹剧没有赢家,苹果有勇气离开中国吗?
  • 图像信号与视觉处理器的发展趋势
  • 真干快消品定位方案班(第二期)火热开班
  • Java集合 ArrayList原理及使用
  • TDD(测试驱动开发)死了吗?
  • JAVA基础之XML相关
  • javaweb项目搭建ehcache缓存系统
  • 每日一码——字符串统计
  • 一篇文章帮你彻底搞清楚“I/O多路复用”和“异步I/O”的前世今生
  • 九:模板方法模式
  • 十二:命令模式(人员解耦和)
  • Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转
  • SpringCloud学习(SPRINGCLOUD微服务实战)一
  • 记一次微信网页授权后获取用户信息并重定向
  • 速途新营销五点实战洞察解码“品效合一”
  • 十一:外观模式详解(Service,action与dao)
  • 手把手教你学会 基于JWT的单点登录
  • mysql锁机制总结,以及优化建议
  • 解决多个版本jar包冲突【jar内包名重命名】
  • 中国首张5G终端电信设备进网许可证 华为Mate 20 X 5G版入网
  • RPC之Thrift
  • 高级Java工程师必备 ----
  • 天猫618期间实物支付GMV增长38.5%
  • 换季了,老板你的库存处理好了吗?
  • 从“618”大数据看中国消费新活力
  • 小米生态链:贵在格局感与收放度
  • CODING 2.0 企业级持续交付解决方案
  • 老铁奇趴“新京济” 快手*京东618战报出炉
  • 中小企业新媒体运营基本技能
  • 上汽大通房车再度携手LINE FRIENDS 魔都巡游顺利开启
  • 华为高端手机国内市场份额超苹果夺得榜首
  • 中国智能制造分析报告
  • iPlus艾加营销助力腾讯广告牵手吴晓波 推进商业IP变现
  • 2019世界新能源汽车大会7月1日将在海南举行
  • 区域酒企如何转型突围
  • 时时彩论坛
  • 五星体育斯诺克
  • 北单比分直播
  • 河北11选5走势图
  • 福建体彩36选7开奖结果
  • 九龙图库下载