听说这是不太难的html面试题耶~

★   1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

          IE浏览器(trident内核)、火狐浏览器(gecko内核)、Opear浏览器(Blink内核)、Safair,Chrome(Webkit内核)


★   2. 对WEB标准以及W3C的理解与认识

        标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;


★   3.什么是DOCTYPE?严格模式与混杂模式如何区分?如何触发这两种模式?两者的意义在哪里?

      1)DOCTYPE的含义(document type)

            翻译过来是“文档类型”。是用来指定HTML的版本,告诉浏览器按照何种规范解析页面,(但是也必须注意在声明的时候要使用W3C发布的文档类型定义中的规则)。

      2)严格模式与混杂模式区分标准

           严格模式:是浏览器根据web标准去解析页面,是一种要求严格的DTD(Document Type Definition);

           混杂模式:是一种向后兼容的解析方法,简单来说就是实现IE5.5以下版本浏览器的渲染模式。

     3)触发两种模式的方法

           触发严格模式很简单,就是建立网页,声明正确的DTD即可;

           触发混杂模式可以以下几种方式:

                  *     不写<!DOCTYPE html>

                  *     <!DOCTYPE html>前面加上xml声明  <?xml version="1.0" encoding="utf-8"?> (IE6)   

                  *     <!DOCTYPE html> 和<?xml version="1.0" encoding="utf-8"?>之间加了(标签、文本、注释)(ie8以下都有,ie9以上未测)

                  *     前面有(标签、文本、注释)(ie8以下都有,ie9以上未测)

    4)区分严格模式和混杂模式的意义在哪里?

           盒模型的解析:混杂模式下会按照IE5.5的盒模型解析。而标准模式是按标准的盒模型解析。

           当一个块元素div中包含的内容只有图片时,在标准模式下,不管IE还是标准,在图片底部都有3像素的空白。但在混杂模式下,标准浏览器(Chrome)中div距图片底部默认没有空白。

          在混杂模式下,表格中的字体不会继承它祖先元素(比如body,比如包含table的div)的字体样式

          在IE的混杂模式下,给inline元素设置高宽都有效。

          overflow溢出默认值的问题。标准模式下,溢出元素是溢出可见的,超出部分的内容呈现在它的包含元素外。在混杂模式下,IE浏览器的溢出元素会自适应内容的尺寸。


★  4.前端页面有哪三层构成?

      结构层:HTML

     表现层:CSS

     行为层:JS


★  5.img的alt与title有何异同?strong与em的异同?

       Alt:是在图片,窗体或用户代理不能显示的时候,用来指定替换文字,(在IE浏览器下回在没有title时把alt当成tool tip显示)

       title(tool tip)是为设置该属性的元素的建议性信息。

       strong:粗体敲掉标签,强调,表示内容的重要性

       em:斜体强调标签,更强烈情调,表示内容的强调点


★  6.简述一下src与href的区别。

       src:用于替换当前元素,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在的位置;比如js脚本,img图片等。。

       href:指向网络资源所在的位置,用于在当前文档和引用资源之间确立联系例如link或者a标签中都会有href属性;


★  7.知道的网页制作需要用到的格式

       png-8    png—24    jpeg    gif    svg

     但是面试官希望听到的是Webp

       Webp:谷歌开发的一种加快图片加载速度的图片格式。能够节省大量的服务器带宽资源和数据空间。在质量相同的情况下,Webp格式图像的体积要比jpeg格式图像小40%;


★  8.你如何理解HTML结构的语义化?

        标签语义化是指根据内容的结构化,选择合适的标签

        标签语义化的意义:

           *    会使网页结构合理

           *    有利于SEO和搜索引擎建立良好沟通,有了良好的结构和语义,我们的网页内容自然容易被搜索引擎抓取;

          *     方便其他设备解析,比如屏幕阅读器,盲人阅读器,移动设备

          *     便于团队开发和维护


★  9.谈谈以前端角度出发做好SEO需要考虑什么?

          1)SEO的含义(搜索引擎优化”)

              是指通过站内优化比如网站结构调整、网站内容建设,网站代码优化等以及站外优化比如网站站外推广、网站品牌建设等,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名,从而吸引精准用户进入网站,获得免费流量,产生直接销售或品牌推广。

              需要知道一些搜索引擎的基本工作原理,各个搜索引擎之间的区别,搜索机器人(SE robot)如何进行工作,搜素引擎如何对搜索结果进行排序等

          2)Meta标签

             主要包括主题(Title),网站描述(Description),和关键词(Keywords)。还有一些其它的隐藏文字比如Author(作者),Category(目录),Language(编码语种)等。

          3)如何选取关键词并在网页中放置关键词

             搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词(一般在5个上下),然后针对这些关键词进行优化,包括关键词密度(Density),相关度(Relavancy),突出性(Prominency)等等。

          4)了解主要的搜索引擎

             虽然搜索引擎有很多,但是对网站流量起决定作用的就那么几个。比如英文的主要有Google,Yahoo,Bing等;中文的有百度,搜狗,有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系,比如AOL网页搜索用的是Google的搜索技术,MSN用的是Bing的技术。

          5)主要的互联网目录

              Open Directory自身不是搜索引擎,而是一个大型的网站目录,他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的,主要收录网站主页;搜索引擎是自动收集的,除了主页外还抓取大量的内容页面。

          6)按点击付费的搜索引擎

             搜索引擎也需要生存,随着互联网商务的越来越成熟,收费的搜索引擎也开始大行其道。最典型的有Overture和百度,当然也包括Google的广告项目Google Adwords。所有有必要学会用最少的广告投入获得最多的点击。

          7)搜索引擎登录

             网站做完了以后,别躺在那里等着客人从天而降。要让别人找到你,最简单的办法就是将网站提交(submit)到搜索引擎。如果你的是商业网站,主要的搜索引擎和目录都会要求你付费来获得收录(比如Yahoo要299美元),但是好消息是(至少到目前为止)最大的搜索引擎Google目前还是免费,而且它主宰着60%以上的搜索市场。

          8)链接交换和链接广泛度(Link Popularity)

             网页内容都是以超文本(Hypertext)的方式来互相链接的,网站之间也是如此。除了搜索引擎以外,人们也每天通过不同网站之间的链接来Surfing(“冲浪”)。其它网站到你的网站的链接越多,你也就会获得更多的访问量。更重要的是,你的网站的外部链接数越多,会被搜索引擎认为它的重要性越大,从而给你更高的排名。

          9)合理的标签使用


★  10.请谈一下你对网页标准和标准制定机构重要性的理解。

        网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。


                                        我是华丽丽的分割线                                                    ~晚安~


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,866评论 1 11
  • 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索...
    翻滚吧海阔天空阅读 3,990评论 5 14
  • 拿上一本书,静静的,端坐于马桶之上。 必须说,这个时段的效率高于很多正经八百的阅读时间。 皱眉中感受作者的用意,欢...
    心若止观阅读 215评论 8 2
  • 在一般的项目开发中,我们又是会用到二维码的展示,那么为了提高用户体验度,我们希望在打开二维码时,屏幕变最亮,退出当...
    奔跑的佩恩阅读 3,681评论 0 5