HTML

HTML

HTML5 中的一些有趣的新特性:

语义化标签,如:article、footer、header、nav等

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素,比如 article、footer、header、nav、section

新的表单控件,比如 calendar、date、time、email、url、search

拖拽释放

HTML 中 href、src 区别

href 是 Hypertext Reference 的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为 css 文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用 link,而不采用 @import 加载 css 的原因。 src 是 source 的缩写,src 的内容是页面必不可少的一部分,是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。例如:

<script src="script.js"></script>

当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

简而言之,src 用于替换当前元素;href 用于在当前文档和引用资源之间建立联系。

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?

title 属性表示网页的标题,h1 元素则表示层次明确的页面内容标题,对页面信息的抓取也有很大的影响
strong 是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:strong会重读,而b是展示强调内容
i 是italic(斜体)的简写,是早期的斜体元素,表示内容展示为斜体,而 em 是emphasize(强调)的简写,表示强调的文本

前端页面有哪三层构成,分别是什么?

结构层(structural layer)

结构层类似于盖房子需要打地基以及房子的悬梁框架,它是由HTML超文本标记语言来创建的,也就是页面中的各种标签,在结构层中保存了用户可以看到的所有内容,比如说:一段文字、一张图片、一段视频等等

表示层(presentation layer)

表示层是由CSS负责创建,它的作用是如何显示有关内容,学名:层叠样式表,也就相当于装修房子,看你要什么风格的,田园的、中式的、地中海的,总之CSS都能办妥

行为层(behaviorlayer)

行为层表示网页内容跟用户之间产生交互性,简单来说就是用户操作了网页,网页给用户一个反馈,这是JavaScript和DOM主宰的领域

iframe的作用以及优缺点

frame也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入到现有的网页中。

优点:

可以用来处理加载缓慢的内容,比如:广告
缺点:

iframe会阻塞主页面的Onload事件
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题,当然也可以解决iframe会阻塞主页面的Onload事件的问题
会产生很多页面,不易管理
浏览器的后退按钮没有作用
无法被一些搜索引擎识别

H5和HTML5区别

H5是一个产品名词,包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
HTML5是一个技术名词,指的就是第五代HTM

label的作用是什么?是怎么用的?

label元素不会向用户呈现任何特殊效果,但是,它为鼠标用户改进了可用性,当我们在label元素内点击文本时就会触发此控件。也就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。最常用label的地方就是表单中的性别单选框了,当点击文字时也能够自动聚焦绑定的表单控件
<form>
     <label for="male">男</label>
     <input type="radio" name="sex" id="male">
     <label for="female">女</label>
     <input type="radio" name="sex" id="female">
</form>

对于Web标准以及W3C的理解

Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成,简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表,通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互,这部分主要由JS组成

W3C,全称:world wide web consortium是一个制定各种标准的非盈利性组织,也叫万维网联盟,标准包括HTML、CSS、ECMAScript等等,web标准的制定有很多好处,比如说:

可以统一开发流程,统一使用标准化开发工具(VSCode、WebStorm、Sublime),方便多人协作
学习成本降低,只需要学习标准就行,否则就要学习各个浏览器厂商标准
跨平台,方便迁移都不同设备
降低代码维护成本

Quirks(怪癖)模式是什么?它和Standards(标准)有什么区别?

页面如果写了DTD,就意味着这个页面采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式,这就是Quirks模式,有时候也叫怪癖模式、诡异模式、怪异模式。

区别:总体会有布局、样式解析、脚本执行三个方面区别,这里列举一些比较常见的区别:

盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,然而在Quirks模式下,IE的宽度和高度还包含了padding和border
设置行内元素的高宽:在Standards模式下,给行内元素设置width和height都不会生效,而在Quriks模式下会生效
用margin:0 auto设置水平居中:在Standards模式下,设置margin:0 auto;可以使元素水平居中,但是在Quriks模式下失效
设置百分比高度:在Standards模式下,元素的高度是由包含的内容决定的,如果父元素没有设置百分比的高度,子元素设置百分比的高度是无效的

a元素除了用于导航外,还有什么作用?

href属性中的url可以是浏览器支持的任何协议,所以a标签可以用来手机拨号<a href="tel:110">110</a>,也可以用来发送短信<a href="sms:110">110</a>,还有邮件等等

当然,a元素最常见的就是用来做锚点和 下载文件。

锚点可以在点击时快速定位到一个页面的某个位置,而下载的原理在于a标签所对应的资源浏览器无法解析,于是浏览器会选择将其下载下来。

你知道SEO中的TDK吗?

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

推荐阅读更多精彩内容

  • CSS复习巩固 1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 1. IE: trident内核2...
    雪落丶阅读 232评论 0 2
  • 一、HTML 简介 标签解析 1、<!DOCTYPE html> 声明为 HTML5 文档2、 元素是 HTML...
    刘松阳阅读 259评论 0 0
  • HTML篇 HTML基础 1、HTML不是编程语言,只是一种超文本标记语言 2、HTML文档也叫作web页面 3、...
    FIRE_e6f4阅读 20评论 0 0
  • 1.vue和react的区别 相似之处: (1).他们都专注于创造前端的富应用,react和vue都只有骨架,其它...
    Giann阅读 341评论 0 0
  • 1.在标准的 JavaScript 中, Ajax 异步执行调用基于下面哪一个机制才能实现? Event和call...
    开心糖果的夏天阅读 3,104评论 0 3