HTML 不能这么写、你造吗?

目录

  • a 标签不可以嵌套交互式元素
  • 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素
  • p 标签不能包含块级元素
  • 不可包含块级元素的标签
  • li 标签可以包含 div 以及 ul,ul 的子元素应该只有 li
  • 元素并排(块级和块级并列,内联和内联并列)
  • 字符实体引发的错误

  • 错误的使用 role 属性

  • 行内元素强制转成块级元素,块级元素强制转成行内元素

  • 使用 disabled=false

  • 页面中同一个 ID 出现两次及以上

  • 内嵌的 <script> 标签含有 src 属性


标签错误嵌套

语法错误

* a 标签不可以嵌套交互式元素 [a, audio(如果设置了 controls 属性), button, details, embed, iframe, img(如果设置了 usemap 属性), input(如果 type 属性不为 hidden 状态), keygen, label, menu(如果 type 属性为 toolbar 状态),object(如果设置了 usemap 属性), select, textarea, video(如果设置了 controls 属性)]

下面这些写法浏览器是不能够正常解析的

<a href="">    <a href="">click</a> </a> <a href="">    <button>click</button> </a> <a href="">    <input type="text"> </a> <a href="">    <textarea name="" id="" cols="10" rows="5"></textarea> </a> <a href="">    <a href="">click</a> </a> <a href="">    <button>click</button> </a> <a href="">    <input type="text"> </a> <a href="">    <textarea name="" id="" cols="30" rows="10"></textarea> </a> 

有的虽然解析正常,但却达不到预想的目的

语义错误

页面可能正常解析,但不符合语义。这是因为浏览器自带容错机制,对于不规范的写法也能够正确的解析,各浏览器的容错机制不同,所以尽量按规范来写。

* 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素

/*规范的写法*/<div>     <h2>jikexueyuan</h2>     <p>IT education</p> </div> /*不规范的写法*/<span>     <div>wrong</div> </span> 

* p 标签不能包含块级元素

/*不规范的写法*/

<p>
<h1></h1>
</p>

<p>
<div></div>
</p>



* 如下的标签不可包含块级元素

h1、h2、h3、h4、h5、h6、p

* li 标签可以包含 div 以及 ul(这个是不是很牛,可以包含父级元素)

/*规范的写法*/

<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</li>

/不规范的写法/

<ul>
<a href="">迷路的a标签</a>
<li></li>
<li></li>
<li></li>
</ul>



* 元素并排(块级和块级并列,内联和内联并列)

/*规范的写法*/

<div>
<h2></h2>
<p></p>
</div>

<div>
<img src="" alt="">
<a href=""></a>
<span></span>
</div>

/不规范的写法/
<div>
<span>我是内联元素</span>
<p>我是块级元素</p>
</div>



字符实体引发的错误

有些字符是 html 预留的,不能够直接书写,但是可以通过字符实体来显示。
如:

  • 空格 - &nbsp;
  • 大于符号 - &gt;
  • & - &amp;
  • ......

但如果稍不注意,在如下的情况下就会引发错误:

<a href="?art&copy">Art and Copy</a>

这里的 &copy 会被转换为 ©️符号,从而得不到预期的效果

正确的做法是所有的保留字符全部用实体字符替代。

<a href="?art&amp;copy">Art and Copy</a>

错误的使用 role 属性

role 属性使用来增强标签的语义的,但如果使用不当,反而得到负面的效果,所以使用的时候一定要注意。

<input type=radio role=progressbar>

这里的是一个 input 标签,但是却通过 role 指定了进度条的语义,但是 input 是不能够作为进度条的,所以这里反而模糊了语义。

行内元素强制转成块级元素,块级元素强制转成行内元素

如下做法是不推荐的:

  • 给 <div> 标签设置 inline-block 属性
  • 给 <span> 标签设置 block 属性

使用 disabled=false

disabled 属性是用来禁用标签的,一般用于 input 、button 等,表示不可点击。

正常的用法是:

<input type="text" name="lname"  />
<input type="text" name="lname" disabled="disabled" />

错误的写法:

<input type="text" name="name" disabled="false" />

这里虽然 disabled="false" 语义也代表不禁用,但实际上是被禁用的。

页面中同一个 ID 出现两次及更多

ID 重复会引起元素选择错误,从而引发 Javascript 隐藏问题,因此需要注意。

注:每一个 ID 会在浏览器中生成一个同名的全局变量

内嵌的 <script> 标签含有 src 属性

当 <script> 标签包含 src 属性时,其包含的 Javascript 脚本是不会执行的。

你的世界我曾来过

