HH123_3
HH123_3

精通HTML 第二章 使用适当的标签完成任务 阅读笔记

通过本章的学习，你将会找到一些演示如何使用无侵入性（unobtrusive）DOM脚本和CSS来充分利用这些语义和结构，以增强网页的功能和样式的示例。

2.1 文档标记

2.1.1 段落、换行和标题

  • 标题标签用来表示网页或者文档中的不同节，它们还可以让各种用户代理（比如屏幕阅读软件，或者一些类似Opera的Web浏览器）简单的在这些节之间跳转。
  • 可以使用6种不同的标题级别，这意味着不再需要去编写
    或者

    标题

    这样的代码。
  • 按照JavaScript专家Peter-Paul Koch发布的网络文章www.quirksmode.org/dom/toc.html中的描述，可以通过JavaScript提炼网页中的各级标题，自动生成单个文档的基本目录（table of content, TOC）。
    • 尽管与用于组织一组文档的TOC相比，这个基本的TOC性能低下，而且内容覆盖范围低，但是当你插入或者删除某个标题的时候，它确实能够充分利用动态更新的优势。

2.1.2 联系信息

    • 被用来标记联系地址，只是用来实现这个目的，别无他用。
    • HTML规范对
      标签的用途规定得非常具体：它并不显示任何人或物的联系信息，只显示与文档本身有关的联系信息。
    • 举例来说，假设你正在为某个协会成员名录维护一份详细的联系信息表。在这种情况下，为每个成员分别使用一项
      标签并不合适。但是，如果你还需要网络管理员或者那个维护会员名录的人的详细联系信息，那么可以只将
      标签用于这一个人。它不一定非常具体地指出物理的实体地址，例如HTML规范中给出的示例包含了指向个人页面的链接和日期。
    • 元素本身是一个行内元素，因此它只能够包含行内元素，不能有段落、列表或者div。
<address>
	<a href="../People/Raggett/">Dave Raggetta>,
	<a href="../People/Arnaud/">Arnaud Le Horsa>,
	contact persons for the <a href="Activity.html">W3C HTML Activitya> <br>
	Date: 1999/12/24 23:37:50
address>

2.1.3 引用

HTML为web制作者提供了两种明显不同的标记引用方式，一种用于块级引用，另一种用于行内引用。但是，我只推荐使用前一种方法：

元素。

1. 块引用
  • 历史上blockquote通常用来发挥它的表示作用，而不是它的语义意义或者结构相关性的作用。
  • 建议样式表的各种实现品能够提供一种机制，用来在由BLOCKQUOTE界定的引用体前后，按照一种与当前语言上下文和引用嵌入级别相适应的方式插入引号。
  • 有些Web制作者仅仅将BLOCKQUOTE用作一种缩排文本的机制一样，为了保留Web制作者们的本意，在默认样式中，用户代理不应该插入引号。
  • 使用样式表之后，已经不推荐将BLOCKQUOTE用来缩排文本。
  • 人们如此普遍地使用
    标签来缩排文本，而不是用作包含引用的容器，以至于W3C建议用户代理不要自动包含引号，并已经采取了异乎寻常的措施实际上反对这种滥用。
  • 标签还有一个cite属性可以用来让制作者推荐引用的来源（通常是以URL的形式，但是它还可以是任何其他引用形式，比如另一位作者的姓名或者某一部电影的名字）。

获取引用信息并在客户端将其显示出来，至少有两种方法。第一种方法是使用CSS，第二种方式是使用一些DOM脚本。

下面是CSS方法：

blockquote[cite]:after {
	content: "Source" attr(cite);
}

第二种方法是使用DOM脚本，它的优势是可以在更多的浏览器上运行，但它的缺点是只有启动JavaScript的情况下才有用。

function betterBlockquotes() {
	if(document.getElementsByTagName) {
		quotes = document.getElementsByTagName("blockquote");
		for(i = 0; i < quotes.length; i++) {
			citation = quotes[i].getAttribute('cite');
			citeLink = document.createElement('a');
			citeLink.setAttribute('href', citation);
			citeLink.appendChild(document.createTextNode('Source: '));
			p = document.createElement('p');
			p.appendChild(citeLink);
			quotes[i].appendChild(p);
		}
	}
}
window.onload = betterBlockquotes;
2. 行内引用
  • 用于行内应用。建议不要使用标签。
  • 当使用标签之后，假定会发生以下的事情：浏览器会自动在引用前后添上排字正确的引号，这也就意味着，页面制作者不应该在页面包含这些引号。此外，明智地使用lang属性之后，这些引号就应该适合于按照指定语言的样式显示出来（比如，在欧洲的一些语言中，使用波浪号或者书名号“《”和“》”，而不是将““”和“””作为引号）。
  • 各种浏览器对的支持不一致导致它变得完全没有用处。

2.1.4 列表

在当前的X（HTML）版本中，总共有三种不同的列表类型：无序列表

    、有序列表
      和定义列表
      。
      这种列表类型之间的差别很小，而且非常简单。

      • 没有任何顺序，就用无需列表。
      • 按照某种顺序，则使用有序列表。
      • 定义列表用来将名称或术语与值或其他数据（任何彼此有着直接关系的项目，比如术语表）联系起来。W3C也建议使用这类列表标识对话：每个定义术语作为一个说话者，定义描述则作为说出来的话，这样一来，我们就可以认为这个元素的使用实际上非常的自由。
      1. 无序列表和有序列表
      • 起始标签和结束标签只能包含列表项，但是列表项中可以包含任何东西，包括段落、div、标题以及更多的列表。只要把它们包含在一个单独的列表项中，这就是非常合理且格式正确的标记。
      • 在严格的doctype中，列表已经没有哪种有趣的或者隐藏的属性未遭弃用。
        • 曾经可以使用start和value属性。
        • start可以让制作这从某个不是1开始的数字对有序列表进行编号，如果你想中断某个有序列表（比如搜索结果列表太长，需要好几个页面才能显示完整），这个属性非常有用。
        • value属性可以让作者为某个特定的列表设置无序的编号。将来使用CSS计数器或许能够重现这些属性的功能，但是没有浏览器会支持这一点。
        • compact属性，其本意是
        • 如果需要用到这些属性，那么考虑将doctype设置为transitional，否则文档就不能通过验证测试。
      • 尽管这个标记并没是那么让人兴奋，但它至少灵活，而且配合CSS能够按照各种方式显示列表：水平方式、垂直方式、展开或者折叠，或者是作为一幅画映射。
      <ul>
	<li><a href="/">Homea>li>
	<li><a href="/">Concata>li>
	<li><a href="/">Abouta>li>
	<li><a href="/">Archivea>li>
