day1
[html] 页面导入样式时，使用link和@import有什么区别？
import的写法
link的写法
区别
1. 来源：link属于XHTML标签，import是CSS提供的方式。link方式除了CSS，还可以定义RSS，定义rel连接属性等，而import只能加载CSS。
2. 顺序：link是页面加载时同时执行的，而import是在页面加载完之后，才会执行的（所以容易导致样式闪烁，即开始页面没有样式，突然会闪烁一下，然后就有了样式）
3. js控制的差别：当页面需要使用javascript控制dom改变样式的时候，只能使用link标签，因为import不是js操作dom可以控制的。也不支持js操作dom来控制。
[html] html的元素有哪些（包含H5）？
章节节
<body>代表 HTML 文档的内容。在文档中只能有一个 <body> 元素。
<section> 这个元素在 HTML5 中加入 定义文档中的一个章节。
<nav> 这个元素在 HTML5 中加入 定义只包含导航链接的章节。
<article> 这个元素在 HTML5 中加入 定义可以独立于内容其余部分的完整独立内容块。
<aside> 这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 标题元素实现了六层文档标题，<h1> 是最大的标题，<h6> 是最小的标题。标题元素简要地描述章节的主题。
<header> 这个元素在 HTML5 中加入 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
<footer> 这个元素在 HTML5 中加入 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
<address> 定义包含联系信息的一个章节。
<main>这个元素在 HTML5 中加入 定义文档中主要或重要的内容。
组织内容节
<hr> 代表章节、文章或其他长内容中段落之间的分隔符。
<pre> 代表其内容已经预先排版过，格式应当保留 。
<blockquote> 代表引用自其他来源的内容。
<ol> 定义一个有序列表。
<ul> 定义一个无序列表。
<li> 定义列表中的一个列表项。
<dl> 定义一个定义列表（一系列术语和其定义）。
<dt> 代表一个由下一个 <dd> 定义的术语。
<dd> 代表出现在它之前术语的定义。
<figure> 这个元素在 HTML5 中加入 代表一个和文档有关的图例。
<figcaption> 这个元素在 HTML5 中加入 代表一个图例的说明。
<div> 代表一个通用的容器，没有特殊含义。
文字形式节
<em> 代表强调 文字。
<strong> 代表特别重要 文字。
<small> 代表注释 ，如免责声明、版权声明等，对理解文档不重要。
<s> 代表不准确或不相关 的内容。
<cite> 代表作品标题 。
<q> 代表内联的引用 。
<dfn> 代表一个术语包含在其最近祖先内容中的定义 。
<abbr> 代表省略 或缩写 ，其完整内容在 title 属性中。
<data> 这个元素在 HTML5 中加入 关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。
<time> 这个元素在 HTML5 中加入 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。
<code> 代表计算机代码 。
<var> 代表代码中的变量 。
<samp> 代表程序或电脑的输出 。
<kbd> 代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。
<sub>,<sup> 分别代表下标 和上标 。
<i> 代表一段不同性质 的文字，如技术术语、外文短语等。
<b> 代表一段需要被关注 的文字。
<u> 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。
<mark> 这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
<ruby> 这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本，如中文汉字和它的拼音。
<rt> 这个元素在 HTML5 中加入 代表ruby 注释 ，如中文拼音。
<rp> 这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
<bdi> 这个元素在 HTML5 中加入 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
<bdo> 指定子元素的文本方向 ，显式地覆盖默认的文本方向。
<span> 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
<br> 代表换行 。
<wbr> 这个元素在 HTML5 中加入 代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。
编辑节
<ins> 定义增加 到文档的内容。
<del> 定义从文档移除 的内容。
嵌入内容节
<iframe> 代表一个内联的框架 。
<embed> 这个元素在 HTML5 中加入 代表一个嵌入 的外部资源，如应用程序或交互内容。
<object> 代表一个外部资源 ，如图片、HTML 子文档、插件等。
<param> 代表 <object> 元素所指定的插件的参数 。
<video> 这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。
<audio> 这个元素在 HTML5 中加入 代表一段声音 ，或音频流 。
<source> 这个元素在 HTML5 中加入 为 <video> 或 <audio> 这类媒体元素指定媒体源 。
<track> 这个元素在 HTML5 中加入 为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕） 。
<canvas> 这个元素在 HTML5 中加入 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
<map> 与 <area> 元素共同定义图像映射 区域。
<area> 与 <map> 元素共同定义图像映射 区域。
<svg> 这个元素在 HTML5 中加入 定义一个嵌入式矢量图 。
<math> 这个元素在 HTML5 中加入 定义一段数学公式 。
表格节
<caption> 代表表格的标题 。
<colgroup> 代表表格中一组单列或多列 。
<col> 代表表格中的列 。
<tbody> 代表表格中一块具体数据 （表格主体）。
<thead> 代表表格中一块列标签 （表头）。
<tfoot> 代表表格中一块列摘要 （表尾）。
<tr> 代表表格中的行 。
<td> 代表表格中的单元格 。
<th> 代表表格中的头部单元格 。
表单节
<fieldset> 代表控件组 。
<legend> 代表 <fieldset> 控件组的标题 。
<label> 代表表单控件的标题 。
<input> 代表允许用户编辑数据的数据区 （文本框、单选框、复选框）。
<button> 代表按钮 。
<select> 代表下拉框 。
<datalist>元素在 HTML5 中加入 代表提供给其他控件的一组预定义选项
<optgroup> 代表一个选项分组 。
<option> 代表一个 <select> 元素或 <datalist> 元素中的一个选项
<textarea> 代表多行文本框 。
<keygen> 这个元素在 HTML5 中加入 代表一个密钥对生成器 控件。
<output> 这个元素在 HTML5 中加入 代表计算值 。
<progress> 这个元素在 HTML5 中加入 代表进度条 。
<meter> 这个元素在 HTML5 中加入 代表滑动条 。
交互元素节
<summary>元素在 HTML5 中加入 代表 <details> 元素的综述或标题 。
<menuitem> 元素在 HTML5 中加入 代表一个用户可以点击的菜单项。
<menu> 这个元素在 HTML5 中加入 代表菜单。
[html] HTML全局属性(global attribute)有哪些（包含H5）？
（全局属性兼容性特别不好，几乎各个浏览器很少支持）：
MDN: html global attribute或者W3C HTML global-attributes
accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
data-*: 为元素增加自定义属性
dir: 设置元素文本方向
draggable: 设置元素是否可拖拽
dropzone: 设置元素拖放类型： copy, move, link
hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
id: 元素id，文档内唯一
lang: 元素内容的语言
spellcheck: 是否启动拼写和语法检查
style: 行内css样式
tabindex: 设置元素可以获得焦点，通过tab可以导航
title: 元素相关的建议信息
translate: 元素和子孙节点内容是否需要本地化
[html] HTML5的文件离线储存怎么使用，工作原理是什么？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
[html] 简述超链接target属性的取值和作用
target这个属性指定所链接的页面在浏览器窗口中的打开方式。
参数值主要有：
_blank：在新窗口中打开链接文档
_self：默认。在相同的框架中打开链接文档
_top：在整个窗口中打开链接文档
_parent：在父级框架中集中打开
_framename:在指定的框架中打开链接文档。
[html] label都有哪些作用？并举相应的例子说明
Label 中有两个属性是非常有用的,一个是FOR、另一个是ACCESSKEY
FOR属性
功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
用法：
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY属性：
功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
[html] iframe框架都有哪些优缺点？
iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。 分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