总是在夜深人静的时候开始想你
我想兴许不是想你,我是开始怀念爱情的滋味了
你的世界我曾来过
带着伤痕带着眼泪
却还在爱着
如果分手是彼此最好的结局
那我的思念是最美的记忆
我会珍藏我们的爱情
伴着岁月慢慢老去
你的世界我曾来过
不曾离去

Sublime Text 插件主题配置大全

下载地址:Sublime Text Download

原则上收费的,但可以试用,试用期是免费的,在试用期间会提示你购买.

package control

首先必须要介绍的就是这个,它是用来进行插件管理的,插件的安装、查看、删除都可以用package control,非常的方便,安装package control也很方便,调出 sublime text 的控制台,在View -> Show Console,快捷键是ctrl + `
然后在控制台复制进以下代码:

Sublime Text 3:
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen('http://packagecontrol.io/' + pf.replace('','%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install'% (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Sublime Text 2:
import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

然后等待就行,等到 sublime 能用了,能看到Sublime Text -> Preference -> Package Control就表示安装成功了,一般情况下是不用重启 sublime 的,但是如果没有看到,就重启一下 sublime 就可以了。
通过快捷键 ctrl+ shift + p调用命令行,因为支持模糊查询,所以输入 pc:ippc:listpc:rm分别进行插件安装,插件浏览,插件删除



插件

Alignment

自动安装(所有插件同理)

这个插件是用来规格化代码的,常用的是将等号对齐,打开命令板 ctrl+ shift + p,输入pc:ip,然后输入插件的名字,回车即可安装

手动安装(所有插件同理)

如果某些时候因为网络原因而导致插件安装失败,可以手动安装
找到插件的 Github 仓库,下载zip

将下载的zip文件解压后放进刚打开的Browse Package里,重启 sublime 即可安装成功

Material Theme

自用主题,并且目前这个插件更新了很多版,bug 已经非常少了,推荐给大家使用。这个主题要配合A File Icon图标插件配合使用,因为它的文件图标是那个插件提供的,依然是在Package Control下载图标插件即可。
主题具体的配置可以自己在标题链接的 Github 仓库里去看,如果懒的去看的,可以直接复制我的配置,打开Sublime Text -> Preference -> Settings,在User界面复制进如下代码:

{
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
    "fade_fold_buttons": false,
    "font_options":
    [
        "gray_antialias"     ],
    "font_size": 15,
    "ignored_packages":
    [
        "Vintage"     ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"     ],
    "line_padding_bottom": 3,
    "line_padding_top": 3,
    "material_theme_accent_scrollbars": true,
    "material_theme_arrow_folders": false,
    "material_theme_big_fileicons": true,
    "material_theme_bold_tab": true,
    "material_theme_bright_scrollbars": true,
    "material_theme_bullet_tree_indicator": true,
    "material_theme_compact_panel": true,
    "material_theme_compact_sidebar": true,
    "material_theme_contrast_mode": true,
    "material_theme_disable_folder_animation": false,
    "material_theme_disable_tree_indicator": true,
    "material_theme_panel_separator": true,
    "material_theme_small_statusbar": true,
    "material_theme_small_tab": true,
    "material_theme_tabs_autowidth": false,
    "material_theme_tabs_separator": false,
    "material_theme_tree_headings": true,
    "overlay_scroll_bars": "enabled",
    "show_encoding": true,
    "show_line_endings": true,
    "theme": "Material-Theme.sublime-theme" }

AutoFileName

这个插件是在双引号内默认自动导入当前同文件夹下的其他文件名,如果想导入其他文件夹下的文件名,支持绝对路径和相对路径。这个插件在写 Js 代码,需要导入图片时,或者是需要在一些配置文件里填写文件的路径时,全程可以自动补全,非常好用。安装即可用。

ConvertToUTF8

这个插件可以有效地解决中文乱码问题,因为 sublime 的默认编码方式 UTF-8,所以有些 GBK 编码或者其他的编码会出现乱码问题,这个插件可以进行编码转换

Compare side-by-side

这是个进行文件比对的软件,但只是简简单单的进行文件比对,如果只需要文件比对功能的童鞋们可以用这个插件,如果想要进行更多功能的文件比对功能,例如与剪贴板里的文件进行比对,可以使用 SublimeFileDiffs,这个插件的提示方式和 git diff 的格式一样,所以喜欢使用git的童鞋可以尝试,但是我个人使用的是 Compare side-by-side ,因为我觉得够用了。

DocBlockr

这个是代码自动注释插件,也是我非常喜欢的插件之一,因为个人写函数时有进行该函数文档说明的习惯,而这个插件可以自动将函数类型、参数个数及类型、函数返回值等直接生成好,正如安装成功后插件文档中写的 All you need is to complete descriptions。使用方法很简单,只要在函数上方输入文档注释 /**,然后回车即可生成。

Emmet

这是一个经过广大技术开发者检验的软件,确实堪称为前端开发神器,效率倍增。只需要输入很简短的缩写,它就能扩展开来,默认扩展快捷键是Tab或者ctrl + E。例如一开始输入!符号,然后 Tab,就能扩展成一个 HTML 编码所需要的全部头部和尾部。
附一个 emmet 的使用文档

很多人在安装成功后发现Tab并没有实现扩展,那是因为需要你把 sublime 的语法格式手动调整为html格式,在 sublime 的右下角有调整。

GitGutter

这个插件看名字就能知道是干什么用的,也是我自己非常喜欢的一款插件。它能在 gutter 中显示你这次编辑的文件相比目前 git 暂存区中的文件的异同,相当于实时的git diff,并且显示的也很友好,如图


将鼠标放在修改的提示符不动,会自动显示修改前是什么样的,很方便。

SublimeCodeIntel

一个全功能的 Sublime Text 代码智能自动补全引擎,支持很多语言的补全。这个插件比较大,所以通过Package Control进行安装的时候会比较慢,我 50M 的水管都安了十几分钟,而且尝试了很多次,如果自动安装失败可以尝试手动安装。
并且这个插件是需要自己手动配置的,我目前用 php 比较多,就说一下我是会怎么配置的

  • 如果不知道你的 php 的路径,在终端中执行whereis php,复制显示结果
  • 打开Sublime Text -> Preference -> Package Settings -> SublimeCodeIntel-> Settings-Default
  • 然后在设置的最后codeintel_language_settings里的 php 的路径修改为你刚复制的现实的结果
    如图


wordcount

这个软件就不多介绍了,名字告诉了一切,插件很小,自动安装很快,安装即可用,右下角显示,无需配置,插件按照空格统计英语单词,无法统计汉字字数。

JsFormat
即可在 JS 文件中通过鼠标右键 ->JsFormat 或键盘快捷键 Ctrl+Alt+F 对 JS 进行格式化


使用效果如下图



SideBarEnhancements
SideBarEnhancements 是一款很实用的右键菜单增强插件,安装此插件后配置方法为,重启 Sublime text 3 后,打开任意一个 JS 文件,按 ctrl+shift+space,这时候第一次运行会去下载对应的类库,可以按 ctrl+`(也就是调出控制台)来看进度