ul>

      我们可以非常轻易地转化成水平个菜单：

      li {
	float: left;
}

      通过display: inline;将

    1. 从一个块容器转换成行内容器也可以获得同样的效果，但是块级容器在将来能够为我们提供更过的样式选项。

      简单的列表可以按照不同于默认样式的方式显示出来。使用CSS可以创建出一些具有相当动态特性的列表。

      利用:hover伪类，构成弹出菜单

      li ul { display:none;}
li:hover > ul { display: block; }

      资料:

      • Web Standards Group的联席主席Russ Weakley创建了大量的列表样式（当前的数目已经超过了70余种），可以在http://css.maxdesign.com.au找到这些样式。
      • Mark Newhouse在www.alistapart.com/articles/taminglists发表的CSS Desig：Taming Lists的文章也值得一看。
      • 为了避免创建链接列表的麻烦，Accessify的List-O-Matic（https://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic）也值得一试，这是一个网上列表创建程序，可以让你从多种预先建立好的样式中选择。
      • Eric Meyer曾经在一篇文章（https://meyerweb.com/eric/css/edge/menus/demo.html）中指出，那些在任何元素上都支持“:hover”伪类别的浏览器可以使用这个伪类来显示嵌套列表，从而构成弹出菜单。
      • Patrick Griffiths的Suckerfish Dropdown脚本（https://www.htmldog.com/articles/suckerfish/dropdowns/）
      2. 定义列表
      <dl>
	<dt>Bottledt>
	<dd>A rece......dt>
	<dd>.....dd>
	<dt>Rocketdt>
	<dd>.....dd>
dl>
      • 定义列表的使用非常灵活。只要词语和（一个或者多个）定义词之间有着直接的关系，那么很多结构都可以使用这种列表表示。
      • 举例来说
        • 一张图片可以作为定义词，在这个定义词的描述中可以提供拍照者和照相机的信息。
        • 还可以用于显示某次会议的一系列演讲的时间表，演讲的题目作为定义词，下面的描述可以包括演讲者的详细信息以及日期和时间。
        • 还可以用于网上购物应用中，用来描述产品的详细信息，诸如此类。
      • 注意事项
        • 定义词不能包含任何块级元素，也就是说不能包含有块级元素，也就说不能含有段落、标题或者列表，这就意味着不能像标题一样给出不同的定义词指示不同的重要等级（如

          、

          等）。

        • 定义描述可以包含任何元素，或者一系列元素，只要它们的格式正确。

      2.1.5 链接

      <a href="newpage.html#partwo">linka>

      如果你希望链接到同一个页面上的某个锚点标签或者其他已标记的元素，就没必要将文件名包含进来。

      <a href="#partwo">linka>

      资料:

      • Jim Thatcher在他所写的文章Skip Navigation(https://www.jimthatcher.com/skipnav.html中总结了跳转链接的各种很好的用途。
      1. 关系问题
      2. 链接定位
      3. 可访问链接

      合理使用tabindex和accesskey属性（标签有这些属性，而标签没有）以及title属性（所有元素都有这个属性），可以显著提高网络的可访问性和可用性。

      • title属性为相关元素提供了额外的信息。

      • tabindex和accesskey这两个属性都只适用于那些能够获得键盘焦点的元素：锚点链接和表单域。

      • tabindex可以用来为某些用户建立特定的Tab键顺序（tabbing order），这些用户习惯使用键盘而不是鼠标在网站导航。

        • 要想实现这个功能，只需为这个元素赋予一个数字，比如tabindex="1"，这将产生以下效果：当用户按下Tab键之后，这个元素将成为第一个获得焦点的元素。元素的tabindex值越高，按下Tab获得键盘焦点的顺序就越靠后。
        • 有一定好处，但是应该小心使用。如果以一种良好的方式构建网站，在源标记中按照逻辑顺序安置导航元素，那么根本不需要将tabindex应用到链接上，因为浏览器能够自动识别逻辑上的Tab键顺序。
        • 如果定义的tabindex结构与用户过去使用的有很大不同，就会让用户感到迷惑的风险。
        • 如果需要在列表中间插入一个新的链接，你可能会遇到维护难题，因为这将导致对所有后续链接的重新编号。

      • accesskey这个属性用来指定某个字母作为键盘的快捷键。

        • 比如\accesskey="S"，将会导致以下结果：当用户激活这个快捷键的时候，该元素就会获得焦点。根据浏览器的不同，相应的快捷键可能是Ctrl+S、Alt+S（我在google浏览器上测试时为该快捷健）、甚至还可能是Ctrl+Alt+S（此外还有Mac平台上对应的快捷键）。
        • 对于完全避开不用accesskey还存在很多争议。
          • 没有标准的accesskey方案，这就会导致很多网站使用不同的快捷键。
          • 大多数浏览器不能够向用户显示什么是用户实际可用的accesskey，这就意味着用户必须要么找到可访问的文档并参照其操作，要么查看源码。
          • accesskey和原有的浏览器的快捷键之间存在的冲突可能会损害用户预期得到的效果，再加上有这么多的浏览器可供使用，根据Web Accessibility Technical Services的统计数据，尚未被浏览器用到的字符只剩下“/”、“\”和“]”了。
        • Opera几乎为所有操作都提供了键盘快捷键，它采用了以下办法来解决这个问题
          • 它包含了一个快捷键来开启accesskey功能，按下Shift+Esc键就会让你使用accesskey而不需要任何修饰键。
          • 但是，这并没有问题，用户在浏览特定网站的时候，还是没有办法搞清楚自己在使用哪些accesskey，而且Opera也没有提供任何通知机制，告知用户是否处于“开启”模式，或者在不需要查看帮助文件的情况下，就能够知道确实存在这样的系统。
        • Accessify正在使用一套系统试图通过让用户设置自己的accesskey来避开这个问题（http://accessify.com/preferences/accesskeys），但是这个解决方案不可能广泛流传：它是跟网站相关的；它不能轻易地在网站之间共享，就像基于安全原因不能让不同域访问cookie一样；而且在那些没有实现这种方法的网站上用户仍然还会遇到问题。

      2.1.6 标示文档修改

      • 和标签可以标识文档的修订
        • 最常用的就是用于标记文本的修改（例如，当获得更新的、更准确的信息之后，校正博客帖子中的详细信息）。
        • 它们还可以用来标注文档结构的修改（如，将网站上的整节内容封起来）。
      • 它们的功能很丰富，根据上下文，既可以用作块元素，也可以用作行内元素。
        • 如果在块元素中（也就是说，某个不允许嵌套其他块元素的块元素，比如段落或者标题）使用这些标签，那么可以将它们本身也视为行内元素，就像是或者。
        • 但是，如果你使用这些元素来包含块元素，就可以将它们本身也视为块元素（尽管你可能需要在CSS中应用display:block来利用快样式的外边距、内边距或者边框）。
      <p>Lorem ipsum dolr sit amet, <del>consecetuer adipiscing elitdel>.p>
