前端关于html的面试题,关于java:前端面试HTML面试题汇总
前端面试—HTML面试题汇总
博客阐明
文章所波及的材料来自互联网整顿和集体总结,意在于集体学习和教训汇总,如有什么中央侵权,请分割自己删除,谢谢!
1、语义化
为什么要语义化?
a. 为了在没有CSS的状况下,页面也能呈现出很好地内容构造、代码构造:为了裸奔时难看;
b. 用户体验:例如title、alt用于解释名词或解释图片信息的标签尽量填写有含意的词语、label标签的活用;
c. 有利于SEO:和搜索引擎建设良好沟通,有助于爬虫抓取更多的无效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
d. 不便其余设施解析(如屏幕阅读器、盲人阅读器、挪动设施)以有意义的形式来渲染网页;
e. 便于团队开发和保护,语义化更具可读性,遵循W3C规范的团队都遵循这个规范,能够缩小差异化。
2. 写HTML代码时,应留神什么?
尽可能少的应用无语义的标签div和span;
在语义不显著时,既能够应用div或者p时,尽量用p, 因为p在默认状况下有高低间距,对兼容非凡终端无利;
不要应用纯款式标签,如:b、font、u等,改用css设置。
须要强调的文本,能够蕴含在strong或em标签中,strong默认款式是加粗(不要用b),em是斜体(不要用i);
应用表格时,题目要用caption,表头用thead,主体局部用tbody突围,尾部用tfoot突围。表头和个别单元格要辨别开,表头用th,单元格用td;
表单域要用fieldset标签包起来,并用legend标签阐明表单的用处
每个input标签对应的阐明文本都须要应用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让阐明文本和绝对应的input关联起来。
补充一点:不仅写html构造时,要用语义化标签,给元素写css类名时,也要遵循语义化准则,不要,轻易起个名字就用,那样等当前,再重构时,十分难读。最禁忌的是不会英文,用汉语拼音代替。别那么LOW 。
HTML5新增了哪些语义化标签?
1、header元素
header元素代表“网页“和”section”的页眉。通常蕴含H1~H6元素或者hgroup元素。作为整个页面或者内容块的题目,也能够包裹一节的目录局部,一个搜寻框,一个nav,或者任何相干logo。整个页面没有限度header元素的个数,能够领有多个,能够为每个内容块减少一个header元素
header应用留神:
能够是“网页”或任意“section”的头部局部;
没有个数限度。
如果hgroup或h1-h6本人就能工作的很好,那就不要用header。
2、footer元素
footer元素代表“网页”或“section”的页脚,通常含有该页面的一些根本信息,例如:文档创作者的姓名、文档的版权信息、应用条款的链接、分割信息等等。。
footer应用留神:
能够是“网页”或任意“section”的底部局部;
没有个数限度,除了包裹的内容不一样,其余跟header相似。
3、hgroup元素
hgroup元素代表“网页”或“section”的题目,当元素有多个层级时,该元素能够将h1到h6元素放在其内,譬如文章的主题目和副标题的组合
hgroup应用留神:
如果只须要一个h1-h6标签就不必hgroup
如果有间断多个h1-h6标签就用hgroup
如果有间断多个题目和其余文章数据,h1-h6标签就用hgroup包住,和其余文章元数据一起放入header标签
4、nav元素
nav元素代表页面的导航链接区域。用于定义页面的次要导航局部。然而我在有些时候却不由自主的想用它,譬如:侧边栏上目录,面包屑导航,搜寻款式,或者下一篇上一篇文章,然而事实上标准上说nav只能用在页面次要导航局部上。页脚区域中的链接列表,尽管指向不同网站的不同区域,譬如服务条款,版权页等,这些footer元素就可能用了。
nav应用留神:
用在整个页面次要导航局部上,不适合就不要用nav元素;
5、aside元素
aside元素被蕴含在article元素中作为次要内容的从属信息局部,其中的内容能够是与以后文章无关的相干材料、标签、名词解释等。(非凡的section)
在article元素之外应用作为页面或站点全局的从属信息局部。最典型的是侧边栏,其中的内容能够是日志串连,其余组的导航,甚至广告,这些内容相干的页面。
aside应用总结:
aside在article内示意次要内容的从属信息,
在article之外则可做侧边栏,没有article与之对应,最好不必。
如果是广告,其余日志链接或者其余分类导航也能够用
6、article元素
article元素最容易跟section和div容易混同,其实article代表一个在文档,页面或者网站中自成一体的内容,其目标是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(非凡的section)
除了它的内容,article会有一个题目(通常会在header里),会有一个footer页脚。
article应用留神:
本身独立的状况下:用article
是相干内容:用section
没有语义的:用div
HTML5的十大新个性
(1)语义标签
(2)增强型表单
(3)视频和音频
4)Canvas绘图
(5)SVG绘图
(6)天文定位 Geolocation
(7)拖放API
(8)Web Worker
(9)Web Storage
(10)WebSocket
input与textarea的区别
input是单行文本框,不会换行。通过size属性指定显示字符的长度,留神:当应用css限定了宽高,那么size属性就不再起作用。value属性指定初始值,Maxlength属性指定文本框能够输出的最长长度。能够通过width和height设置宽高,然而也不会减少行数。
textarea 是多行文本输入框,文本区中可包容有限数量的文本,无value属性,其中的文本的默认字体是等宽字体(通常是 Courier) ,能够通 过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的方法是应用 CSS 的 height 和 width 属性。
用div模仿textarea
在div标签外面退出contenteditable=”true”
.textarea{
min-height: 100px;
border: 1px solid #a0b3d6;
width: 300px;
font-size: 14px;
max-height: 300px;
overflow-y: auto;
}
感激
万能的网络
以及勤奋的本人,集体博客,GitHub
前端关于html的面试题,关于java:前端面试HTML面试题汇总相关推荐
- 博学谷java题库判断_博学谷Java开发面试基础笔试题及答案分享
博学谷Java开发面试基础笔试题分享:char 型变量中能不能存贮一个中文汉字?为什么?"=="和 equals 方法究竟有什么区别?静态变量和实例变量的区别?是否可以从一个 st ...
- Java基础面试题,java初级面试笔试题
我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家. 扫描二维码或搜索下图红色VX号,加VX好友,拉你进[程序员面试学习交流群]免费领取.也欢迎各位一起 ...
- 记 随手科技2020届实习生笔试题(Java开发工程师)笔试题
2020届实习生笔试题(Java开发工程师) 一.选择题(共6题,每小题5分,满分30分) 1 2 3 4 5 6 总分 B B A C B C 1.下列排序算法中,初始数据集合对排序性能无影响的是( ...
- JAVA基础面试题,java高级面试笔试题
我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家. 扫描二维码或搜索下图红色VX号,加VX好友,拉你进[程序员面试学习交流群]免费领取.也欢迎各位一起 ...
- Java 基础面试题,java基础面试笔试题
我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家. 扫描二维码或搜索下图红色VX号,加VX好友,拉你进[程序员面试学习交流群]免费领取.也欢迎各位一起 ...
- 2021年Java大厂面试必备面试题
对java面试而言,面试前的准备一定要有面试题收集和学习这一项,因为在招聘公司看来,对java工程师职位的最大关注就是专业知识和技能水平的考察,所以程序员去公司面试,无论怎样都要先做一套面试题.对于不 ...
- 【面试题】Java 高级工程师面试刷题100题(二)
文章目录 如何理解 springboot 中的 starter? 什么是嵌入式服务器,为什么使用嵌入式服务器? mybatis 的优缺点有哪些? mybatis 和 hibernate 有什么区别? ...
- 银行系统java实施面试_Java7K面试题—银行业务调度系统
先前也没搞清银行业务调度系统是怎么回事,也是看了张孝祥老师的视频并照着写出的代码,执行时发现结果并不是自己想象的那样.自己的预想为:倘若某普通窗口先于另一个普通窗口服务完客户,那么该窗口必然先于另一个 ...
- Java初级面试常见面试题
文章目录 JavaSE Java基本数据类型大小 JAVA中&&和||两种符号 抽象类不能创建对象,那么抽象类中是否有构造器 抽象类是否可以被final修饰 抽象方法可否被static ...
最新文章
- Java培训深度学习都要学什么
- IOS开发之----异常处理
- java integer 不变模式_Java代码的变与不变
- 抢票 | AI未来说学术论坛第八期 深度学习特别专场
- VTK:Utilities之SaveSceneToFile
- 添加WCF服务引用失败解决办法
- 云+X案例展 | 民生类:必创科技助力打造智慧城市
- Eclipse之Project facet Java version 1.8 is not supported.
- Spring Boot + JPA + Oracle 自增长字段实现示例
- 以太坊的POS共识机制(一)友善的小精灵 Casper
- 侯捷 - C++ Startup 揭密:C++ 程序的生前和死后 (二)
- 微信开发者工具登录问题,网络连接失败
- Scratch编程学习的好处
- s905各种型号的区别_工具柜规格型号
- 车载多媒体 android play,先锋推新款车载多媒体设备 支持Android Auto
- VerilogA学习 - VCO demo 合集
- 上海 程序员落户攻略
- win10计算机怎么连接网络,如何创建宽带连接_win10电脑宽带连接怎么创建 - 驱动管家...
- 激光雷达和相机的联合标定
- js 比较两个字符串形式的时间的大小
热门文章
- Git开发错了分支,利用git的暂存完成代码转移到正确的分支
- 怎么卡我的世界服务器物品,我的世界手机版卡BUG刷物品方法攻略
- sysbench mysql 测试_sysbench MySQL测试例子
- android通知背景色,android – 更改通知RemoteViews背景颜色
- php 在模板中赋值数组变量,PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例...
- 易语言下载别人的源码编译出来用不了_我是如何阅读源码的
- keil5调试如何选择晶振_答题攻略:晶振电路问题解答及国庆中秋放假通知
- Spring Cloud OAuth2 实现用户认证及单点登录
- Springboot下使用WebSocket和浏览器进行长连接通信
- springboot 使用mybatis-plus 配置乐观锁