TrailingSpaces

有时候,在代码结尾打多了几个空格或 Tab,并没有任何显示效果,TrailingSpaces 这款插件能高亮显示多余的空格和 Tab


Tag

这是 HTML/XML 标签缩进、补全、排版和校验工具

安装该插件后,可以如上图方式使用 Tag 插件对 HTML/XML 进行自动排版等操作


Terminal

在编程过程中,我们经常需要使用到命令行窗口,Terminal 插件可以允许在 Sublime Text 3 中打开 cmd 命令窗口,安装好该插件后,即可使用快捷键 Ctrl+Shift+T 呼出命令行窗口


SublimeCodeIntel

这是一款代码提示插件,支持多种编程语言,该插件安装时间可能相对较长,更特别的是,安装该插件后需要根据您使用的编程语言进行配置,本部分将以配置 JavaScript 语言的代码提示功能为例,安装该插件后,点击Preferences->Browse Packages... 菜单


进入 SublimeCodeIntel 文件夹


再进入.codeintel 文件夹

将其中文件名为 config 的文件拖动到 Sublime Text 3 中,你会看到大概如下图的代码


将以下代码复制后粘贴到 Config 文件中

//注意上下文需要添加的逗号

"JavaScript":{

"javascriptExtraPaths":[]

}


复制粘贴后的效果如下图

保存后关闭 config 文件,在编写 JavaScript 时即可获得代码提示,如下图示



CssComb

CssComb 是为 CSS 属性进行排序和格式化插件 [官网],使用 Package Control 安装 CssComb 插件后,你可能发现它并不能运行,它依赖于 Node.js [官网],若您的计算机已安装过 NodeJS 环境,可跳过此步骤,若您的计算机中尚未安装过 Node.js 环境,应该到 Node.js 官网中 [下载] 并安装相应版本的 Node.js

安装 NodeJS 后,即可使用 CssComb 插件

使用方法:菜单 Tools->Run CSScomb 或在 CSS 文件中按快捷键 Ctrl+Shift+C


使用前,CSS 可能杂乱无章


使用后,CSS 属性按照作用类别出现


还可以选中一部分 CSS 代码进行排序

使用前,选中需要排序的 CSS 代码

使用后,选中部分代码已排好序

美中不足的是,CssComb 似乎不支持 IE hark