<del><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p>del>
      • 这些标签有一些限制。
        • 你不能使用来标示删除一个
        • ，因为能够放到
            里面的标签只有
          • 。同样表格中删除表格行（）的时候也是如此，这就成为非法标记，即使它有一定的逻辑意义。
        • 和有两个专门的属性：datetime和cite。
          • 前者用来设置一个日期记录修订时间，后者可以用来提供一个解释为何进行修订的链接
          • 对于这类属性，它们的信息往往不为大多数用户所知。因此，如果希望显示这些信息，就需要使用JavaScript，正如在前面检查如何从
            中获取cite属性值的时候所讨论的那样，你也可以使用JavaScript控制删除部分和插入部分显示效果。
        <p>Lorem ipsum dolr sit amet, <del datetime="20060509" cite="http://example.com/errata.html" >consecetuer adipiscing elitdel>.p>
<del><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p>del>

        2.2 表示性元素

        • 表示性元素（presentation element）并没有说明它所描述的内容，但是它说明了与这些内容如何显示有关的全部信息。
        • 在HTML规范中还有一些这样的元素，其中有些元素还在使用中，而其他的元素则可以找到更合适的替代品。
        • HTML规范自身并没有明确地列出这些表示性元素，所以我们下面将讨论那些通常被认为表示性的元素，它们是

        2.2.1 字体样式元素

        • W3C将字体样式元素（font style element）定义为能够简单地指定字体信息的元素，因此没有语义意义和价值。
        • 尽管并不是不完全推荐使用，但是不鼓励优于样式表使用它们。
        • W3C定义的字体元素为
          • 还有两个字体修饰元素，但是这两个元素已经不再推荐使用了，它们对于我们不再有任何用处。
        • 和是最典型的两个表示性元素，为了增强可访问性和基于标准的设计方法学，应该避开它们分别选用和，因为前两个标签所传递的纯粹是视觉信息，而后者则同时传递意义，即强调。
          • 使用和作为标准的替代品，在任何需要斜体和粗体文本的地方不断地使用这两个元素。
          • 好多所见即所得的工具都存在误用和的情况，它们都有I和B按钮，但是现在应该修改它们的功能，在相应的标记处插入或者元素。
          • 元素可以用在外语中将文本倾斜（比如，Molte grazie）。如果使用来实现这个功能，则需要额外的类名，比如，因此使用和在语义上没有表达什么意思，我建议只使用元素，因为它已经实现了你想要的功能，而且在标记中占用的空间更少。
        • tt元素使用电传机字体或者等宽字体呈现文本。
          • 这个元素在语义上没有意义，而且你也可以找到其他的更合适于描述内容的元素（将在下一章中讨论），比如、
            或者。
        • 和都会对它们所包含的字体大小产生影响，而且嵌套的和还会让内容更大和更小。
          • 它们属于纯粹的表示性元素，你可能会发现CSS字体大小属性可能会更适合你的需要。
          • 有些人建议，在标签云中使用嵌套或元素，以取得“按照重要加权”的视觉效果。其他人则持相反的意见，他们建议使用嵌套的元素，这样做的好处是代码更加有意义，但是在一些非CSS用户代理中丧失了视觉效果。
        • 在HTML4和XHTML1中均不推荐使用的字体样式元素分别是、和。
          • 、功能相同：在它们所包含的内容中间画一条线，而这个功能的视觉效果已经可以通过使用CSS文本装饰属性完成。
            • 如果你希望能够指出某些内容已经被删除，那么使用元素。
          • 被用来为所含内容添加下划线，而这个功能也同样可以通过文本装饰来完成。
            • 任何不属于链接的内容都不应该被添加下划线（链接和下划线通常彼此相联，在Web上任何东西加上下划线现在看上去都像是为用户提供的链接），这是明智的做法。
        • 当为一般用户设计所见即所得用户界面的时候，你可以考虑使用这些元素，因为带有不正确的语义要比完全不带有语义更糟糕。

        2.2.2
        、
        、和

        从技术角度来看，

        、
        、和均属于表示性元素，但是它们也表达了一些（或者不应该）用CSS重现的含义。
         
  
           
   
        •  
          以
          为例：它就是一个简单的水平标尺。
           
    
             
     
          • 在很多情况下，在块元素的顶部或底部简单地添加一条CSS边框就可以重现这个效果，但是只有在用
            元素来表示边框的时候才应该用CSS效果来替换。
            •  
     
          • 如果你只是将
            特别地用作一个分隔符，就像找到书中某一章的单独节一样，那么标尺应该有结构上的用途，应该用它而不是CSS边框。
            •  
     
          • hr标签有几个属性：size、width、noshade和align，但是所有这些属性都已经不推荐使用了，所以我们必须使用CSS来进行样式化。
            •  
     
          • 而这里的CSS样式化方法多少有些古怪…
            •  
    
           
          •  
   
        •  
          标签的作用是在标记中预留空白（比如，tab、空格或者换行）。
           
    
             
     
          • 如果空白对于理解内容很重要的，比如代码样例，就用
            •  
     
          • 这个标签的视觉效果可以用CSS的white-space属性重现，但是使用这个属性来代替
            意味着你将会在非CSS用户代理中丧失效果。
            •  
    
           
          •  
   
        •  
          类似地，和（上标和下标）元素也通过外表传达着重要的含义。
           
    
             
     
          • 方程式 e=mc2
            •  
     
          • 分子式 H2O
            •  
     
          • W3C还留意到（除了英语之外）某些语言需要使用上标和下标文本。 Mlle Dupont
            •  
     
          • 还可以在英语中使用上下标。最常见的例子就是在日期，或者用来指出脚注或者尾注的位置。 
      
               
       
            • The 14th of September
              •  
       
            • The committee report stated that the minister had acted in good faith.ii
              •  
      
             
            •  
    
           
          •  
  
         
  
        2.3 短语元素
         
  
           
   
        • 短语元素（phrase element）为文本赋予了意义。
          •  
   
        • 它们有助于改进文档的结构，使得文档的语义更加丰富，但同时还保留预期的视觉样式。
          •  
   
        • 短语元素的完整列表 
    
             
     
            •  
     
            •  
     
            •  
     
            •  
     
            •  
     
            •  
     
            •  
     
            •  
     
            •  
     
            •  
    
           
          •  
  
         
  
        2.3.1 强调
         
  
        资料
         
  
           
   
        • Molly E. Holzschlag的文章World Grows Small更加详细的讨论了国际化问题。
          •  
  
         
  
        2.3.2 引用和定义
         
  
           
   
        • cite属性，用在
          标签中指示引用的来源，还用在和中引用某个解释性文档，但是还有一个标签用来包含单独的参考资料，而不与任何特定的元素或者其他材料的引用相关。 
    
             
     
          • 比如书籍或者电影的标题。
            •  
     
          • 大多数用户代理将使用斜体字体显示引用，在打印资料时也可以常常看到这种排版习惯。
            •  
    
           
          •  
   
        • dfn元素，它指出某个术语的第一次出现，这个术语将在整个文档中重复使用。 
    
             
     
          • 通常也默认为斜体字显示。
            •  
     
          • 为术语定义添加唯一性id属性是一个值得考虑的措施，因为这可以让你能够从术语表中直接链接到这些术语。
            •  
    
           
          •  
  
         
  
        2.3.3 代码
         
  
           
   
        • 下面四个短语元素对于描述程序设计或者其他计算机相关的任务（比如描述用户输入）非常有用，即 
    
             
     
            •  
     
            •  
     
            •  
     
            •  
    
           
          •  
   
        • 和用来显示原始的计算机程序代码、(X)HTML标记、CSS，等等。 
    
             
     
          • 总是使用等宽字体显示，而则是使用斜体显示
            •  
     
          • 我们可以去掉下面代码的换行符，将换成
            ，但是当代码过长的时候，不用
            而用和
            ，就可以防止这些过长的代码行从布局中溢出。
            •  
    
           
          •  
  
         
  
        <html><head>head><body><code>
    #!/usr/local/bin/perl<br \>
    print "<var>Content-type: text/html\nvar>";<br \="">
    print "<var>Hello worldvar>\n";<br \="">
