• 【工具】HTML 编辑器的介绍及推荐、html调试


    HTML 编辑器是用于编写 HTML 的工具,使用 HTML 编辑器时以编辑主题,索引,自定义窗口,选择添加搜索页。

    常用HTML编辑器下载

    1、用 UltraEdit(编辑工具)||点击下载

    • UltraEdit文本编辑器能够满足你一切编辑需要的编辑器。 
    • UltraEdit文本编辑器是一套功能强大的文本编辑器。  
    • UltraEdit文本编辑器内建英文单字检查,C++及VB指令突显,可同时编辑多个文件,而且即使开启很大的文件速度也不会慢。 
    • UltraEdit软件附有HTML标签颜色显示,搜寻替换以及无限制的还原功能,一般大家喜欢用其来修改EXE或DLL文件。

    2、Notepad++(代码编辑器)||点击下载

    Notepad++ 是在微软视窗环境之下的一个免费的代码编辑器。它使用较少的 CPU 功率,降低电脑系统能源消耗,但轻巧且执行效率高,使得 Notepad++ 可完美地取代微软视窗的记事本。

    3、Adobe Dreamweaver CC||点击下载

    dreamweaver cc 是世界顶级软件厂商 adobe 推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,对于初级人员,你可以无需编写任何代码就能快速创建 web 页面。其成熟的代码编辑工具更适用于 web 开发高级人员的创作!

    4、EditPlus(文本编辑器)||点击下载  EditPlus3 编辑器手册

    EditPlus(文字编辑器)一套功能强大,可取代记事本的文字编辑器,拥有无限制的 Undo/Redo、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。而它还有一个好用的功能,就是它有监视剪贴簿的功能,能够同步于剪贴簿自动将文字贴进 EditPlus 的编辑窗口中,让你省去做贴上的步骤。另外它也是一个好用的 HTML 编辑器,除了可以颜色标记 HTML Tag (同时支持C/C++、Perl、Java)外,还内建完整的 HTML 和 CSS1 指令功能,对于习惯用记事本编辑网页的朋友,它可帮你节省一半以上的网页制作时间,若你有安装IE 3.0以上版本,它还会结合 IE 浏览器于 EditPlus 窗口中,让你可以直接预览编辑好的网页(若没安装 IE,也可指定浏览器路径)。

    5.Visual Studio Code||点击下载

    该编辑器也集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax high lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。 

    6.Sublime Text||点击下载

    Sublime Text 是一个文本编辑器(收费软件,可以无限期试用,但是会有激活提示弹窗),同时也是一个先进的代码编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
    Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

    7.HBuilder||点击下载

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。

    8.webstorm||点击下载

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。


    HTML调试/在编写HTML代码的时候通常会有以下两种主要类型的错误:

    1>语法错误:由于拼写错误导致程序无法运行;通常熟悉语法并理解错误信息后很容易修复。

    2>逻辑错误:不存在语法错误,但代码无法按预期运行;通常逻辑错误比语法错误更难修复,因为无法得到指向错误源头的信息。

    HTML 本身不容易出现语法错误,因为浏览器是以宽松模式运行的,这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记,所以即使与预期不符,页面仍可显示出来。当然,是存在隐患的。
    注释:HTML 之所以以宽松的方式进行解析,是因为 Web 创建的初心就是:人人可发布内容,不去纠结代码语法。


     错误代码展示:了解保持良好 HTML 格式的重要性

    <h1>HTML 调试示例</h1>
    <p>什么使得 HTML 出错?
    <ul>
        <li>未闭合的元素:如果元素<strong>没有正确的结束标记,那么将影响下方整个区域,这不是你期望的。
        <li>错误嵌套元素:正确进行嵌套是一项重要的编码习惯。<strong>重点(strong)<em>重点强调(strongly emphasised)?</strong>这又是什么鬼?</em>
        <li>未闭合的属性:另一种 HTML 常见错误。来看一个示例:<a href="https://www.mozilla.org/>Mozilla 主页链接</a>
    </ul>

     以下是上述代码出现的问题:

    • 段落(Paragraph) 和列表项(list item)元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来,因此上图中并没有太严重的渲染错误。
    • 第一个<strong>元素没有结束标签。这就严重了,因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。
    • 第二个<li>元素中存在嵌套问题:对于“<strong>重点(strong)<em>重点强调(strongly emphasised)?</strong>这又是什么鬼?</em>”浏览器很难做出正确解释,理由同
    • href属性缺少了一个双引号。从而导致了一个最严重的问题:整个链接完全没有渲染出来。

    但是浏览器会尝试修补代码错误:

    1. <p>和<li>元素加上了关闭标签。
    2. 第一个<strong>没有明确的关闭标签,因此浏览器为之后所有独立块都补全了<strong></strong>。
    3. 浏览器是这样修补嵌套错误的:
    <strong>重点(strong)
      <em>重点强调(strongly emphasised)?</em>
    </strong>
    <em>这又是什么鬼?</em>

    删除整个缺少双引号的链接。最后一个列表项就成了

    <li>
      <strong>未闭合的属性:另一种 HTML 常见错误。来看一个示例:</strong>
    </li>
  • 相关阅读:
    CSS实现点击改变元素背景色
    php三种方法从控制结构或脚本中跳出
    如何关闭运行在某端口的的进程,例如 :8080端口
    Webpack简易入门教程
    git add -A 和 git add . 的区别
    怎样把已经做好的网页传到网上去?
    jquery源码之事件系统-- jQuery.event
    jquery源码之缓存系统--$.data
    jquery源码之延迟对象--Deferred
    jquery源码之低调的回调函数队列--Callbacks
  • 原文地址:https://www.cnblogs.com/webaction/p/12556240.html
Copyright © 2020-2023  润新知