而多乐在线书签导入html文件
打开APP
weixin_39597318
关注
而多乐在线书签导入html文件,,简单介绍HTML5中的文件导入 转载
2021-06-01 11:50:00
weixin_39597318
码龄5年
关注
Template,Shadow DOM和Custom Elements让您创建UI组件比以前更容易了。但是像HTML,CSS,JavaScript这样的资源仍然需要一个个地去加载,这是很没效率的。
例如,现在加载jQuery UI或Bootstrap就需要为JavaScript,CSS及Web字体添加单独的标签。如果您的Web组件应用了多重的依赖,那事情就变得更加复杂。
HTML导入让您以一个合并的HTML文件来加载这些资源。使用HTML导入
为加载一个HTML文件,您需要增加一个链接标签,其相关属性为import,herf属性是HTML文件的路径。例如,如果您想把component.html加载到index.html:
index.html
XML / HTML代码将内容复制到文本
<link rel = “ import” href = “ component.html” >
您可以往HTML导入文件(译者注:此处将“导入的HTML”译为“ HTML导入文件”,将“原始HTML”译为“ HTML主文件”。例如,index.html是HTML主文件, component.html是HTML导入文件。)添加任何的资源,包括脚本,样式表和字体,就跟往普通的HTML添加资源一样。
component.html
XML / HTML代码将内容复制到文本
<link rel = “ stylesheet” href = “ css / style.css” >
脚本>
doctype,html,head,body这些标签是不需要的。HTML导入会立即加载要引入的文档,解析文档中的资源,如果有脚本的话也会立即执行它们。执行顺序
浏览器解析HTML文档的方式是线性的,这就是说HTML顶部的脚本会比底部先执行。并且,浏览器通常会等到JavaScript代码执行完毕后,才会接着解析后面的代码。
为了不让脚本压缩HTML的渲染,你可以在标签中添加async或Defer属性(或者你也可以将脚本标签放到页面的底部)。defer属性会重复脚本的执行,直到全部页面解析完成。async属性让浏览器初始化地执行脚本,从而不会阻止HTML的渲染。那么,HTML导入是怎样工作的呢?
HTML导入文件中的脚本就跟着包含defer属性一样。例如在下面的示例中,index.html会先执行script1.js和script2.js,然后再执行script3.js。
index.html
XML / HTML代码将内容复制到文本
<link rel = “ import” href = “ component.html” > // 1。
<title >导入示例 title >
<script src = “ script3.js” >script >// 4。
component.html
XML / HTML代码将内容复制到文本
<script src = “ js / script1.js” >script > // 2。
<script src = “ js / script2.js” >script > // 3。
1.在index.html中加载component.html并等待执行
2.执行component.html中的script1.js
3.执行完script1.js后执行component.html中的script2.js
4.执行完script2.js继而执行index.html中的script3.js
注意,如果给link [rel =“ import”]添加异步属性,HTML导入会把它当做包含异步属性的脚本来对待。它不会等待HTML导入文件的执行和加载,这意味着HTML导入不会阻止HTML主文件的渲染。这也给提升网站性能带来了可能,除非有其他的脚本依赖于HTML引入文件的执行。跨域引入
<a>标签可定义锚。锚 (anchor) 有两种用法:
通过使用 href 属性,创建指向另外一个文档的链接(或超链接)
通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
<a>元素最重要的属性是 href 属性,它指定链接的目标。
伪类选择器包括:
:link表示未访问的链接
:visited表示已访问的链接
:hover表示鼠标悬停的链接
:active表示选定的链接
在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类名称对大小写不敏感。
Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但目前可以无限期试用)也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能,例如迷你地图,多选择,Python的插件,代码段,等等。完全可自定义键绑定,菜单和工具栏。Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 2 被称作Windows下的TextMate,而根据其官网介绍,Sublime Text的特点如下:拥有高效、没有干扰的界面,在编辑方面的多选、宏、代码片段等功能,以及很有特色的Minimap。
自从 Sublime Text 2.0 正式版以来已经新增支持 Retina 视网膜屏、拖拽文本、构建系统得以优化、支持 CSS 自动完成以及高亮设置等新特点~
Sublime Text 2 的特色功能:
1.良好的扩展功能,官方称之为安装包(Package)。
2.右边没有滚动条,取而代之的是代码缩略图,这个功能非常赞
3.强大的快捷命令“可以实时搜索到相应的命令、选项、snippet 和 syntex, 按下回车就可以直接执行,减少了查找的麻烦。”
4.即时的文件切换。
5.随心所欲的跳转到任意文件的任意位置。
6.多重选择(Multi-Selection)功能允许在页面中同时存在多个光标。
7.支持 VIM 模式
8.支持宏,简单地说就是把操作录制下来或者自己编写命令,然后播放刚才录制的操作或者命令。
9.更新非常勤快
主要快捷键列表:
Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行,插入在该行之前
Ctrl+J 合并行(已选择需要合并的多行时)
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词 (按住-继续选择下个相同的字符串)
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签
Sublime Text 2 所支持的格式:
Sublime Text 2 插件下载请点击这里~Sublime Text 2 插件安装方法:将下载的安装包解压缩至 Sublime Text 2 安装目录下的 Packages 中,而后在 preferences——packages 进行具体设置~
Sublime Text 2.0.1 更新内容:
1.Keyboard input while dragging a selection will cancel the drag
2.Improved backspace behavior when use_tab_stops and translate_tabs_to_spaces are true
3.Improved shift+drag behavior
4.Improved double click drag select behavior
5.About Window shows the license key details
6.Fixed a Goto Anything issue where pressing backspace could scroll the overlay incorrectly
7.Fixed a crash triggered by double clicking in the Goto Anything overlay
8.Fixed incorrect window position when dragging a tab in some scenarios
9.Added missing toggle_preserve_case command
10.word_wrap setting accepts “true” and “false” as synonyms to true and false
11.OSX: Fixed System Preferences menu not working
12.Linux: Added support for mice with more than 5 buttons
13.Linux: Fixed an occasional graphical glitch when running under Unity
支持运行环境:Windows XP/Vista/Win7/Win8
Sublime Text 2.0.1 便携版 下载(来自wkang956的汉化):
(8.2MB)(将替换文件夹中的“SublimeText.exe”替换“SublimeText2”目录中的同名文件即可运行)