code>body>html>

         
  
           
   
        • sample描述的是这些代码的输出结果。 
    
             
     
          • 通常也使用等宽字体显示。
            •  
    
           
          •  
  
         
  
        <html>
	<head>head>
	<body>
		<p>
		   <samp>[paul@localhost ~]$ perl hello.cgisamp>
		p>
		<p>
		   <samp>Content-type: text/html<br \="">
		       <H1>Hello World</H1>samp>
		p>
	body>
html>

         
  
        利用实现命令提示窗口样式。
         
  
        samp {
    background: #000;
    border: 3px groove #ccc;
    color: #ccc;
    display: block;
    padding: 5px;
    width: 300px;
}

         
  
           
   
        • 指出需要用户使用键盘输入。 
    
             
     
          • 对于元素来说，最明显的事情就是设置其样式，使其看上去有点像键盘按键。
            •  
    
           
          •  
  
         
  
        <html>
	<head>head>
	<body>
		<p>Press <kbd>Akbd>, then <kbd>Bkbd>, then <kbd>Ckbd>. Finally, press the <kbd>Enterkbd> key to continue.p>
	body>
html>

         
  
        samp {
    background: #000;
    border: 3px groove #ccc;
    color: #ccc;
    display: block;
    padding: 5px;
    width: 300px;
}

         
  
        2.3.4 缩写词
         
  
           
   
        • 元素指出缩写文本，同时还常常在title属性中包含了未经缩写的完整文本
          •  
   
        • 则用于首字母缩写词acronym
          •  
   
        • 所有的首字母缩写词都属于缩写词，但是并非所有的的abbreviation都是首字母缩写。因而，如果不能确定的话，那么使用来描述内容总是正确的。
          •  
   
        • 屏幕阅读器和其他音响设备如何处理缩写词。 
    
             
     
          • 如果这个缩写词是一个acronym或者截断词，那么它就应该按照常规单词发音。
            •  
     
          • 如果这个缩写词是一个initialism的话，就应该逐字母读出来而不是作为一个普通单词那样发音。
            •  
    
           
          •  
  
         
  
        <html>
	<head>head>
	<body>
		<abbr>Mrabbr>
		<acronym>NATOacronym>
		<abbr class="initialism">BBCabbr>
	body>