Autoprefixer

这是一款 CSS3 私有前缀自动补全插件,该插件使用 CanIUse 资料库,能精准判断哪些属性需要什么前缀,与 CssComb 插件一样,该插件也需要系统已安装 Node.js 环境

使用方法:在输入 CSS3 属性后(冒号前)按  Tab 键,如下图示


LiveReload
自动刷新浏览器,真神器啊!!无需保存后按F5,Ctrl+S保存后,自动刷新浏览器!

开始之前我们需要准备下面这两个插件

1、在 Sublime 安装 LiveReload 插件。

2、在 Chrome 浏览器安装 LiveReload 插件.(火狐的自己去插件中心搜索.)
安装好以后可以在地址栏旁边看到如下按钮。

接着右键单击选择管理扩展程序,把允许访问网址文件这一选项勾选上。

在 Sublime 中配置 LiveReload

在 Sublime 中配置 LiveReload
方法 1:过用户自定义配置来开启。

Preferences > Package Settings > LiveReload > Settings User

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}


方法 2:通过控制台命令来开启。

1. Ctrl+Shift+P

2. LiveReload: Enable/disableplugins




一个 HTML/Css/JavaScript 代码格式化 / 美化插件,基于 NodeJS(nodejs.org) / JSBeautifier (jsbeautifier.org) 开发。

安装

方式 1
下载并安装 NodeJS(nodejs.org), windows 下需要重启
打开 Sublime Text 2 的 Packages 目录, "Preferences" -> "Browse Packages"
在 Packages 目录本代码仓库,Git Clone https://github.com/rehorn/sublime-htmlbeautify
打开一个经过压缩的 .html/.htm/.js/.css 文件,用快捷键 ctrl+alt+q 执行格式化

方式 2
下载并安装 NodeJS(nodejs.org), windows 下需要重启
安装 Packages Control 后,将本代码仓库添加到源
ctrl+alt+p 之后,输入 add repository,输入 https://github.com/rehorn/sublime-htmlbeautify
执行 Packages Control 后,就能搜索到 sublime-uglifyjs ,安装即可
打开一个经过压缩的 .html/.htm/.js/.css 文件,用快捷键 ctrl+alt+q 执行格式化
使用

打开一个经过压缩的 .html/.htm/.js/.css 文件,用快捷键 ctrl+alt+q 执行格式化
自定义

打开 Sublime Text 2 的 Packages 目录, "Preferences" -> "Browse Packages"
进入 sublime-htmlbeautify
修改 Default (Windows).sublime-keymap 文件,可以 Windows 自定义快捷键,其他平台可按照格式新建一个
其他

本插件系 https://github.com/victorporof/Sublime-HTMLPrettify 的一个分支版本,修复了 windows 下无法正常运行和编码等问题。



AllAutocomplete

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。


这可能是对程序员最有用的插件。SublimeREPL 允许你在 Sublime Texxt 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。


通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下 Ctrl / Cmd + Shift + C 快捷键。













前端学习资源汇总(持续更新ing)

<!DOCTYPE NETSCAPE-Bookmark-file-1>
Bookmarks

Bookmarks

书签栏

网络收藏

热门日常

微博
奔跑中的奶酪
果壳
知乎
豆瓣
花瓣
优酷
淘宝网
爱库
凤凰
维基百科
Twitter
Flickr
Facebook
about.me
YouTube
Zerply
Feedly
LinkedIn
TED
Pinterest
Quora
Reddit
Instagram
微信网页版
Glgoo
Fire FTP
Firefox Add-ons

平面设计

灵感创意

Deviantart
Dribbble
Behance
imgfave
FFFFOUND
We Heart It
Piccsy
Fotologue
Naver
Wookmark
iStock
Stockvault
GettyImages
CorbisImages
Illusion
Magdeleine
VisualizeUs
IllustrationServed
LovelyPackage
秀设计
视觉中国

资源素材

UIFest
UI社
千图网
黄蜂网
Graphichive
三联素材
红动中国
站长素材
素材中国
UI设计网
站酷网
滤镜插件网
设计是空
大图网
我图网
昵图网
汇图网
68Design
APPPSD
Freebbble
Vector
Blaz
365PSD
DesignLOL
FreebiesGallery
ShyDesigns
Blugraphic
GraphicsFuel
PixelFabric
DesignFreebies
DesignShard
QBrushes
PsBrushes
CGTextures
Brusheezy
BackgroundLabs
FBrushes
SubtlePatterns
WebTreats ETC
Pixeden
Envato
MediaLoot
Shutterstock
Yestone邑石网
PublicdomainArchive
Gratisography
Life Of Pix
Picjumbo
Pixabay
@Okilla