精华内容
下载资源
问答
  • html嵌套规则

    千次阅读 2015-03-18 11:26:39
    先来看以下这样一段代码: ...我们的印象会有这样的嵌套规则:   内联元素不能嵌套块元素元素和元素不能嵌套块元素 那么到底什么是块元素,什么是内联元素? 以下是W3C CSS2

    先来看以下这样一段代码:

    <ul>
       <li><h4><a href=""><div></div></a></h4></li>
     </ul>

    当然,我是不会告诉你这段代码来自于FACEBOOK的 ,各位认为以上元素的嵌套有没有问题呢?我们会在后面讨论这个。

    HTML4/XHTML的嵌套规则

    在我们的印象中会有这样的嵌套规则:

    html4

     

    内联元素不能嵌套块元素<p>元素和<h1~6>元素不能嵌套块元素

    那么到底什么是块元素,什么是内联元素

    以下是W3C CSS2.1规范中对块元素和内联元素的定义:

    Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

    Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

    我们可以这样理解:块元素一般都从新行开始,内联元素在一行内显示,我们也可以通过CSS属性display的'inline' 或 ' block' 来改变元素为内联元素或块元素,当然这是CSS中对元素的分类,显然用 'display' 的属性值来对html元素进行分类是不严谨的。

    如果按照上述规则来讲,那么FACEBOOK的做法就是一种错误的做法,因为他在内联元素<a>元素中嵌套了块元素元素<div>,但是细心的读者应该会发现上述规则是基于HTML4/xHTML1的strict模式,而FACEBOOK现在已经统一使用了html5的doctype,那么这个规则到底还是是否适用?

    HTML5的元素嵌套规则

    元素的嵌套规则和页面头部申明的DTD有着千丝万缕的关系,DTD基础请查看我之前写的文章《DTD详解》,那么在最新的HTML5规范中是否对元素嵌套有着新的规范呢?

    让我们先了解下W3C在最新的HTML5规范中对元素的分类方式:

    w3c html5 content

    如上图,元素的分类不再是块元素或内联元素这样来分类(其实从来就没有这样分),而是按照如下分类来分:Flow(流式元素)、Heading(标题元素)、Sectioning(章节元素)、Phrasing(段落元素)、Embedded(嵌入元素)、Interactive(交互元素)、Metadata(元数据元素)。

    Flow(流式元素)

    在应用程序和文档的主体部分中使用的大部分元素都被分类为流式元素

    a, abbr, address, area(如果它是map元素的后裔), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl,em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter,nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style(如果该元素设置了scoped属性), sub, sup, svg, table,textarea, time, u, ul, var, video, wbr, text

    Heading(标题元素)

    标题式元素定义一个区块/章节(section)(无论是明确的使用章节式内容的元素标记,或者标题式内容自身所隐含的)的标题。

    h1, h2, h3, h4, h5, h6, hgroup

    Sectioning(章节元素)

    章节式元素是用于定义标题及页脚范围的元素。

    article, aside, nav, section

    Phrasing(段落元素)

    段落式元素是文档中的文本、标记段落级文本的元素。

    a(如果其只包含段落式元素), abbr, area(如果它是map元素的后裔), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del(如果其只包含段落式元素), dfn, em, embed, i,iframe, img, input, ins(如果其只包含段落式元素), kbd, keygen, label, map(如果其只包含段落式元素), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script,select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text

    Embedded(嵌入元素)

    嵌入式元素是引用或插入到文档中其他资源的元素。

    audio, canvas, embed, iframe, img, math, object, svg, video

    Interactive(交互元素)

    交互式元素是专门用于与用户交互的元素。

    a, audio(如果设置了controls属性), button, details, embed, iframe, img(如果设置了usemap属性), input(如果type属性不为hidden状态), keygen, label, menu(如果type属性为toolbar状态),object(如果设置了usemap属性), select, textarea, video(如果设置了controls属性)

    Metadata(元数据元素)

    元数据元素是可以被用于说明其他内容的表现或行为,或者在当前文档和其他文档之间建立联系的元素

    base,command,link,meta,noscript,script,style,title

    各分类会有交叉或重叠的现象,这说明在html5中,元素可能属于上述所有分类中的一个或多个。

    例子(1):<h1>~<h6>元素:

    • Categories:
      • Flow content.
      • Heading content.
      • Palpable content.
    • Contexts in which this element can be used:
      • As a child of an hgroup element.
      • Where flow content is expected.
    • Content model:
      • Phrasing content.

    其中的「Categories」说明该元素的类别,「Contexts in which this element can be used」说明该元素能在何种场景下被使用,也就是它的父元素是什么,「Content model」说明该元素可以包含的内容是什么,由于页面中的元素是层层嵌套的,一个元素有可能既是父元素同时也是子元素的角色,所以下面我们以「Content model」也就是可包含的子元素做讨论。

    那么对于h1~h6元素:

    • 它们同时属于Flow content 、Heading content 和 Palpable content三个分类
    • 它们的父元素可以是<hgroup>,同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素
    • 它们允许的子元素是段落式元素

    例子(2):<div>元素

    • Categories:
      • Flow content.
      • Palpable content.
    • Contexts in which this element can be used:
      • Where phrasing content is expected.
    • Content model:
      • Flow content.

    对于<div>元素:

    • 同时属于Flow content 、 Palpable content分类
    • 父元素必须是那些子元素为段落式元素的元素
    • 允许的子元素是流式元素

    <div>元素允许的子元素是流式元素,流式元素基本涵括了页面中的大部分元素,所以我们在用<div>时可以不用担心嵌套错误的问题。

    但对于<h1>~<h6>元素,它们允许的子元素为段落式元素,而段落式元素并不包含诸如<div>、<p>、<ul><ol>之类的元素,这就说明按照html5的规范,是不允许在标题元素内部嵌入<div>、<p>、<ul><ol>之类的元素。

    例子(3):<a>元素

    • Categories:
      • Flow content.
      • Phrasing content.
      • Interactive content.
      • Palpable content.
    • Contexts in which this element can be used:
      • Where phrasing content is expected.
    • Content model:
      • Transparent, but there must be no interactive content descendant.

    对于<a>元素:

    • 同时属于Flow content 、 Phrasing contentInteractive contentPalpable content分类
    • 父元素必须是那些子元素为段落式元素的元素
    • 允许的子元素是以它的父元素允许的子元素为准,但不能包含交互式元素

    这样看<a>元素还是挺有意思的,允许的子元素要看它的父元素所能包含的子元素。

    再来看文章开头中提到的代码

     <ul>
       <li><h4><a href=""><div></div></a></h4></li>
     </ul>

    这时<a>的父元素为<h4>,对于<h1>~<h6>的标题元素上面已经提过,允许的子元素是段落式元素,那么此时对于<a>允许的子元素即为段落式元素,而段落式元素中是不包含<div>元素的,所以FCAEBOOK这样的嵌套方法是错误的!

    让我们来把代码做一下修改:

    <ul>
       <li><div><a href=""><div></div></a></div></li>
     </ul>

    这时<a>的父元素为<div>,而<div>元素允许的子元素是流式元素,流式元素中包含<div>元素,所以这样的情形下在<a>里面嵌套<div>就是正确的做法!

    嵌套错误可能引起的问题

    上面讲了HTML5对元素新的分类方式和以<h1>~<h6>、<div>、<a>元素举例讲述了各自的嵌套规则,但FACEBOOK即使不按照标准去嵌套也不会有大的错误问题,这就给我们带来了一个思考:嵌套错误到底会不会有问题?

    例子(1):开始与结束标签嵌套错误

    <div><h2>内容</div></h2>

    测试结果:

    element11

    例子(2):<p>元素嵌套<div>元素

    <p><div>内容</div></p>

    测试结果:

    element12

    例子(3):列表元素<li>兄弟元素为<div>

    <ul><li>内容</li><div>内容</div></ul>

    测试结果:

    element13

    例子(4):<h2>元素嵌套<div>元素

    <h2><div>内容</div></h2>

    测试结果:

    element14

    例子(5):<a>元素嵌套<a>元素

    <a href=""><a href="">内容</a></a>

    测试结果:

    element15

    通过上述例子,我们总结如下:

    • 元素开始与结束标签嵌套错误,页面可以在大部分浏览器被正常解析,IE9会出现解析错误
    • 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误
    • 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常
    • 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误
    • 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误

    其实,这里说解析错误并不是很合理,应该是说浏览器解析出来的结果和我们期望的结果不一致,但任何的嵌套错误都不会导致页面呈现有很大的出错。

    我们知道JS代码如果写的有语法错误,浏览器的JS解释器就会拒绝执行并且报错,而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。

    严格嵌套约束、语义嵌套约束

    通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误,这其实是W3C规范的严格嵌套约束,严格嵌套约束要求必须去遵守,不然就会导致所有浏览器的解析错误。

    严格嵌套约束规则:

    • a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
    • <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
    • 暂时没有发现更多,有的欢迎告诉我

    语义嵌套约束:

    每个元素基本都有自己的嵌套规则(即父元素可以是什么,子元素可以是什么),除了严格嵌套约束之外的一些规则就是语义嵌套约束,对于语义嵌套约束,如果不遵守,页面可能正常,但也可能解析错误,这和下面要讲的容错机制有关。

    浏览器的容错机制

    并不是每位同学在写完页面后去做合法性检查,因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页,每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套,并且会去猜测前端们到底想如何呈现网页,这是浏览器的容错机制

    这其实在告诉我们,我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样,但那其实是浏览器的一种容错机制,我们没有理由让自己以一个随性的态度去coding,对待自己的代码应该一丝不苟,即使HTML5的胸襟很宽广。

    拥抱WEB标准

    原本我们认为从HTML4到XHTML是一个时代,现在又从XHTML跨到了HTML5,新时代新标准的诞生,我们应该敞开胸怀去拥抱,而不是排斥。

    你关注或不关注,标准就在那里,只增不减。我们应该感谢W3C这样一个组织,让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然,也许你会像90年代那样,JS引用一个元素都需要为某个浏览器写一套自己的代码。

    WEB标准只会使我们吃饭变得更香,睡眠变得更好,新的技术或标准会推动我们去富有热情的coding,而不是每天在重复劳动。


    展开全文
  • 我们使用各种浏览器时,时常发现即使不按照标准去嵌套也不会有大的错误问题,这就给我们带来了一个思考:嵌套错误到底会不会有问题? 举个栗子1:开始与结束标签嵌套错误 <div><h2>内容</div>...

    嵌套错误可能引起的问题

    在我们使用各种浏览器时,时常发现即使不按照标准去嵌套也不会有大的错误问题,这就给我们带来了一个思考:嵌套错误到底会不会有问题?

    举个栗子1:开始与结束标签嵌套错误

    <div><h2>内容</div></h2>

    测试结果:

    开始与结束标签嵌套错误

    举个栗子2:<p>元素嵌套<div>元素

    <p><div>内容</div></p>

    测试结果:

    QQ图片20171117181634

    举个栗子3:列表元素<li>兄弟元素为<div>

    <ul><li>内容</li><div>内容</div></ul>

    测试结果:

    列表元素li兄弟元素为div

    举个栗子4:<h2>元素嵌套<div>元素

    <h2><div>内容</div></h2>

    测试结果:

    h2元素嵌套div元素

    举个栗子5:<a>元素嵌套<a>元素

    <a href=""><a href="">内容</a></a>

    测试结果:

    a元素嵌套a元素

    通过上述栗子,我们总结如下:

    • 元素开始与结束标签嵌套错误,页面可以在大部分浏览器被正常解析,IE9会出现解析错误
    • 在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误
    • 在<h1>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常
    • 在<a>元素内嵌入<a>元素会导致所有浏览器的解析错误
    • 在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误

    其实,这里说解析错误并不是很合理,应该是说浏览器解析出来的结果和我们期望的结果不一致,但任何的嵌套错误都不会导致页面呈现有很大的出错。

    新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

    我们知道JS代码如果写的有语法错误,浏览器的JS解释器就会拒绝执行并且报错,而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。

    严格嵌套约束、语义嵌套约束

    通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误,这其实是W3C规范的严格嵌套约束,严格嵌套约束要求必须去遵守,不然就会导致所有浏览器的解析错误。

    严格嵌套约束规则:

    • a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
    • <p>里面不可以嵌套<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
    • 暂时没有发现更多,有的欢迎告诉我

    语义嵌套约束:

    每个元素基本都有自己的嵌套规则(即父元素可以是什么,子元素可以是什么),除了严格嵌套约束之外的一些规则就是语义嵌套约束,对于语义嵌套约束,如果不遵守,页面可能正常,但也可能解析错误,这和下面要讲的容错机制有关。

    浏览器的容错机制

    并不是每位同学在写完页面后去做合法性检查,因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页,每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套,并且会去猜测前端们到底想如何呈现网页,这是浏览器的容错机制

    这其实在告诉我们,我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样,但那其实是浏览器的一种容错机制,我们没有理由让自己以一个随性的态度去coding,对待自己的代码应该一丝不苟,即使HTML5的胸襟很宽广。

    拥抱WEB标准

    原本我们认为从HTML4到XHTML是一个时代,现在又从XHTML跨到了HTML5,新时代新标准的诞生,我们应该敞开胸怀去拥抱,而不是排斥。

    你关注或不关注,标准就在那里,只增不减。我们应该感谢W3C这样一个组织,让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然,也许你会像90年代那样,JS引用一个元素都需要为某个浏览器写一套自己的代码。

    WEB标准只会使我们吃饭变得更香,睡眠变得更好,新的技术或标准会推动我们去富有热情的coding,而不是每天在重复劳动。

    补充一些标准的常用链接:

    展开全文
  • 这篇文章,我将介绍通过嵌套 Struts 标记 和 创建单选按钮组。然后我用一个特定的表单 bean 指向这个标记并对保存单选按钮值的 String[] 数组进行迭代,把相同的 name 属性分配给每个 value 属性。请参阅 下载区...

    在这篇文章中,我将介绍通过嵌套 Struts 标记 <logic:iterate/><html:radio/> 创建单选按钮组。然后我用一个特定的表单 bean 指向这个标记并对保存单选按钮值的 String[] 数组进行迭代,把相同的 name 属性分配给每个 value 属性。

    请参阅 下载区 获得完整的示例源代码;如果需要下载 Struts 框架,请参阅 参考资料

    五步诀窍

    为了简单起见,我用与上次在动态复选框中使用的相同工作示例来演示单选按钮。我的简单的用户界面使用单选按钮元素来显示喜玛拉雅山顶峰高度的 String[] 数组,第二个 selectedMountain String 数组代表选中的单选按钮。在创建了按钮之后,调用一个 JavaScript 函数对单选按钮进行预选。

    根据喜玛拉雅这个示例,用 Struts 创建动态选择的单选按钮的诀窍包含五个部分:

    1. 一个假数据 类,其中容纳 mountainsselectedMountain 数据。
    2. 一个表单 bean,包含单选按钮的 String[] 数组和特意选中的按钮的 String
    3. 一个带有表单的 JSP,显示处于所需状态的单选按钮。
    4. 一个 JSP,显示表单中选中的元素。
    5. 一个 Action 类,从表单页面转到显示页面。

    单选按钮诀窍和上次学的动态复选框诀窍的主要区别是:Struts 没有提供自动创建 selected 值的工具,而这通常是创建动态单选按钮所需要的。虽然用内置在 Struts JSP 标记中的功能预先选中 checkboxselect 输入类型相当简单,但是 radio button 输入类型要求不同的解决方案。幸运的是,使用来自表单 bean 的信息和几行 JavaScript 代码就可以实现这个要求,如第 3 步所示。

    第 1 步. 创建数据层

    我做好了一个假的数据类,将来自业务层的数据呈现到应用程序视图层,视图层是我要考虑的事。名为 FakeData 的类包含两个静态方法,如清单 1 所示:


    清单 1. FakeData.java



    创建假的数据层是一种有用的用户界面开发实践,因为最终应用程序要使用的持续存储层对于前端开发人员来说,通常是看不到的。所以没有必要等待后台团队把工作完成,可以方便地开发一个假的数据层来模拟最终要发送过来的 API 和功能。使用假数据层,可以进行用户界面开发并降低对其他团队的依赖。有了假数据层,还可以定义到项目其他部分的 API 连接,并确保在集成所有部分的时候问题较少。

    第 2 步. 创建表单 bean

    最终要填充应用程序的值可能来自比清单 1 所示的框架复杂得多的框架。对于更漂亮的示例,有一个好消息,就是清单 2 中的表单 bean 不必做任何繁重的工作,所以它只是一个带有 getter 和 setter 方法的简单 Java™ 对象。实际的值是在调用构造函数时插入的。


    清单 2. RadioTestForm.java



    为了清晰起见,我包含了表单 bean 的所有 Java 代码。注意,Kangchenjunga 同时列出在 selectedMountainmountains 字段中,在构造函数中实例化,并用 FakeData 类来填充。现在,我已经有了足够的信息,可以把 Kangchenjunga 传递到 JSP,作为 preselected 的初始值。

    第 3 步. 创建单选按钮 JSP

    清单 3 包含表单页面的 JSP 代码,表单页面中包含单选按钮和预选的值。请注意 Java 文件和逻辑、HTML、bean 标记与表单底部的 JavaScript 函数之间的关系。我对 mountains 集合进行迭代,以创建单选按钮。这个工作完成之后,我添加 JavaScript 并将 selectedMountain 的值填充到其中,并与单选按钮数组进行比较,以选择正确的按钮。


    清单 3. 包含单选按钮和预选值的 JSP


    第 4 步. 创建显示页面

    显示页面基本与复选框诀窍中使用的页面相同,区别只是不需要迭代,因为只选中了一个值。需要做的只是列出 bean 中选中的 mountain,如清单 4 所示:


    清单 4. 显示页面的 JSP


    第 5 步. 编写 Action 类

    正像我在 前一篇文章 提到过的,Action 类比起这个诀窍中的其他组件来说,做的工作并不多。在这里要做的仅仅是得到 String 数组和 selectedMountain 的值,并让显示页面能够使用它们。


    清单 5. Action 类


    诀窍内部

    诀窍背后真正起作用的是 JavaScript。首先,我在清单 5 中,为 JSP 表单内的 selectedMountain 字段定义了一个 JSP 脚本变量,如下所示:



    在表单下面,我创建了一个 JavaScript 函数,包含以下两行:




    在客户端脚本内部,我创建了 selRadio JavaScript 变量然后对文档内的所有元素进行查找(find),查找 id (或者预编译代码中的 styleId)与 selectedRadio 变量匹配的元素。我通过把 <html:radio/> 标记的 styleId 属性设置成与它的名称/值匹配来做到这点。在 JavaScript 函数迅速地在页面上的 ID 之间迭代的时候,只是把单一单选按钮设置为 selected

    替代方法

    用如下所示的 JavaScript 方法也能产生同样效果:


    这个脚本只区分表单元素的 name 属性而不是 id 属性。两种实现都可以工作,所以具体选择哪一种取决于个人需要和偏好。JSP 表单页面的实际输出看起来像清单 6:


    清单 6. JSP 表单页面的输出


    展开全文
  • HTML中标记详解

    千次阅读 2012-08-29 16:49:03
    基底网址标记 (相对路径附基底网址.设置的绝对路径的后面).绝对路径不受基底网址设定的绝对路径控制. ▲. 基底文字标记表示文字的字体\字号和颜色 属性:face字体 size字号 color颜色 ▲. 标题标记 ▲. 元...
    一.Html的头部标记 (位于<head>和</head>之间)
    ▲.<base> 基底网址标记 (相对路径附在基底网址中.设置的绝对路径的后面).绝对路径不受基底网址设定的绝对路径控制.
    ▲.<basefont> 基底文字标记表示文字的字体\字号和颜色
    属性:face字体 size字号 color颜色
    ▲.<title> 标题标记
    ▲.<meta> 元信息标记
    ⒈标记属性:
    ①『name 名称』
    ★ name的其它属性:
    A.copyright(版权)
    说明:标注版权
    用法:<meta content="">
    注意:content="版权说明"
    B.generator(编辑器)
    说明:编辑器的说明
    用法:<meta content="">
    注意:content="你所用编辑器"
    C.revisit-after(重访)
    用法:<meta content="">
    D.build(网站建设时间)
    说明:标注时间
    用法:<meta content="">
    注意:content="输入日期"
    E.reply-to(记载联系人邮箱)
    用法:<meta content="">
    注意:content="网站联系人邮箱"
    ②『content 内容 』
    ★ content属性:
    A.charset
    说明:设置语系。Charset选项:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us- ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集
    ③『HTTP-EQUIV〓HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。』
    ★ HTTP-EQUIV属性:
    A.Content-Type
    说明:设定页面使用的字符集,用以说明主页制作所使用的文字已及语言,浏览器会根据此来调用相应的字符集显示page内容。
    B.refresh
    说明:刷新文档
    C.值
    C1.page-enter
    说明:打开网页时记录网页转场的效果
    结合content属性:revealtrans(duration=3表示滤镜特效持续的时间为3秒,transtion=滤镜类型,表示使用哪种特效,取值为0-23)
    C2.page-exit
    说明:离开网页时网页过渡的效果
    ★ HTTP-EQUIV常用类型:
    A.Expires(期限)
    说明:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅.
    用法:<meta http-epuiv="expires" content="0">
    <meta http-epuiv="expires" content="wed,26 feb 1997 08:21:57 GMT">
    注意:必须使用GMT的时间格式,或直接设置为0(数字表示多少时间后过期)
    B.Pragma(cach模式)
    说明:禁止浏览器从本地机的缓存中调阅页面内容.
    用法:<meta http-epuiv="Pragma" content="NO-cach">
    注意:网页不保存在缓存中,每次访问都刷新页面.这样设定,访问者将无法脱机浏览.
    C.Window-target(显示窗口的设定)
    用法:<meta http-epuiv="Window-target" content="_top">
    注意:这个属性是用来防止别人在框架里调用你的页面.content选项:_blank _top _self _parent.
    ④『TRANSITION 滤镜类型』
    ★ 基本语法:<meta http-epuiv="page-enter" content="revealtrans(duration=value,transition=number)"
    ★ 注意:number可取以下数值
    0 矩形减小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 向上擦除 5 向下擦除 6 向左擦除 7 向右擦除 8 垂直百叶窗 9 水平百叶窗 10 横向棋盘式 11 纵向棋盘式 12 溶解 13 左右向中部收缩 14 中部向左右展开 15 上下向中部收缩 16 中部向上下展开 17 阶梯状向左下展开 18 阶梯状向左上展开 19 阶梯状向右下展开 20 阶梯状向右上展开 21 随机水平线 22 随机垂直线 23 以上随机选择


    二.Html内部主体标记
    ▲.主要位于<body>与<body>之间
    相关属性:
    A.bgcolor     设定页面背景颜色
    B.background 设定页面背景图像
    C.text        设定页面文字的颜色
    D.bgproperties设定页面背景图像为固定
    E.link        设定页面默认的链接颜色
    F.vlink       设定页面访问过后的链接颜色
    G.alink       设定鼠标正在单击时的链接颜色
    H.leftmargin 设定页面的左边距
    I.topmargin   设定页面的上边距


    三.文字包括的内容
    ▲.文字内容位于<body>与<body>之间,其中有普通文字\空格符号\特殊字符\注释语句
    ▲.标题字标记:有六种标题<h1----h6>
    ★<h1----h6>有一种属性:<align>
    (对齐)
    ★<align>有四种对齐方式(<left>左<right>右<center>居中<justify>两端)
    ▲.文字段落的修饰标记
    ★<b>粗体标记
    ★<em>斜体标记
    ★<s>删除线标记
    ★<u>下划线标记
    ★<sup>上标标记
    ★<sub>下标标记
    ★<big>大字号标记
    ★<small>小字号标记
    ★<font>标记:基本语法<font face="字体" size="字号" color="颜色">文字</font>
    ★<p>段落标记:一个属性<align>三种对齐方式:左\中\右
    ★<pre>域格式化标记:表示在代码视图与设计视图格式一样
    ★<center>居中标记
    ★<hr>水平线标记
    ★<kbd>提示标记
    ★<var>变量标记 :斜体显示程序代码
    ★<address>标记:用于斜体显示文档中比较重要的信息
    ★<blink>闪烁标记1秒一次(不被IE4.0及以上版本支持)
    ★<tt>标记:使文字以标准打印机字体显示


    四.列表的标记
    ▲.无序列表 说明:通常用圆点\圆框\方框来表示
    ★<ul> 项目列表
    ★<li> 列表项 有个属性:1.type
    A.type 说明:可以设置圆圈和方块(1.type=circle代表项目符号为圆圈。通过type改变项目符号。2.type=disc代表项目符号为圆点。通过type改变项目符号。3.type=square代表项目符号为方块。通过type改变项目符号。)
    ▲.有序列表 说明:通常用数字和字母来表示
    ★<ol> 编号列表 有两个属性:1.type 2.start
    A.type 说明:可以设置数字.字母.小写和大写字母.小写和大写罗马数字
    B.start 说明:设置从那个字母和数字开始.默认从1开始
    ★<li> 列表项
    ▲.定义列表 说明:一般分两个层次来表示 也称为字典列表
    ★<dl> 定义列表
    ★<dt> 定义术语
    ★<dd> 定义说明
    ▲.列表的嵌套


    五.插入图片
    ▲.格式为:<img src="图片路径" lowsrc="低解析度源图片路径" alt="图片注释" width="宽 默认单位为像素,也可用百分比为单位,或其它。" height="高度" border="边框值" vspace="垂直边距值" hspace="水平边距值" align="对齐">
    ★低解析度源:如果显示图像很大,浏览器下载会很慢,我们指定一个低分辨率的图像副本(文件小),浏览器会先下载副本,在浏览器中先显示出来,然后下载较大图像,这样可以节省用户浏览网页的时间,又能保证网页的完整性。
    ★图片注释:替代文字
    ★边框
    ★垂直边距
    ★水平边距
    ▲.文本环绕与停止文本环绕
    语法:<img src="file_name" align="value">
    ★align取值有两个(left 和right)
    ★如果想停止环绕.就在想停止的地方插入<br clear="">
    <clear>属性有:A.left 停止文本环绕直到没有对齐左页边的图像
    B.right 停止文本环绕直到没有对齐右页边的图像
    c.all 停止文本环绕直到没有两边边都没有的图像
    ▲.图像映射
    ★通过<img>标记里的usemap属性就可以引用Map标记了.例:<img src="" usemap="#map">
    ★注意:map标记中name的值必须与img中usemap的取值相同,就是usemap的值前面多了一个#
    ★<map>标记 语法:<map >
    ★<area>有三个属性:
    A.href:链接的地址
    B.shap:映射区域的形状,取值可以是:
    1.rect 矩形 2. circle 圆形 3.poly 多边形
    C.coords:标识映射区域的边界


    六.文字链接
    ▲.链接是网站多个网站链接在一起.
    ★target的属性:
    ★_blank 在本窗口打开
    ★_parent 在新窗口打开
    ★_self   在上一级窗口打开
    ★_top    在整个浏览器窗口打开
    title 链接提示文字
    ▲.锚点是将对较长的文章进行编号
    ★对href链接属性前面必须加#
    ▲.其它链接
    ★E-mail链接:格式为mailto:邮箱地址.如果有后缀以&号隔开
    subject邮件主题 cc抄送人 bcc密件抄送人
    ★ftp链接:ftp://
    ★mews链接:news://

    七.表格
    ▲.<table>表格标记
    属性有:
    A.border(边框值)
    B.bordercolor(边框颜色)
    ▲.<tr>行标记
    属性主要有:
    bordercolordark(暗边框颜色) bordercolorlight(亮边框颜色)
    ▲.<td>单元格标记
    属性有:
    ★th (单元格表头)
    ▲.<caption>表格标题:在<caption>与</caption>标记之间就是表格标题内容
    属性有:
    ★align 1.bottom(在表格上方)2.center(在表格上方的中间)3.left(在表格的左边)4.right(在表格的右边)5.top(在表格的上方)
    ▲.<colsan> 是列跨距用来合并同一行的两个或多个单元格
    ▲.<rowspan> 是行跨距用来合并同一列相邻的一个或多个单元格

    八.建立表单页面
    ▲.form标记表单是用<form>标记定义的.这个标记是一个容器控件,它不显示任何信息,只表示在<form>标记和</form>标记之间定义的控件中输入的数据是可以返回到Web服务器中相应的程序进行处理的.
    ★name属性:通过为表单命名可以控制表单与后台程序之间的关系.
    ★action属性:设置表单的提交地址.
    ★method属性:设置表单的提交方式.有三种方式:
    A.默认方法 用浏览器的默认传送方式,一般默认为“GET”。
    B.get方法将表单内的数据附加到链接后面传送给服务器,服务器用读取环境变量的方式读取表单内的数据。因为链接的长度限制8192个字符,所以长表单不能用此传送方式。
    C.post方法用标准输入方式将表单内的数据传送给服务器,服务器用读取标准输入的方式读取表单内的数据,在理论上此方式对表单的长度不限。
    ★enctype属性:创建文件上传域使用enctype=multipart/form-data类型。
    ★target属性:设置表单信息返回的窗口。
    ▲.标记input 输入标记<input>是表单中最常用的标记之一。常用的文本域,按钮等都使用这个标记。
    ★name属性:文本域的名称。
    ★size属性:文本域的宽度。size=15代表文本域一次最多显示15个字符数。
    ★maxlength属性:文本域的最多字符数。maxlength=7代表最多只能在文本域中输入7个字符。
    ▲.textarea标记 这个标记用来制作多行的文字域,可以在其中输入更多的文本。
    ★cols属性: 这个标记用来规定文字域的列数。
    ★rows属性:这个标记用来规定文字域的行数。
    ★wrap属性:这个是控制文本换不换行
    ★type属性:type代表域的类型,type=password代表为密码域。

    九.框架
    ▲.框架集标记<frameset>
    ★属性:frameborder (yes显示框架 no不显示框架)
    ★属性:rows(行框架尺寸,也可以定义框架数)
    ★属性:cols(列框架尺寸,也可以定义框架数)
    ★属性:framespacing(框架间距)
    ▲.框架标记<frame>
    ★属性:src(框架中显示页面源文件的路径)
    ★属性:name(框架名)
    ★属性:scrolling(框架是否滚动)
    ★属性:noresize(框架大小是否可以调节)
    ★属性:marginheight(框架高度)
    ★属性:marginwidth(框架宽度)
    ▲.浮动框架标记<iframe>
    ★属性:src(浮动框架中显示页面源文件的路径)
    ★属性:height(浮动框架高度)
    ★属性:width(浮动框架宽度)
    ★属性:name(框架名)
    ★属性:align(浮动框架的排列方式,left表示居左,center表示居中,right表示居右)
    ★属性:frameborder(框架边框显示属性)
    ★属性:scrolling(框架是否滚动)
    ★属性:noresize(框架大小是否可以调节)
    ★属性:marginheight(框架边缘高度)
    ★属性:marginwidth(框架边缘宽度)
    ▲.框架链接
    ★把Name的值设为要显示的方向,src的值设为要显示的地址.把要点击的链接的target的值设为Name的值设为要显示的方向
    ▲.浮动框架链接
    ★把要点击的链接的target的值设为Name的值设为框架名称


    十.层
    ▲.层及其属性
    ★<div>标记
    属性:
    A.id(层的编号.给层命名)
    B.position(定位) absolute(绝对定位) relative(相对定位)
    C.left(左边界的距离)
    D.top(上边界的距离)
    E.z-index(决定层的先后顺序和覆盖关系)layer2代表层2,layer1代表层1,层2的z-index值大于层1的值,所以层2可以覆盖层1。
    F.overflow(溢出.表示层超出大小的时候)
    G.visible(无论层是否超出大小)
    H.background-image(背景图像)
    I.visibility(层的显示)

    常见问题:
    ▲.使层在flash上面.使flash透明输入以下代码:
    ★<param value="transparent">
    ▲.半透明的层:
    ★首先做个css样式:代码如下
    .halfalpha{background-color:#000000;filter:alpha(opacity=50)}
    然后在层里将css样式引入
    ▲.解决乱码,错位或不能正确换行时用meta语句设置
    <meta http-epuiv="content-language"content="zh-cn">
    <meta http-epuiv="content-type"content="text/html;charset=gb2312">
    ▲.如何改变滚动条的颜色
    ★在<head>之间输入以下代码:
    <style type=text/css>
    body{scrollbar-base-color:black;}
    </style>
    1.scrollbar-face-color:滚动条页面颜色设定;
    2.scrollbar-highlight-color:滚动条斜面和左面颜色设定;
    3.scrollbar-shadow-color:滚动条下斜面和右面颜色设定;
    4.scrollbar-3dlight-color:滚动条上边和左面的边沿颜色设定;
    5.scrollbar-arrow-color:滚动条箭头两端颜色设定;
    6.scrollbar-darkshadow-color:滚动条下边和右边的边沿颜色设定;
    7.scrollbar-Track-color:滚动条底版颜色设定;
    ▲.在DW里插入空格的几种方法:
    ★中文输入法时全角下的空格
    ★CTRL+SHIFT+空格
    ▲.如何制作滚动文字
    ★<marquee>滚动代码
    属性有:
    A.behavior 卷动
    1.alternate 来回卷动 2.scroll 预设卷动 3.slide 滑动
    B.direction 方向
    C.loop 卷动次数
    D.scrollamount 卷动距离
    E.scrolldelay 卷动时间

    展开全文
  • HTML语言标记详解

    万次阅读 多人点赞 2018-10-20 15:06:36
    开发过Android的同学都知道,Android应用程序的界面是由一个个...HTML文件标记由浏览器来解析,产生相应的界面元素(控件),最终生成网页上可见的那些内容。  标记可以有自己的属性和内容。标记的属性指...
  • 15. HTML 中标记文本内容

    千次阅读 2008-12-21 10:42:00
    作者:mnfrancis · 2008年7月8日上一篇:为你的 HTML 文档选择适当的文档类型下一篇:HTML 列表目录序言本篇文章,我将向你们讲述以下方面的基础知识:使用 HTML 来描述文档主体内的内容含义。我们将考察一些...
  • HTML5的元素嵌套规则

    千次阅读 2016-09-22 09:44:52
    先来看以下这样一段代码: ...我们的印象会有这样的嵌套规则:   内联元素不能嵌套块元素 元素和元素不能嵌套块元素 那么到底什么是块元素,什么是内联元素? 以下是W3C
  • HTML标签的书写和嵌套规范

    千次阅读 2017-10-11 23:09:05
    标签的嵌套规范 1、行级标签不能嵌套块级...a、标签分为单标签和双标签,都需要起始标签和结束标签,不同的是单标签起始、结束标签都写一个尖括号里而双标签则分别写两个尖括号里; b、所有的标签都是用小写字
  • HTML 关于p标签的嵌套问题

    千次阅读 2019-12-20 15:06:03
    1、最近公司官网用cmseasy模板做了一套页面,想后台替换一部分页面内容,但是坑的是后台编辑的html代码只能使用p标签,也就是说一个页面只能用p标签,真的是心累,最坑的是我竟然才发小p标签有下面这个问题,...
  • 嵌套JSON数据自动回写HTML网页

    千次阅读 2015-05-27 00:11:07
    本文介绍解析来自MongoDB数据库的JSON嵌套字符串,按HTML界面元素自定义属性展现数据内容的解决方案及技术实现代码。
  • WEB标准系列-HTML元素嵌套

    千次阅读 2016-11-25 15:05:35
    当然TGuide的编写过程也会遇到各种各样的问题,就比如今天要讲的“元素嵌套”,这个问题WEB标准群里得以和大家讨论,同时受到10胸(@顾轶灵)的指点,此问题才得以清晰地被解决。今天与大家一起来分享。后续将...
  • HTML标记详解

    千次阅读 2010-06-19 22:11:00
    一.Html的头部标记 (位于和之间) ▲.<base> 基底网址标记 (相对路径附基底网址.设置的绝对路径的后面).绝对路径不受基底网址设定的绝对路径控制. ▲.<basefont> 基底文字标记表示文字的字体/...
  • 目录 HTML 简介 一个实例 什么是 HTMLHTML 标签 ...HTML 文档 = 网页 ...HTML 编辑器 ...使用 Notepad 来编写 HTML ...基本的 HTML 标签 - 四个实例 ...HTML 标题 ...HTML 段落 ...HTML 链接 ...HTML 图像 ...嵌套HTML ...
  • 节点是构成我们网页的最基本的组成部分,网页的每一个部分都可以称为是一个节点 例如: html标签、属性、文本、注释、整个文档等都是一个节点 节点的类型 节点是有类型的,不同节点的类型不同,按照大小关系分类...
  • 1.1HTML标记语言   对于每一个包含内容的元素(比如标题、图片、段落),根据它包含的内容是不是文本,有两种不同的方式给它们加标记,一种是使用闭合标签,另一种是使用非闭合标签。   1.1文本用闭合标签   1...
  • 最近同事遇到了一个问题,找我帮忙,先...2,打开弹出层后,根据一组指定的经纬度地图上创建marker标记,并且可视窗口中心显示该marker 问题来了,无论是实用了panTo还是centerAndZoom,还panby 都无法让marker自
  • Html基本结构、语法规则、常用标记/标签 (h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/)及空格符&nbsp; 注:自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言(Hpyer text ...
  • HTML学习笔记——文字与段落标记

    千次阅读 2019-09-01 17:45:06
    HTML文档包含有各种级别的标题,各种级别的标题由< h1 >到< h6 >元素来定义。其中< h1 >代表最高级别的标题,依次递减。 2.1.1标题字标记h 对于不同的浏览器,其确切的点阵尺寸的大小也不相同,...
  • html超文本标记语言学习

    千次阅读 2011-11-05 19:11:41
    http://www.w3school.com.cn/html/html_styles.asp HTML 标题 This is a heading This is a heading This is a heading     HTML 链接 This is a link、   HTML 图像 HTML 图像是通过 标签进行定义的 ...
  • 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表始于 <ul> 标签。每个列表项始于 <li>。 <ul> <li>Coffee</li> <li>Milk</li>...
  • 标签的嵌套与超链接

    2020-03-04 19:34:10
    一个标签中嵌套另外一个标签 标签不能乱嵌套,如以下标签的嵌套是错误的 <p style="width:300px;height:300px;background:green"> <div style="width:200px;height:200px;background:blue"> ...
  • HTML标记一览表

    千次阅读 2007-10-06 11:27:00
    Web浏览器只认识字间只有一个空格,忽略字间的其他空格和HTML文件加入的回车。 5 <BR>  分行标记 Web文件强制实现换行 6 ...
  • 最近我弄清楚了如何递归地实现嵌套插槽,包括如何使用作用域插槽来实现。起因是我想看看是否可以构建一个复制v-for指令但仅使用template组件。它还支持插槽和作用域插槽,也可以支持命名...
  • 1-HTML简介(标记、属性)

    千次阅读 2016-04-08 00:53:00
    浏览器:将服务器返回的各种代码(HTML,CSS,JavaScript),翻译成“图文混排”的效果 服务器:安装了服务器端软件(Apache等)的电脑 HTML:超文本标注语言,控制网页结构 CSS:层叠样式表,控制网页元素外观...
  • 1.2 HTML文档剖析   1.2.1 HTML模板 今天,按照 HTML5 语法编写的最简单的 HTML 页面的模板可以写成这样:      An HTML Template         模板的第一行代码是一种新语法,或者说是一种简化的 ...
  • 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行浏览器上,由浏览器来解析相对于整个网页,大模块 左边距离别写固定值,因为用户分辨率、电脑尺寸不一样:HTML 是用来描述网页的一种语言。HTML 指的是超文本标记...
  • 中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就网上找了许多关于标签嵌套规则的资料,下面做一个个人总结。 1.块级元素(block)与...
  • 常用的markdown标记

    2017-10-15 17:26:53
    常用的markdown标记正确使用一些常见的markdown标记,可以快速地将总结的东西进行排版。 注意:本文仅是简单地等同HTML标签,实际应用依据不同的应用导致显示不同。
  • XML标记语言

    热门讨论 2018-10-21 18:25:17
    Ajax传输数据Ajax传输数据 Web Services传输数据 异构平台的数据交换与整合(跨平台的) xml声明 &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; ...
  • 有序列表跟无序列表的嵌套

    千次阅读 2019-11-12 20:43:53
    <!DOCTYPE html> <html lang="zh-cn"> <head> ...meta charset="utf-8">...有序列表跟无序列表的嵌套</title> <link href="css/style.css" type="text/css" rel="styl...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,122
精华内容 18,448
关键字:

在html中正确的嵌套标记是