html>

         
  
        abbr, acronym {
    speak: normal;
}
abbr.initialism {
    speak: spell-out;
}

         
  
        2.4 图像和其他媒体
         
  
        我们可以按照不同的方式将图像包含进来：行内图像、通过CSS背景图像；通过图像映射或者通过元素。这些方法都有各自的有点和缺陷。
         
  
        2.4.1 行内图像
         
  
         
  
           
   
        • alt属性 
    
             
     
          • 在XHTML和HTML中，不管alt属性是否包含值，所有的图像元素都应该包含这个属性。
            •  
     
          • alt属性的唯一作用就是为图像提供替换内容（alternative content），这就意味着这个属性的值必须能够重述这幅图像所包含的任何有意义的内容。
            •  
     
          • 如果图像没有任意意义，那么就将这个属性保留，并且将其值设置为空：alt=""。（还可以考虑是否可以完全将这幅图像删除，而将其放置到CSS中作为一幅装饰性的背景图像）
            •  
     
          • 并不是为了提供任何附加信息或者描述性标题，而应该由title属性来完成这些功能。
            •  
    
           
          •  
   
        • longdesc属性，提供了一个链接，指向一个为alt属性值提供更加详尽的补充说明页面。 
    
             
     
          • 但是在历史上，支持这个属性的浏览器非常少，因而应该慎用。
            •  
    
           
          •  
   
        • imag元素可以指定图像的高和宽的取值，单位为像素。 
    
             
     
          • 这些属性是可选的，但是使用这些属性有一个好处是在载入图像之前，浏览器就可以精确地显示文本内容，从而避免了在图像载入之后文本内容必须为图像腾让空间的麻烦。
            •  
     
          • 不好的地方在于，这些属性是描述性属性，理想情况下应该在CSS中设置这类属性，这样一来，如果尺寸发生变化，就更加方便修改。
            •  
     
          • 如果设置了这些与尺寸相关属性，就会导致在同样大小的盒子内显示alt属性值，如果文本内容的长度比预留的空间大的话，这可能并不是想要的结果。
            •  
    
           
          •  
  
         
  
        2.4.2 CSS背景图像
         
  
           
   
        • 为了尽可能帮助标记保持整洁，应该在网页中使用background属性来放置那些修饰性图像，这样只需要修改样式表，就可以为网站的外观做出重大的修改（还可以为网站的打印、移动和投影等各种不同版本分别指定图像。）
          •  
   
        • 坏处：当图像不可用但CSS可用的时候，替换内容就不会显示出现了，因此并不建议在导航按钮文本或者类似情况中使用CSS背景图像。
          •  
   
        • 只要不是重现原文内容，那么背景图像就能够极大地帮助我们获得一定的视觉效果。
          •  
  
         
  
        资料:
         
  
           
   
        • Dan Cederholm在他的文章Faux Columx中引证了“虚假背景栏（faux column）”的概念：在网页的上面使用单幅覆盖的背景图像，会产生出两列登高背景栏错觉，不管哪一列包含最多的内容。
          •  
   
        • Doug Bowman的文章Sliding Doors of CSS，他在这篇文章中详细地描述了一项技术，在导航菜单中使用一幅超大尺寸的背景图像，允许文本改变尺寸，并且允许背景图像根据文本大小调整。
          •  
   
        • Time Murtaugh的文章CSS Design: Mo’Betta Rollovers，他在这篇文章中描述了如何明智地使用background-image属性和:hover伪类，以便不依靠javascript就可以创建基于CSS的翻转图像。
          •  
  
         
  
        注：“rollover image”，即当鼠标移到一幅图像上时，该图像变为另一幅图像，鼠标离开后恢复为原图。
         
  
        2.4.3 图像映射
         
  
           
   
        • 图像映射（image map）有两个变种： 客户端和服务端。 
    
             
     
          • 客户端图像映射由一幅图像构成，这幅图像上面有一系列的预先设定好的不同形状和不同尺寸的热点区域，它们代表了多个链接。。
            •  
     
          • 服务端图像映射也是类似的结构，但是鼠标点击处的像素坐标会发送到服务器，由服务器计算出后续的动作。
            •  
    
           
          •  
   
        • 应该优先选择客户端图像映射，因为即使在图像被禁用或者不可用的情况下它们也可以访问，并且对于判断用户是否正在点击某个激活区域，客户端图像映射也能够提供即时的反馈。
          •  
   
        • 一幅图像映射就需要有如此众多的标记，这违背了将表示从内容中分离的原则。
          •  
   
        • 它由两个明显不同的部分组成，两者不能彼此嵌套。 
    
             
     
          • 映射元素（） 
      
               
       
            • 一个带有name属性的容器标签。
              •  
       
            • 这个标签可以包含任意数量的自结束标签。 
        
                 
         
              • 这些标签使用shape属性（circle、rect、poly或者default）来决定区域的形状
                •  
         
              • coords竖向标出这个形状的尺寸
                •  
         
              • href属性来确定当该区域点击之后应该将用户带往何处，或者使用nohref属性表示没有使用链接
                •  
        
               
              •  
      
             
            •  
     
          • 图像元素（） 
      
               
       
            • 具有usemap属性，这个属性的值应该等于映射的name属性的中。
              •  
       
            • ismap属性指出这幅图像是否映射。
              •  
      
             
            •  
    
           
          •  
  
         
  
        2.4.4 对象
         
  
           
   
        • 被设计用来在网页中包含类似图像、视频和Java小应用程序（Java applet）这类的对象。 
   
        • 它可以用来却带那些更加具体地和标签，还有专门的和标签。 
   
        • 存在一套反馈机制，通过这个机制，可以嵌套，让用户代理在不能呈现优先选择的时候能够显示替代内容。 
    
             
     
          • 用户代理会先尝试显示视频，如果不能显示的话，它应该尝试显示图像，但如果还不能小时的话，它就显示文本，这里根本不需要alt属性。
            •  
    
            
   
  
          <object data="myVideo.img" type="application/mpeg">
    <object data="myPicture.gif" type="image/gif">
        Some descriptive text, and <a href="link.html">a linka>.
    object>
object>

           
  
             
   
          • 由于缺乏浏览器支持，导致要比预期的难以使用，而且这个元素本身臃肿，它共有17个该元素特有的属性。 
   
          • 并不仅仅用来包含图形，它还可以使用参数来嵌入富媒体播放器，如Windows Media Player、RealPlayer、QuickTime和Flash Player，参数可以向网页用到的媒体播放器传递各种不同的参数。 
   
          • 当嵌入媒体的时候只需要关注一下，标签通常就是你所需要的东西。 
   
  

                            
                        
                    
                    
                    
            
                    
                    
                    
            
                
                
            
                    
                
            
            
        
    
    
            
        
            你可能感兴趣的:(html,javascript,前端)
            
        
            
            
            
                
              
                    
            • swagger使用指引
                        MA_Y_
swagger
                        
              1.swagger介绍在前后端分离开发中通常由后端程序员设计接口，完成后需要编写接口文档，最后将文档交给前端工程师，前端工程师参考文档进行开发。可以通过一些工具快速生成接口文档，本项目通过Swagger生成接口在线文档。什么是Swagger？OpenAPI规范（OpenAPISpecification简称OAS）是Linux基金会的一个项目，试图通过定义一种用来描述API格式或API定义的语言，来
              
                    
              • 
                    
            • 前端面试题常考汇总1
                        RayFars
