User-Profile-Image
hankin
  • 5
  • 首页
  • 仓库
  • 留言
  • 免费下载v1.3.5
  • 分类
    • Yii2
    • wordpress
    • typeecho
    • server
    • qrcode
    • postgresql
    • php
    • jquery
    • javascript
    • html5
    • go
    • css3
    • coding
  • 页面
    • icon图标
    • 专题
    • 建站维护
    • 留言
    • 站点地图
  • 友链
    • 老赵茶馆
    • 淮城一只猫
    • 雨林寒舍
    • 饼子的博客
    • 轩枫阁
    • 广告联盟大事记
    • 主题笔记
    • 八方博客
    • 张维龙的个人博客
    • 瑞课学院
    • BBJ不败君
    • 悠悠吧
    • Heanny Blog
    • 资源谷
    • Yolen
Help?

Please contact us on our email for need any support

Support
    首页   ›   正文
php

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

2020-04-17 10:16:21
505  0 0

前端测试题(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属性设置
    更多面试题,请参考:《2019年大前端面试题汇总(收藏)》

微信
分享

相关标签:前端

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

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

下一篇:即将发布的PHP 7.4和PHP 8.0:说说你希望增加哪些功能?

如本文“对您有用”,欢迎随意打赏作者,让我们坚持创作!

0 打赏
hankin
smarty_hankin主题 持续为开发者免费开源!
143文章 290评论 760点赞 192761浏览

关注公众号 回复【下载主题】
加QQ群1018841266
最新评论
+207
随机文章
Yii2 查询
3年前
php中文网一份年终汇报
1年前
手写抓取单个微信公众号的全部文章列表
1年前
Github 2020年3月点赞最多的10个PHP项目
1年前
php语言入门教程(PHP编程学习路线图)
1年前
我的作品




tags
css3 html5 javascript php postgresql qrcode typeecho wordpress wordpress主题 Yii2
Copyright © 2021 网站备案号: 浙ICP备20002401号
smarty_hankin 主题. Designed by hankin
主页
页面
  • icon图标
  • 专题
  • 建站维护
  • 留言
  • 站点地图
博主
hankin
hankin 管理员
博客模板_网站模板_HTML模板_博客模板网站免费下载
143 文章 290 评论 192761 浏览
测试
测试
赞赏作者

请通过微信、支付宝 APP 扫一扫

感谢您对作者的支持!

 支付宝 微信支付