前端
                        
              JS部分1.解释JavaScript中的闭包，并举例说明其应用场景闭包是指函数能够记住并访问它的词法作用域，即使这个函数在词法作用域之外执行。应用场景：数据隐藏：通过闭包，可以创建私有变量，只通过特定的函数来访问和修改这些变量。回调函数和事件处理：闭包常用于设置回调函数，因为回调函数需要访问其外部函数的变量。functioncreateCounter(){letcount=0;returnfunc
              
                    
              • 
                    
            • 前端知识速记--css篇：CSS3中的常见动画及实现方式
                        无限大.
#前端知识速记前端csscss3
                        
              前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
              
                    
              • 
                    
            • html中用npm包
                        是谁眉眼
htmlnpm前端
                        
              一.用webpack工具打包npm包到dist下js文件为浏览器能识别的文件1.创建一个文件夹html中引用打包后的js文件注意打包后的js文件是局部变量如果要在html中引入js中的变量先去js中把变量改成全局变量2.先初始化一个管理包的文件：输入npm命令“npminit-y3.输入npm命令安装webpack及webpack-cli，“npmiwebpackwebpack-cli-D”，然后
              
                    
              • 
                    
            • Web组件适配网页中iframe
                        

                        
              场景描述：当使用web组件加载带有iframe的页面时，由于H5的iframe标签的几个限制条件，可能会出现以下问题：1.由于iframe也要遵守浏览器同源策略，也有对应的白名单限制，所以也会出现跨域或者无法加载的问题，大多出现在本地或沙箱中的H5资源内联iframe时，并且cookie有时候也设置不上2.在应用侧调用runJavascript方法调用不到iframe里面，且主frame和ifra
              
                    
              • 
                    
            • JavaScript设计模式 -- 状态模式
                        鎈卟誃筅甡
javascript设计模式状态模式
                        
              在软件开发中，很多对象的行为会随着其内部状态的变化而改变。如果将所有状态逻辑写在一个类中，代码不仅臃肿而且难以维护。**状态模式（StatePattern）**正是为了解决这个问题而设计的。通过将对象的状态封装成独立的状态类，并将状态相关的行为转移到这些状态类中，状态模式让对象在内部状态发生变化时自动切换行为，达到了将状态转换与行为实现分离的目的。本文将详细介绍状态模式的核心思想、基本结构与优缺点
              
                    
              • 
                    
            • 本地部署model scope魔搭大模型流程
                        CQller
python算法深度学习机器学习jupyterpytorch
                        
              一、安装python二、安装Gradio三、添加镜像加速四、运行字符串倒叙五、运行绘图六、安装常用软件包和库七、我目前使用的软件包和库简介八、文字生成图片AI模型九、文字回复AI模型一、安装python可参考安装步骤：python学习笔记-python安装与环境变量配置_python环境变量-CSDN博客二、安装Gradio在cmd执行以下命令。Gradio封装了功能丰富的前端用户界面，一会儿用来
              
                    
              • 
                    
            • html5游戏引擎-Pharse.js学习笔记（一）
                        18520195858
游戏javascriptc/c++ViewUI
                        
              1.前言前几天随着flappybird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。我了解过cocos-2dforhtml5和phaser.js这两个引擎，其中前者比较复杂，对于有过coco
              
                    
              • 
                    
            • springboot项目配置https
                        愿企鹅飞（｡ò ∀ ó｡）
Javajavatomcatjarspringeclipse
                        
              1，必须去服务商购买一个ssl证书。2，以我想的是这个域名的8080端口当前端，8070当后端，3，前端配置简单直接去下载nginx证书把里面的key和证书粘到对应位置即可（用宝塔简单）4.springboot后端服务（下载Tomcat证书）按照这个方法https://blog.csdn.net/baidu_37302589/article/details/100692957配置端口配置成我需要的
              
                    
              • 
                    
            • java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ...
                        weixin_34383618
java前端后端ViewUI
                        
              导读：主要从4个方面来阐述，1：背景；2：思路；3：代码实现；4：使用一：封装背景像easyui之类的纯前端组件，也有下拉列表组件，但是使用的时候，每个下拉列表，要配一个URL,以及设置URL反回来的值和select的text，和value的对应关系，这有2个问题：一使用者必须知道URL，二，如果页面有10个下拉表表，要请求后台10次，肯定影响性能，而我想要的是使用者只要申明用哪个数据字典就行了，
              
                    
              • 
                    
            • 在JS中如何转换时间格式
                        豆豆（前端开发+ui设计）
javascript开发语言ecmascript
                        
              在JavaScript中，如果你想要转换时间格式，通常涉及到的是日期对象的操作。JavaScript的Date对象提供了许多方法来处理和格式化日期和时间。以下是一些常用的方法来转换时间格式：1、获取日期和时间组件使用Date对象的方法来获取年、月、日、时、分、秒等组件，然后按照你需要的格式拼接字符串。letdate=newDate();letyear=date.getFullYear();//获取
              
                    
              • 
                    
            • 前端面试题2（vue3）
                        GIS-CL
前端面试题前端vue.js
                        
              1.Vue3中的CompositionAPI是什么？与OptionsAPI的区别是什么？答案：CompositionAPI是Vue3引入的一种新的编程模型，它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比，CompositionAPI通过setup()函数集中管理组件的状态和行为，使得逻辑复用和代码组织变得更加容易。OptionsAPI：在Vue2中广泛使用，通过dat
              
                    
              • 
                    
            • 如何构建高效的 Vue 3 前端项目结构
                        东锋1.3
vue.jsvue.js前端javascript
                        
              假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结
              
                    
              • 
                    
            • Cursor前端开发提示词分享
                        前端程序猿i
前端
                        
              点击设置将提示词复制黏贴进输入框里即可Alwaysrespondin中文DONOTGIVEMEHIGHLEVELSTUFF,IFIASKFORFIXOREXPLANATION,IWANTACTUALCODEOREXPLANATION!!!IDON'TWANT"Here'showyoucanblablabla"-Youareaseniorfrontendengineer.-Ifcommandsnee
              
                    
              • 
                    
            • 使用 HTML CSS 和 JAVASCRIPT 的黑洞动画
                        谏君之
javascriptcsshtmljavascript
                        
              使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}
              
                    
              • 
                    
            • Vue3 中的 defineProps：优雅地实现子父组件传值
                        良月柒
vue.js前端javascript
                        
              Vue.js一直以来都是前端开发者们钟爱的框架之一，而在最新的Vue3中，引入了一些新的特性和改进，其中之一就是defineProps。defineProps提供了一种更加明确和类型安全的方式来定义子组件的props，让子父组件之间的数据传递更加清晰和可维护。本文将介绍Vue3中defineProps的用法以及如何在子组件中使用它来接收父组件传递的props数据。什么是defineProps？de
              
                    
              • 
                    
            • vue3项目开发总结
                        Yaru11
vue前端
                        
              一、项目准备1、明确项目需求和目标在开始构建项目之前，首先要明确项目的需求和目标。这包括了解项目的业务背景、功能需求、性能要求等，以便为后续的技术选型和架构设计提供指导。2、技术选型与框架选择前端框架：选择Vue3作为前端框架，利用其组件化、响应式等特性来提高开发效率和代码质量。构建工具：当前使用的是vue-cli。推荐使用Vite作为构建工具，因为它具有快速的冷启动、实时的热更新和简洁的配置等优
              
                    
              • 
                    
            • MTTK Vue Wrap 项目介绍
                        MTTKbelinda
VUEWrapvue.js前端javascript
                        
              关键字:Vue3,配置开发,快速开发,组件封装关于本项目概述MttkVueWrap是一个基于Vue3的组件封装工具，核心目标是通过纯JavaScript/TypeScript替代传统的单文件组件（SFC）开发模式，同时兼容与SFC的混合使用.它允许开发者通过类似JSON的配置对象或动态生成的脚本快速构建Vue组件，涵盖模板、双向绑定（v-model）、属性、事件、插槽等核心功能.项目起源在前端开发
              
                    
              • 
                    
            • 对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端
                        昨今
前端htmlcss
                        
              1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic
              
                    
              • 
                    
            • 《vue.js前端框架技术》
                        韩靓.
前端框架vue.jsflutter
                        
              一、引言在当今快速发展的互联网时代，前端开发技术不断推陈出新，众多框架和工具如雨后春笋般涌现，而Vue.js凭借其独特的优势，在前端开发领域中占据了重要的一席之地。它以简洁的语法、高效的性能和灵活的扩展性，为开发者提供了一种便捷且强大的方式来构建各类交互式的用户界面。无论是简单的企业展示网站、小型的移动应用，还是复杂的大型单页面应用（SPA），Vue.js都展现出了卓越的适应性和实用性，能够满足不
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【前缀和】2024E-分割数组的最大差值【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#前缀和javac++c语言华为odjavascript算法python
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavaC++CNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分类|不断更新
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【排序】2024E-热点网站统计【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#模拟javac++c语言华为odgolang算法leetcode
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出示例二输入输出解题思路代码pythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【BFS】2024E-狼羊过河【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#BFS#模拟算法javac++华为odc语言javascriptleetcode
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述补充说明示例输入输出说明解题思路转化为搜索状态树最小层数问题节点的设计以及更新重复状态的排除代入BFS代码框架代码pythonJavaC++CNodeJavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【模拟】2024E-找终点【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#模拟javac++c语言leetcodegolang华为od
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出说明示例二输入输出解题思路代码pythonjavaC++CNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【DFS/BFS】2024E-战场索敌【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#BFS#DFS算法javac++c语言leetcode华为odjavascript
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出解题思路代码解法一：BFSpythonjavacppCNodejavaScriptGo解法二：DFSpythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【贪心】2024E-用户调度问题【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#贪心javac++c语言leetcode华为odjavascriptpython
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分类|不断更新
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【贪心】2024E-静态代码扫描服务【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#贪心javac++c语言华为odpython算法javascript
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出说明示例二输入输出解题思路题意理解贪心策略代码pythonjavacppCNodejavaScriptgo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全
              
                    
              • 
                    
            • 【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【二分查找】2024E-部门人力分配【欧弟算法】全网注释最详细分类最全的华为OD真题题解
                        闭着眼睛学算法
最新华为OD真题#二分查找#贪心javac++华为odleetcode算法python
                        
              可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavacppCNodejavaScriptgo时空复杂度本题易错点左指针初始化问题华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题
              
                    
              • 
                    
            • web前端面试问什么，【前端，2024华为前端高级面试题及答案
                        uiuuyy67
2024年程序员学习前端面试华为
                        
              效果截图：用户名是只读的，所以无法在text文本框里输入值；账号是禁用的，直接变成灰色了。2.input标签常用的type属性值讲解text文本框password密码框radio单选框checkbox复选框file文件选择hidden隐藏域hidden是用户看不见的东西，给管理员（写网页的）操作保存信息的！submit提交reset重置（2）select下拉框option：下拉选项（下拉框的基本标
              
                    
              • 
                    
            • Vue 前端开发中的路由知识：从入门到精通
                        chenNorth。
vue前端vue.js前端javascript
                        
              文章目录引言1.VueRouter简介1.1安装VueRouter1.2配置VueRouter1.3在Vue实例中使用VueRouter2.路由的基本用法2.1路由映射2.2路由视图2.3路由链接3.动态路由3.1动态路径参数3.2访问动态参数3.3响应路由参数的变化4.嵌套路由4.1定义嵌套路由4.2渲染嵌套路由5.路由守卫5.1全局守卫5.2路由独享守卫5.3组件内守卫6.路由懒加载6.1使用
              
                    
              • 
                                
            • Java 并发包之线程池和原子计数
                                    lijingyao8206
Java计数ThreadPool并发包java线程池
                                    
              对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。 
    这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C
              
                                
              • 
                                
            • java编程思想 抽象类和接口
                                    百合不是茶
java抽象类接口
                                    
              接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持 
  
1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错) 
  
抽象方法 : 在方法中仅有声明而没有方法体  
  
 
package com.wj.Interface;


              
                                
              • 
                                
            • [房地产与大数据]房地产数据挖掘系统
                                    comsci
数据挖掘
                                    
               
       随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间... 
 
       所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产 
 
    &nb
              
                                
              • 
                                
            • 数组队列总结
                                    沐刃青蛟
数组队列
                                    
                
    数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。 
  
   以下是数组队列的功能实现代码： 
  
import List.Student;

public class
              
                                
              • 
                                
            • Oracle存储过程无法编译的解决方法
                                    IT独行者
oracle存储过程　
                                    
              今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。 
   


1.     查看无效对象  
XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN
              
                                
              • 
                                
            • 重装系统之后oracle恢复
                                    文强chu
oracle
                                    
              前几天正在使用电脑，没有暂停oracle的各种服务。 
突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 
无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 
晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 
直接把我的c盘给格式化了 并且清理了注册表，再装系统。 
然后的结果就是我的oracl
              
                                
              • 
                                
            • python学习二（ 一些基础语法）
                                    小桔子
pthon基础语法
                                    
              紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 
1.ptyhon的源文件以UTF-8编码格式 
2. 
 /   除 结果浮点型 
 //  除 结果整形 
 %   除 取余数 
 *   乘 
 **  乘方 eg 5**2 结果是5的2次方25 
 _&
              
                                
              • 
                                
            • svn 常用命令
                                    aichenglong
SVN版本回退
                                    
              1 svn回退版本 
  1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 
 两者的区别: 
  revert this version:表示回退到当前版本(该版本后的版本全部作废) 
  revert chanages from this versio
              
                                
              • 
                                
            • 某小公司面试归来
                                    alafqq
面试
                                    
              先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 
老拿这些对付毕业生的东东来吓唬我。。 
 
面试官很刁难，问了几个问题，记录下； 
 
1，包的范围。。。public,private,protect. --悲剧了 
2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 
3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 
4，stru
              
                                
              • 
                                
            • 动态数组的存储速度比较 集合框架
                                    百合不是茶
集合框架
                                    
              集合框架： 
自定义数据结构(增删改查等) 
package 数组;

/**
 * 创建动态数组
 * @author 百合
 *
 */

public class ArrayDemo{
	
	//定义一个数组来存放数据
	
	String[] src = new String[0];
	
	/**
	 * 增加元素加入容器 
	 * @param s要加入容器
              
                                
              • 
                                
            • 用JS实现一个JS对象，对象里有两个属性一个方法
                                    bijian1013
js对象
                                    
              <html> 
  <head> 
  </head> 
  <body> 
    用js代码实现一个js对象，对象里有两个属性，一个方法 
  </body> 
  <script> 
        var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){ 
 
              
                                
              • 
                                
            • 探索JUnit4扩展：使用Rule
                                    bijian1013
java单元测试JUnitRule
                                    
                      在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 
1. Rule 
      &n
              
                                
              • 
                                
            • [Gson一]非泛型POJO对象的反序列化
                                    bit1129
POJO
                                    
              当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 
1. POJO对象不包含任何泛型的字段 
2. POJO对象包含泛型字段，例如泛型集合或者泛型类 
 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO   
 
              
                                
              • 
                                
            • 【Kakfa五】Kafka Producer和Consumer基本使用
                                    bit1129
kafka
                                    
              0.Kafka服务器的配置 
一个Broker， 
一个Topic 
Topic中只有一个Partition（）   1. Producer： 
package kafka.examples.producers;


import kafka.producer.KeyedMessage;
import kafka.javaapi.producer.Producer;
impor
              
                                
              • 
                                
            • lsyncd实时同步搭建指南——取代rsync+inotify
                                    ronin47

                                    
              1. 几大实时同步工具比较 1.1 inotify + rsync 
最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify
              
                                
              • 
                                
            • java-9. 判断整数序列是不是二元查找树的后序遍历结果
                                    bylijinnan
java
                                    
              

public class IsBinTreePostTraverse{
	
	static boolean isBSTPostOrder(int[] a){
		if(a==null){
			return false;
		}
		/*1.只有一个结点时，肯定是查找树
		 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是   6		{6,5}对应的BST是
              
                                
              • 
                                
            • MySQL的sum函数返回的类型
                                    bylijinnan
javaspringsqlmysqljdbc
                                    
              今天项目切换数据库时，出错 
 
访问数据库的代码大概是这样： 
 

String sql =  "select sum(number) as sumNumberOfOneDay from tableName";
List<Map> rows = getJdbcTemplate().queryForList(sql);
for (Map row : rows
              
                                
              • 
                                
            • java设计模式之单例模式
                                    chicony
java设计模式
                                    
                
在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 
　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。  单例模式的结构
  
　　单例模式的特点： 
 
 单例类只能有一个实例。 
 单例类必须自己创建自己的唯一实例。 
 单例类必须给所有其他对象提供这一实例。 
 　　饿汉式单例类 
  
publ
              
                                
              • 
                                
            • javascript取当月最后一天
                                    ctrain
JavaScript
                                    
              
<!--javascript取当月最后一天-->
<script   language=javascript>  
  var current = new Date();
  var year = current.getYear();
  var month = current.getMonth();
  showMonthLastDay(year, mont
              
                                
              • 
                                
            • linux tune2fs命令详解
                                    daizj
linuxtune2fs查看系统文件块信息
                                    
              一.简介： 
tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 
二.用法： 
Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou
              
                                
              • 
                                
            • 做有中国特色的程序员
                                    dcj3sjt126com
程序员
                                    
                
从出版业说起  网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。   许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有
              
                                
              • 
                                
            • Android：TextView属性大全
                                    dcj3sjt126com
textview
                                    
              android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输
              
                                
              • 
                                
            • tomcat虚拟目录安装及其配置
                                    eksliang
tomcat配置说明tomca部署web应用tomcat虚拟目录安装
                                    
              转载请出自出处：http://eksliang.iteye.com/blog/2097184 
1.-------------------------------------------tomcat  目录结构 
 
 config：存放tomcat的配置文件 
 temp  ：存放tomcat跑起来后存放临时文件用的 
 work   ： 当第一次访问应用中的jsp
              
                                
              • 
                                
            • 浅谈：APP有哪些常被黑客利用的安全漏洞
                                    gg163
APP
                                    
              首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 
1. 应用反编译漏洞：APK 包非常容易被反编译成可读
              
                                
              • 
                                
            • C#根据网址生成静态页面
                                    hvt
Web.netC#asp.nethovertree
                                    
              HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法： 
  
bool CreateHtmlFile(string url, string path)
{ 
//http://keleyi.com/a/bjae/3d10wfax.htm

stri
              
                                
              • 
                                
            • SVG 教程 （一）
                                    天梯梦
svg
                                    
              SVG 简介   
SVG 是使用 XML 来描述二维图形和绘图程序的语言。  学习之前应具备的基础知识： 
继续学习之前，你应该对以下内容有基本的了解： 
 
 HTML 
 XML 基础 
 
如果希望首先学习这些内容，请在本站的首页选择相应的教程。  什么是SVG？ 
 
 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) 
 SVG 用来定义用于网络的基于矢量
              
                                
              • 
                                
            • 一个简单的java栈
                                    luyulong
java数据结构栈
                                    
              
public class MyStack {
	private long[] arr;

	private int top;

	public MyStack() {
		arr = new long[10];
		top = -1;
	}

	public MyStack(int maxsize) {
		arr = new long[maxsize];
		top 
              
                                
              • 
                                
            • 基础数据结构和算法八：Binary search
                                    sunwinner
AlgorithmBinary search
                                    
              Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori
              
                                
              • 
                                
            • 12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！
                                    刘星宇
c面试
                                    
              12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 
1.gets()函数 
问：请找出下面代码里的问题： 
#include<stdio.h> 
int main(void) 
{ 
    char buff[10]; 
    memset(buff,0,sizeof(buff)); 
 

              
                                
              • 
                                
            • ITeye 7月技术图书有奖试读获奖名单公布
                                    ITeye管理员
活动ITeye试读
                                    
              ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 
 
 
7月试读活动回顾： 
http://webmaster.iteye.com/blog/2092746 
 
 
本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 
 
 
《Java性能优化权威指南》 
 
 
              
                                
              •