html标签 订阅
超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。HTML标签的大小写无关的,例如“主体”跟表示的意思是一样的,推荐使用小写。 展开全文
超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。HTML标签的大小写无关的,例如“主体”跟表示的意思是一样的,推荐使用小写。
信息
外文名
Hyper Text Markup Language tag
简    称
HTML
中文名
超文本标记语言标签
html标签特点
收起全文
精华内容
下载资源
问答
  • HTML标签常用标签

    千次阅读 多人点赞 2017-02-23 11:33:58
    注释标签  注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 2、  声明标签 声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本...

                    

    1<!--...-->注释标签 

    注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

    2<!DOCTYPE> 声明标签

    <!DOCTYPE> 声明必须是 HTML文档的第一行,位于 <html>标签之前。<!DOCTYPE>声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML版本进行编写的指令。在 HTML 4.01中有三种 <!DOCTYPE>声明 1HTML 4.01 Strict DTD包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets

           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    2HTML 4.01 Transitional  包含所有 HTML元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    3HTML 4.01 Frameset

    等同于 HTML 4.01 Transitional,但允许框架集内容。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

    HTML5 中只有一种:<!DOCTYPE html>


    3 <a>标签    定义和用法

    <a>标签定义超链接,用于从一张页面链接到另一张页面。

    <a>元素最重要的属性是 href属性,它指示链接的目标。

    下面是指向w3school的超链接

    <a href="http://www.w3school.com.cn">W3School</a>

    提示和注释

    提示:如果不使用 href属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。

    提示:被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target属性)。

    提示:请使用 CSS 来设置链接的样式。

    HTML 4.01 HTML5之间的差异: HTML 4.01中,<a> 标签可以是超链接或锚。在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href属性,则只是超链接的占位符。HTML5提供了一些新属性,同时不再支持一些 HTML 4.01属性。详见:http://www.w3school.com.cn/tags/tag_a.asp


    4<abbr>标签

    定义和用法

    <abbr> 标签指示简称或缩写,比如 "WWW" "NATO"

    通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

    <abbr> 标签最初是在 HTML 4.0中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。

    标记一个缩写:The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

    HTML 4.01 HTML5之间的差异:无。

    详见:http://www.w3school.com.cn/tags/tag_abbr.asp

    5<acronym>标签

    所有主流的浏览器均支持 <acronym>标签。HTML5 中不支持 <acronym> 标签。

    实例:<acronym title="World Wide Web">WWW</acronym>

    提示:title 属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本。

    详见:http://www.w3school.com.cn/tags/tag_acronym.asp

    6<address>标签——定义文档或文章的作者/拥有者的联系信息。

    定义和用法

    如果 <address>元素位于 <body>元素内,则它表示文档联系信息。

    如果 <address>元素位于 <article>元素内,则它表示文章的联系信息。

    <address>元素中的文本通常呈现为斜体。大多数浏览器会在 address元素前后添加折行。

    提示:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。

    提示:<address> 元素通常连同其他信息被包含在 <footer> 元素中。

    7<applet>标签

    定义和用法

    HTML5 中不支持 <applet>标签。请使用 object 元素标签代替。

    HTML 4.01 中不赞成使用 <applet>元素。

    <applet> 标签定义嵌入的 applet

    详见:http://www.w3school.com.cn/tags/tag_applet.asp

    8<area>标签

    定义和用法

    <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像),area元素总是嵌套在 <map>标签中。注释:<img>标签中的 usemap属性与 map 元素 name属性相关联,创建图像与映射之间的联系。

    实例:

    <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

    <map name="planetmap" id="planetmap">

      <area shape="circle" coords="180,139,14" href ="venus.html"alt="Venus" />

      <area shape="circle" coords="129,161,10" href ="mercur.html"alt="Mercury" />

      <area shape="rect" coords="0,0,110,260" href ="sun.html"alt="Sun" />

    </map>

    注释<img>中的 usemap 属性可引用 <map>中的 id name 属性(由浏览器决定),所以我们需要同时向 <map>添加 id name 两个属性

    属性:alt(必需) — 定义此区域的替换文本

        可选的属性:

        coords(坐标值)—-定义可点击区域(对鼠标敏感的区域)的坐标

    hrefURL-—定义此区域的目标URL

    onhref   —— 从图像映射排除某个区域

    shape defaultrectcircpoly——定义区域的形状

    target _blank_parent_self_top——规定何处打开href属性指定的目标URL

    详见:http://www.w3school.com.cn/tags/tag_area.asp

    9 <aside>标签

    HTML 5 的新标签,定义其所处内容之外的内容。aside的内容应该与附近的内容相关。

    HTML5提供的aside元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。

    根据目前的规范,aside元素有两种使用方法:

    1. 被包含在article中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。
    2. article之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

        实例代码:

    <body>

    <header>

        <h1>My Blog</h1>

    </header>

    <article>

        <h1>My Blog Post</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

            incididunt ut labore et dolore magna aliqua.</p>

        <aside>

            <!-- Since this aside is contained within an article, a parser


      should understand that the content of this aside is directly related


      to the article itself. -->

            <h1>Glossary</h1>

            <dl>

                <dt>Lorem</dt>

                <dd>ipsum dolor sit amet</dd>

            </dl>

        </aside>

    </article>

    <aside>

        <!-- This aside is outside of the article. Its content is related


    to the page, but not as closely related to the above article -->

        <h2>Blogroll</h2>

        <ul>

            <li><a href="#">My Friend</a></li>

            <li><a href="#">My Other Friend</a></li>

            <li><a href="#">My Best Friend</a></li>

        </ul>

    </aside>

    </body>



    提示:<aside> 的内容可用作文章的侧栏。

    详见:http://www.w3school.com.cn/tags/tag_aside.asp


    10<audio>标签

    HTML 5 的新标签。

    Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <audio> 标签。<audio>标签定义声音,比如音乐或其他音频流。

    提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

    <audio src="someaudio.wav">

    您的浏览器不支持 audio 标签。

    </audio>

    audio常用属性

    那么首先来看一下audio标签中的一些常用属性:



    audio音乐格式的支持



    audio可通过new来创建。也可以通过用document来获取。

    //通过new关键字来创建Audio对象

    var Music = new Audio("test.mp3");

    //通过document来获取已经存在的Audio对象

    var Music = document.getElementById("audio");

    //当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。

    然后我们来看下api所提供的对audio标签操作的一些属性和方法

    详见:http://www.cnblogs.com/zhangwei595806165/p/5507774.htmlhttp://www.w3school.com.cn/tags/tag_audio.asp

    11<b>标签

    <b> 标签规定粗体文本。

    注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b>标签作为最后的选项。HTML5规范声明:应该使用 <h1> - <h6> 来表示标题,使用<em> 标签来表示强调的文本,应该使用<strong> 标签来表示重要文本,应该使用 <mark>标签来表示标注的/突出显示的文本。另外能够使用 CSS "font-weight"属性来设置粗体文本。

    详见:http://www.w3school.com.cn/tags/tag_b.asp

    12 <base>标签

    定义和用法

    <base> 标签为页面上的所有链接规定默认地址或默认目标。

    通常情况下,浏览器会从当前文档的 URL中提取相应的元素来填写相对 URL中的空白。

    使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL来解析所有的相对 URL。这其中包括 <a><img><link><form>标签中的 URL

    实例:

    <head>

    <base href="http://www.w3school.com.cn/i/" />

    <base target="_blank" />

    </head>


    <body>

    <img src="eg_smile.gif" />

    <a href="http://www.w3school.com.cn">W3School</a>

    </body>

    注释:<base>标签必须位于 head 元素内部

    必需的属性

         hrefURL——规定页面中所有相对应连接的基准URL

     可选属性

         target _blank_parent_self_topframename——何处打开页面中所有的链接。

    HTML 文档中 <base> 每出现一次,Base对象就会被创建。

    详见:http://www.w3school.com.cn/tags/tag_base.asp

    13<bdo>标签

    bdo 元素可覆盖默认的文本方向。

    可选属性   dir ltrrtl)定义文字的方向     ltr —左到右 rtl — 右到左

    详见:http://www.w3school.com.cn/tags/tag_bdo.asp


    14<big>标签

    <big> 标签呈现大号字体效果。

    使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big>标签和其相应的 </big>标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big>标签将不起任何作用。

    更妙的是,可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号,直到上限 7号文本,正如字体模型所定义的那样。

    但是使用 <big> 标签的时候还是要小心,因为浏览器总是很宽大地试图去理解各种标签,对于那些不支持 <big>标签的浏览器来说,它经常将其认为是粗体字标签。

    详见:http://www.w3school.com.cn/tags/tag_big.asp

    15<blockquote>标签

     <blockquote>标签定义块引用,所有主流的浏览器均支持 <blockquote>标签,但是没有浏览器能够正确地显示 cite属性。<blockquote> </blockquote>之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

    可选属性   citeURL——规定引用的来源

    提示:请使用 q 元素来标记短的引用。

    <q>  <blockquote>都表示“引用”。不同的是,q标签是行内元素,在内容的开始和结尾处会包有“”,而 blockquote是块级元素,默认带有左右40px的外间距,不带“”。从语义上讲,前者引用的是小段文字,后者引用的是大段的内容块。从兼容性上讲,在IE67q标签不会带有“”。FF下的引号是漂亮的全角字符:“”。而chrome下则为半角字符:""。至于IE89,应该也是全角字符,但在不指定字体的情况下真的丑爆了,在为其指定宋体或者微软雅黑后呈现与FF一致。

    16<br>标签

    <br> 可插入一个简单的换行符。<br>标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML中,把结束标签放在开始标签中,也就是 <br />。请注意,<br>标签只是简单地开始新的一行,而当浏览器遇到<p>标签时,通常会在相邻的段落之间插入一些垂直的间距。

    clear 属性

    如果您希望文本流在内联表格或图像的下一行继续输出,请使用 clear属性,该属性有三个可选的值:leftright或者 all,每个值都代表一个边界或两边的边界。

    提示:一般情况下,文本流中的其他行会在内联图像的底部显示,除非图形的 <img>标签被设置为左对齐或右对齐(对于 <table>标签也一样)。因此,<br>标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。

    注释:请使用 <br> 来输入空行,而不是分割段落。

    详情:http://www.w3school.com.cn/tags/tag_br.asp

    17<button>标签

    定义一个按钮,所有主流浏览器都支持 <button>标签。

    用法:

    button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input元素创建的按钮之间的不同之处。

    <button> 控件 <input type="button">相比,提供了更为强大的功能和更丰富的内容。<button> </button>标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

    唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为

    请始终为按钮规定 type属性。Internet Explorer的默认类型是 "button",而其他浏览器中(包括 W3C规范)的默认值是 "submit"

    属性:autofocusautofocus——规定当页面加载时按钮应当自动地获得焦点

      disabled disabled规定应该禁用该按钮

    form   form_name——规定按钮属于一个或多个表单

    formaction url——覆盖form元素的action属性(该属性与type=submit”配合使用)

    formenctype application/x-www-form-urlencodedmultipart/form-datatext/plain——覆盖form元素的enctype属性(该属性与type=submit”配合使用)

    formmethod getpost——覆盖form元素的method属性(该属性与type=submit”配合使用)

    formmovalidateformmovalidate —— 覆盖formnovalidate属性(该属性与type=submit”配合使用)

    formtarget_blank_parent_selftopframename)覆盖formtarget属性(该属性与type=submit”配合使用

    name  — 按钮的名称

    typebuttonresetsubmit —— 按钮的类型

    value text——规定按钮的初始值

    placeholder ——  按钮的占位符


    <html>

    <body>

    <form action="demo_form.asp" method="get">

    E-mail: <input type="email" name="userid" /><br />

    <button type="submit" >提交</button><br />

    <button type="submit" formnovalidate="formnovalidate">进行没有验证的提交</button>

    </form>

    </body>

    </html>

    formnovalidate 属性覆盖表单的novalidate 属性。

    如果使用该属性,则提交表单时按钮不会执行验证过程。

    该属性与 type="submit"配合使用。


    一开始的页面是

    输入qw,点击提交会验证输入的正确性


    如果点击 第二个按钮就不会验证输入的内容是否符合要求


    详见:http://www.w3school.com.cn/tags/tag_button.asp


    18<canvas>标签

    Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari支持 <canvas> 标签。)

    定义和用法

    <canvas> 标签定义图形,比如图表和其他图像。

    <canvas> 标签只是图形容器,必须使用脚本来绘制图形。是html5中新标签。

    HTML5 canvas元素使用 JavaScript在网页上绘制图像。

    画布是一个矩形区域,您可以控制其每一像素。

    canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    属性

    height — 设置canvas的高度

    width — 设置canvas的宽度

    详见:http://www.w3school.com.cn/tags/tag_canvas.asp

    19<caption>标签

    用来定定义表格标题,必须紧随 table标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

       可选属性

     align leftrighttopbottom规定标题的对齐方式(w3c不推荐使用,一般使用样式取而代之)

    HTML 4.01中,caption 元素的 align 属性是不被赞成使用的。

    XHTML 1.0 Strict DTD中,caption 元素的 align 属性是不被支持的。

    <html>

    <body>

    <h4>这个表格有一个标题,以及粗边框:</h4>

    <table border="6">

    <caption>我的标题</caption>

    <tr>

      <td>100</td>

      <td>200</td>

      <td>300</td>

    </tr>

    <tr>

      <td>400</td>

      <td>500</td>

      <td>600</td>

    </tr>

    </table>


    </body>

    效果图:



    20 <cite>标签

    <cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

    按照惯例,引用的文本将以斜体显示。

    <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a>标签中,从而把一个超链接指向该联机版本。

    <cite> 标签还有一个隐藏的功能它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。



    21<em> <strong> <dfn> <code> <samp> <kbd><var> <cite>标签

    都是短语元素,虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。


    详见:http://www.w3school.com.cn/tags/tag_phrase_elements.asp


    22<col>标签

    为表格中一个或多个列定义属性值。如需对全部列应用样式,<col>标签很有用,这样就不需要对各个单元和各行重复应用样式了。只能在 table colgroup 元素中使用 <col> 标签。

    提示:请为 <col> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。如果您希望在 colgroup内部为每个列规定不同的属性值时,请使用此元素。如果没有 col元素,列会从 colgroup那里继承所有的属性值。col元素是仅包含属性的空元素。如需创建列,您就必须在 tr元素内部规定 td 元素。

    详见:http://www.w3school.com.cn/tags/tag_col.asp


    23<datalist>标签

    <datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input可能的值。

    datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

    请使用 input 元素的 list 属性来绑定 datalist

    <html>

    <body>

    <input id="myCar" list="cars" />

    <datalist id="cars">

      <option value="BMW">

      <option value="Ford">

      <option value="Volvo">

    </datalist>

    </html>



    选择第三个


    注意:所有主流浏览器都支持 <datalist>标签,除了 Internet Explorer Safari


    详见:http://www.w3school.com.cn/tags/tag_datalist.asp


    24<dl><dd><dt>标签

    <dl>

       <dt>计算机</dt>

       <dd>用来计算的仪器 ... ...</dd>

       <dt>显示器</dt>

       <dd>以视觉方式显示信息的装置 ... ...</dd>

    </dl>

    <dl> 标签定义了定义列表(definition list)。

    <dl> 标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。





    25<del>标签

    定义文档中已被删除的文本。


    <html>


    <body>


    <p>一打有 <del>二十</del> <ins>十二</ins>件。</p>


    <p>大多数浏览器会改写为删除文本和下划线文本。</p>


    <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>


    </body>

    </html>

    详见:http://www.w3school.com.cn/tags/att_del_cite.asp


    26<div>标签

    <div> 可定义文档中的分区或节division/section)。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

    如果用 id class来标记 <div>,那么该标签的作用会变得更加有效。

    用法

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div>固有的唯一格式表现。可以通过 <div> class id 应用额外的样式。

    不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。

    可以对同一个 <div> 元素应用 class id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class用于元素组(类似的元素,或者可以理解为某一类元素),而 id用于标识单独的唯一的元素。

    W3C 在其最新的 XHTML2草案的 XHTML 结构模型中这样定义 div

    div 元素,通过与 idclass role 属性配合,提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以,创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用,使 XHTML适应他们自身的需求和口味。

    div division的简写。division意为分割、区域、分组。比方说,当你将一系列的链接组合在一起,就形成了文档的一个 division

    http://www.w3school.com.cn/tags/att_div.asp


    27<embed>标签

    定义嵌入的内容,比如插件。

    <embed src="helloworld.swf" />

    <embed> 标签是 HTML 5中的新标签。

    属性



    详见:http://www.w3school.com.cn/tags/tag_embed.asp


    28<fieldset>标签

    fieldset 元素可将表单内的相关元素分组。

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

    当一组表单元素放到 <fieldset>标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D效果,或者甚至可创建一个子表单来处理这些元素。

    <fieldset> 标签没有必需的或唯一的属性。

    <legend>标签 fieldset元素定义标题。

    属性



    <html>

    <body>

    <form>

      <fieldset>

        <legend>health information</legend>

        height: <input type="text" />

        weight: <input type="text" />

        age:<input type="text" />

      </fieldset>

    </form>

    </body>

    </html>

    页面效果



    29  <figure>标签和<figcaption>标签

    Internet Explorer 9, Firefox, Opera, Chrome以及 Safari 支持

    <figure>标签规定独立的流内容(图像、图表、照片、代码等等)。

    figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。


    <figcaption> 标签Internet Explorer 9, Firefox, Opera, Chrome以及 Safari 支持 <figcaption> 标签。

    <figcaption> 标签定义figure元素的标题(caption)。

    "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。


    <figure>

      <img src="http://pic73.nipic.com/file/20150724/18576408_175304314596_2.jpg" width="350" height="234" />

      <figcaption>黄浦江上的的卢浦大桥</figcaption>

    </figure>



    30<header><footer>标签

    <header>  标签定义文档的页眉(介绍信息)。


    <footer> 标签Internet Explorer 9, Firefox, Opera, Chrome, and Safari支持 <footer> 标签。用来定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。

    页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

    您可以在一个文档中使用多个 <footer>元素。

    <footer> 标签是 HTML 5中的新标签。


    提示:<footer> 元素内的联系信息应该位于 <address> 标签中。



    31<form>标签

    用于为用户输入创建 HTML 表单。

    表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含menustextareafieldsetlegendlabel元素

    表单用于向服务器传输数据。

    注释:form元素是块级元素,其前后会产生折行。

    <html>


    <body>

    <form action="form_action.asp" method="get">

      <p>First name: <input type="text" name="fname" /></p>

      <p>Last name: <input type="text" name="lname" /></p>

      <input type="submit" value="Submit" />

    </form>

    </body>

    </html>


    属性


    详见:http://www.w3school.com.cn/tags/tag_form.asp


    32<h1> <h6>标签

    由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。



    33<head>标签

    <head> 标签用于定义文档的头部,它是所有头部元素的容器<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

    文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

    下面这些标签可用在 head部分:<base>,<link>,<meta>,<script>,<style>,以及<title>

    <title> 定义文档的标题,它是 head部分中唯一必需的元素

    提示:应该把 <head>标签放在文档的开始处,紧跟在 <html>后面,并处于 <body>标签或 <frameset>标签之前。

    提示:请记住始终为文档规定标题!

    框架




    34<hr>标签

    <hr> 标签在 HTML页面中创建一条水平线。

    水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

    HTML XHTML之间的差异

    HTML 中,<hr>标签没有结束标签。

    XHTML 中,<hr> 必须被正确地关闭,比如 <hr />

    HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。

    XHTML 1.0 Strict DTD中,hr 元素的所有呈现属性均不被支持。

    属性



    35<i>标签

    <i> 标签显示斜体文本效果。

    <i> 标签和基于内容的样式标签<em>类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

    提示:<i> 标签一定要和结束标签 </i>结合起来使用。


    <html>


    <body>


    <i> 我是i标签 </i>

    </body>

    </html>




    36 <img>标签

    向网页中嵌入一幅图像。从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

    <img> 标签有两个必需的属性:src属性 alt 属性



    详见:http://www.w3school.com.cn/tags/tag_img.asp


    37 <input>标签

    用于搜集用户信息。根据不同的 type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    提示:请使用 label 元素为某个表单控件定义标签。

    <form>

      <label for="male">Male</label>

      <input type="radio" name="sex" id="male" />

      <br />

      <label for="female">Female</label>

      <input type="radio" name="sex" id="female" />

    </form>



    具体属性和实例详见:http://www.w3school.com.cn/tags/tag_input.asp


    38<keygen>标签

    Firefox, Chrome, Opera以及 Safari 6 支持 <keygen> 标签。

    <keygen> 标签规定用于表单的密钥对生成器字段。

    当提交表单时,私钥存储在本地,公钥发送到服务器。

    属性


    详见:http://www.w3school.com.cn/tags/tag_keygen.asp

    39<label>标签

    input 元素定义标注(标记)

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for属性应当与相关元素的 id属性相同。

    属性


    <html>


    <body>


    <form>

      <label for="male">Male</label>

      <input type="radio" name="sex" id="male" />

      <br />

      <label for="female">Female</label>

      <input type="radio" name="sex" id="female" />

    </form>


    </body>

    </html>


    也就是说我们点击Male文本时也会触发 male input的点击事件

    详见:http://www.w3school.com.cn/tags/tag_label.asp

    40<li>标签、<ol>标签、<ul>标签

    <li>标签

    <li> 标签定义列表项目。

    <li> 标签可用在有序列表(<ol>)和无序列表 (<ul>)中。



    提示:请使用 CSS 来定义列表和列表项目的类型。


    <ol> 标签定义有序列表。


    提示:请使用 CSS 来定义列表的类型。





    <ul> 标签定义无序列表。

    Pasted Graphic 31.tiff

    HTML XHTML之间的差异

    HTML 4.01 中,ul 元素的 "compact" "type" 属性是不被赞成使用的。

    XHTML 1.0 Strict DTD中,ul 元素的 "compact" "type" 属性是不被支持的。

    提示:请使用样式来定义列表的类型。

    例子(复杂的嵌套列表):

    <h4>一个嵌套列表:</h4>

    <ul>

      <li>咖啡</li>

      <li>

        <ul>

        <li>红茶</li>

        <li>绿茶

          <ul>

          <li>中国茶</li>

          <li>非洲茶</li>

          </ul>

        </li>

        </ul>

      </li>

      <li>牛奶</li>

    </ul>



    例子(不同类型的无序列表):

    <h4>Disc 项目符号列表:</h4>

    <ul type="disc">

     <li>苹果</li>

     <li>香蕉</li>

     <li>柠檬</li>

     <li>桔子</li>

    </ul>  


    <h4>Circle 项目符号列表:</h4>

    <ul type="circle">

     <li>苹果</li>

     <li>香蕉</li>

     <li>柠檬</li>

     <li>桔子</li>

    </ul>  


    <h4>Square 项目符号列表:</h4>

    <ul type="square">

     <li>苹果</li>

     <li>香蕉</li>

     <li>柠檬</li>

     <li>桔子</li>

    </ul>  


    41<link>标签

    <link> 标签定义文档与外部资源的关系。

    <link> 标签最常见的用途是链接样式表。

    注释:link 元素是空元素,它仅包含属性。

    注释:此元素只能存在于 head 部分,不过它可出现任何次数。



    <link> 标签链接到一个外部样式表的代码如下:

    <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >


    给页面的头部加头像

    <link rel="icon" href="ggfd_09.png" />


    注意:必须加在head部分

    详见:http://www.w3school.com.cn/tags/tag_link.asp

    42<map>标签

    所有主流浏览器都支持 <map> 标签。它定义了一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

    注释:area 元素永远嵌套在 map元素内部。area 元素可定义图像映射中的区域。

    注释:<img>中的 usemap属性可引用 <map> 中的 id name属性(取决于浏览器),所以我们应同时向 <map>添加 id name 属性。


    例子:


    <p>请点击图像上的星球,把它们放大。</p>

    <img

    src="/i/eg_planets.jpg"

    border="0" usemap="#planetmap"

    alt="Planets" />


    <map name="planetmap" id="planetmap">


    <area

    shape="circle"

    coords="180,139,14"

    href ="/example/html/venus.html"

    target ="_blank"

    alt="Venus" />


    <area

    shape="circle"

    coords="129,161,10"

    href ="/example/html/mercur.html"

    target ="_blank"

    alt="Mercury" />


    <area

    shape="rect"

    coords="0,0,110,260"

    href ="/example/html/sun.html"

    target ="_blank"

    alt="Sun" />


    </map>





    注意:shape="circle"  coords="180,139,14”是一个圆(中心坐标180139半径14

    矩形:shape="rectangle"coords="x1,y1,x2,y2"第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标

    多边形:shape="polygon"coords="x1,y1,x2,y2,x3,y3,..."多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

    详见:http://www.w3school.com.cn/tags/tag_map.asp


    43<mark>标签、<meter>标签、<nav>标签

    Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <mark> 标签。

    <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m>标签。


    Firefox, Chrome, Opera以及 Safari 6 支持 <meter> 标签。

    <meter> 标签定义已知范围分数值内标量测量。也被称为 gauge(尺度)。

    注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress>标签。




    <nav> 标签 Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari支持 <nav> 标签,<nav> 标签定义导航链接的部分。

    提示:如果文档中有“前后”按钮,则应该把它放到 <nav>元素中。

    <!DOCTYPE html>

    <html>

    <body>


    <nav>

    <a href="/html/">HTML</a> |

    <a href="/css/">CSS</a> |

    <a href="/js/">JavaScript</a> |

    <a href="/jquery/">jQuery</a>

    </nav>

    </body>

    </html>


    详见:http://www.w3school.com.cn/tags/tag_nav.asp


    44<meta>标签


    <meta> 元素可提供有关页面的元信息meta-information),比如针对搜索引擎和更新频度的描述和关键词。

    <meta> 标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。

    注释:<meta> 标签永远位于 head 元素内部。

    注释:元数据总是以名称/值的形式被成对传递的。




    Meta 元素中的信息可以描述 HTML文档,Meta元素中的信息可以描述文档的关键词

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />



    在网址已经变更的情况下,将用户重定向到另外一个地址。

    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

    content="5表示5秒后自动跳转到重定向的地址

    详见:http://www.w3school.com.cn/tags/tag_meta.asp


    45<object>标签

    定义一个嵌入的对象,<object>标签用于包含对象,比如图像、音频、视频、Java appletsActiveXPDF以及 Flashobject的初衷是取代 img applet 元素。

    浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型。

    而幸运的是,object 对象提供了解决方案。如果未显示 object元素,就会执行位于 <object> </object>之间的代码。通过这种方式,我们能够嵌套多个 object元素(每个对应一个浏览器)。

    注释:<param>标签定义用于对象的 run-time 设置。

    注释:不要对图像使用 <object>标签,请使用 <img> 标签代替。


    详见:http://www.w3school.com.cn/tags/tag_object.asp


    46<optgroup>标签、<option>标签、<select>标签


    所有主流浏览器都支持 <optgroup>标签。<optgroup>标签定义选项组。

    optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。


    例子:

    <select>

      <optgroup label="Swedish Cars">

        <option value ="volvo">Volvo</option>

        <option value ="saab">Saab</option>

      </optgroup>


      <optgroup label="German Cars">

        <option value ="mercedes">Mercedes</option>

        <option value ="audi">Audi</option>

      </optgroup>

    </select>


    详见:http://www.w3school.com.cn/tags/tag_optgroup.asp


    option 元素定义下拉列表中的一个选项(一个条目)。浏览器将 <option>标签中的内容作为 <select>标签的菜单或是滚动列表中的一个元素显示。

    option 元素位于 select元素内部。

    注释:<option>标签可以在不带有任何属性的情况下使用,但是您通常需要使用 value属性,此属性会指示出被送往服务器的内容。

    提示:如果列表选项很多,可以使用 <optgroup>标签对相关选项进行组合。


    详见:http://www.w3school.com.cn/tags/tag_option.asp


    <select> 标签可创建单选或多选菜单。<select&>元素中的 <option> 标签用于定义列表中的可用选项。

    提示:select 元素是一种表单控件,可用于在表单中接受用户输入。



    详见:http://www.w3school.com.cn/tags/tag_select.asp


    47<output>标签<param>标签、<pre>标签


    <output> 标签定义不同类型的输出,比如脚本的输出。是 HTML 5中的新标签。



    详见:http://www.w3school.com.cn/tags/tag_output.asp



    param 元素允许您为插入 XHTML文档的对象规定 run-time设置,也就是说,此标签可为包含它的<object>或者 <applet> 标签提供参数。


    pre 元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

    详见:http://www.w3school.com.cn/tags/tag_pre.asp


    48 <progress>标签

    Internet Explorer 10, Firefox, Opera, Chrome以及 Safari 6 支持 <progress> 标签。<progress> 标签标示任务的进度(进程)

    提示:请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。<progress>标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter>标签代替。





    49<ruby>标签

    Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <ruby> 标签。<ruby>标签定义 ruby 注释(中文注音或字符)。与 <ruby> 以及 <rt> 标签一同使用:

    ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt元素组成,还包括可选的 rp元素,定义当浏览器不支持 "ruby"元素时显示的内容。


    详见:http://www.w3school.com.cn/tags/tag_rt.asp



    50<s>标签

    <s> 标签可定义加删除线文本定义。

    <s> 标签是 <strike> 标签的缩写版本,Netscape Internet Explorer都支持它。但在 HTML 4 XHTML 中已经不再赞成使用它了,意思就是不再使用了;它早晚有一天将会消失。

    注释:请使用 <del> 替代它!


    为文本标记添加删除线

    <p> HTML 5 中,<s>仍然支持</s>已经不支持这个标签了。</p>




    51<section>标签、<small>标签、<source>标签


    <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。<section>标签是 HTML 5 中的新标签。




    <small> 标签呈现小号字体效果。<small>标签和它所对应的 <big>标签一样,但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small>标签将不起任何作用。

    <big> 标签类似,<small>标签也可以嵌套,从而连续地把文字缩小。每个 <small>标签都把文本的字体变小一号,直到达到下限的一号字。


    <source> 标签为媒介元素(比如 <video> <audio>)定义媒介资源。<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。





    52<span>标签

    <span> 标签被用来组合文档中的行内元素。

    提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。

    注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

    <p><span>some text.</span>some other text.</p>

    如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span元素仍然为 p 元素增加了额外的结构。

    可以为 span 应用 id class 属性,这样既可以增加适当的语义,又便于对 span应用样式。

    可以对同一个 <span> 元素应用 class id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class用于元素组(类似的元素,或者可以理解为某一类元素),而 id用于标识单独的唯一的元素。

    详见:http://www.w3school.com.cn/tags/tag_span.asp



    53<sub>标签、<sup>标签

    <sub> 标签可定义下标文本。

    包含在 <sub> 标签和其结束标签 </sub>中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

    <sup> 标签可定义上标文本。

    包含在 <sup> 标签和其结束标签 </sup>中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

    提示:无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。


    <html>

    <body>


    <p>

    This text contains <sub>subscript</sub>

    </p>


    <p>

    This text contains <sup>superscript</sup>

    </p>


    </body>

    </html>




    54 <summary>标签

    只有 Chrome 以及 Safari 6 支持 <summary>标签。

    <summary> 标签包含 details元素的标题,"details"元素用于描述有关文档或文档片段的详细信息。


    提示:请与 <details> 标签一起使用。标题是可见的,当用户点击标题时会显示出详细信息。

    注释:"summary" 元素应该是 "details" 元素的第一个子元素。

    <!DOCTYPE HTML>

    <html>

    <body>


    <details>

    <summary>HTML 5</summary>

    This document teaches you everything you have to learn about HTML 5.

    </details>


    </body>

    </html>




    55<table>标签

    <table> 标签定义 HTML表格。

    简单的 HTML 表格由 table 元素以及一个或多个 trth td 元素组成。

    tr 元素定义表格行,th元素定义表头,td 元素定义表格单元。

    更复杂的 HTML 表格也可能包括 captioncolcolgrouptheadtfoot以及 tbody 元素。


    详见:http://www.w3school.com.cn/tags/tag_table.asp




    56<textarea>标签

    <textarea> 标签定义多行的文本输入控件

    文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    可以通过 cols rows 属性来规定 textarea的尺寸,不过更好的办法是使用 CSS height width 属性。

    注释:在文本输入区内的文本行间,用 "%OD%OA"(回车/换行)进行分隔。



    详见:http://www.w3school.com.cn/tags/tag_textarea.asp



    57<track>标签、<u>标签、<video>标签、<wbr>标签



    nternet Explorer 10, Chrome以及 Opera 支持 <track> 标签。

    <track> 标签为诸如 video元素之类的媒介规定外部文本轨道。

    用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

    <track> 标签是 HTML 5中的新标签。



    <u> 标签可定义下划线文本。

    注释:请尽量避免为文本加下划线 - 用户会把它混淆为一个超链接!


    Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <video> 标签。<video>标签定义视频,比如电影片段或其他视频流。

    <video> 标签是 HTML 5的新标签。

    提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。


    详见:http://www.w3school.com.cn/tags/tag_video.asphttp://www.w3school.com.cn/jsref/dom_obj_video.asp


    Word Break Opportunity (<wbr>)规定在文本中的何处适合添加换行符。

    提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr>元素来添加 Word Break Opportunity(单词换行时机)。

    如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request对象。

    详见:http://www.w3school.com.cn/tags/tag_wbr.asp


    展开全文
  • Html标签大全

    千次阅读 多人点赞 2018-07-31 15:51:06
    HTML标签不区分大小写,&lt;h1&gt;和&lt;H1&gt;是一样的,但建议小写,因为大部分程序员都以小写为准。所用编辑器是Visual Studio Code. 1.HTML基本结构 &lt;html&gt;  &lt;head&...

    HTML标签不区分大小写,<h1><H1>是一样的,但建议小写,因为大部分程序员都以小写为准。所用编辑器是Visual Studio Code.

    1.HTML基本结构

    <html>
        <head>...</head>
        <body>...</body>
    </html>

    代码讲解:

    (1) <html></html>称为根标签,所有的网页标签都在<html></html>中。

    (2) <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script>、 <style><link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。下面这些标签可用在 head 部分:

    <span style="color:#14191e"><head>
        <title>...</title>
        <meta>
        <link>
        <style>...</style>
        <script>...</script>
    </head></span>

    <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

    例如:

    <span style="color:#14191e"><head>
        <title>hello world</title>
    </head></span>

    (3) 在<body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

    2.<!--注释文字-->,可用ctrl+/调出。

    3.<p>标签,添加段落。

          语法:<p>段落文本</p>

    4.<hx>标签,为网页添加标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级,且字号也是最大的。

    语法:<hx>标题文本</hx> (x为1-6)

    5.加入强调语气,使用<strong>和<em>标签。但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调,。

          语法:<em>需要强调的文本</em>  

            <strong>需要强调的文本</strong> 

    6.使用<span>标签为文字设置单独样式。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>了不起的盖茨比</title>
    <style>
    span{
        color:blue;  //为美国梦三个字设置颜色
    }
    </style>
    </head>
    <body>
        <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
        <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"<strong>爵士乐时代</strong>"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
    </body>
    </html>

    7.<q>标签,短文本引用

    语法:

    <q>引用文本</q>

    8.<blockquote>标签,长文本引用

    语法:

    <blockquote>引用文本</blockquote>

    9.使用<br/>标签分行显示文本,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

    10.“&nbsp;”为网页中添加一些空格。

    11.<hr/>标签,添加水平横线.

    12.<address>标签,为网页加入地址信息

    语法:

    <address>联系地址信息</address>

    例如::<address>北京市西城区德外大街10号</address>

    13.使用<code>标签加入一行代码。

    语法:

    <code>代码语言</code>

    例如:<code>var i=i+300;</code>

    14.使用<pre>标签为网页加入大段代码。

    语法:

    <pre>语言代码段</pre>

    例如:

    <pre>
        var message="欢迎";
        for(var i=1;i<=10;i++)
        {
            alert(message);
        }
    </pre>

    15.使用ul,添加新闻信息列表,ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点。

    语法:

    <ul>
      <li>信息</li>
      <li>信息</li>
       ......
    </ul>

    举例:

    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>

    16.使用ol,添加图书销售排行榜,<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始。

    语法:

    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>

    举例:

    下面是一个热点课程下载排行榜:

    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>

    17.认识div在排版中的作用,在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。

    语法:

    <div>…</div>

    18.给div命名,使逻辑更加清晰,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

    语法:

    <div  id="版块名称">…</div>

    19.table标签,认识网页上的表格。

    创建表格的四个元素:

    table、tbody、tr、th、td

    (1)<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    (2)<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

     

    (3)<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    (4)<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    (5)<th>…</th>:表格的头部的一个单元格,表格表头。

    (6)表格中列的个数,取决于一行中数据单元格的个数。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>认识table表标签</title>
    </head>
    <body>
    <table>
      <tbody>
        <tr>
          <th>班级</th>
          <th>学生数</th>
          <th>平均成绩</th>
        </tr>
        <tr>
          <td>一班</td>
          <td>30</td>
          <td>89</td>
        </tr>
        <tr>
          <td>二班</td>
          <td>35</td>
          <td>85</td>
        </tr>
        <tr>
            <td>三班</td>
            <td>32</td>
            <td>80</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

    20.用css样式,为表格加入边框

    如下代码:

    <style type="text/css">
    table tr td,th{border:1px solid #000;}
    </style>

    21.<table summary="表格简介文本">     为表格添加摘要
    22.为表格添加标题:
     <table>
              <caption>标题文本</caption>
              <tr>
              <td>…</td>
              <td>…</td>
               …
               </tr>
                …
       </table>

    23.使用<a>标签,链接到另一个页面。使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

    语法:

    <a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

    title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

    例如:

    <a  href="http://www.baidu.com"  title="点击进入百度">click here!</a>

    <a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口打开。

    如下代码:

    <a href="目标网址" target="_blank">click here!</a>

    注:页面只显示<a></a>之间的内容。

    24.使用mailto在网页中链接Email地址

    <a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:

    注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

    下面是一个完整的实例:

    <a href="mailto:yy@baidu.com?cc=xiaoming@baidu.com&bcc=xiaoyu@baidu.com&subject=主题&body=内容">发送</a>

    在浏览器中显示的结果:

    发送

    25.认识<img>标签,为网页插入图片

    语法:

    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

    举例:

    <img src = "myimage.gif" alt = "My Image" title = "My Image" />

    讲解:

    (1)src:标识图像的位置;

    (2)alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

    (3)title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

    (4)图像可以是GIF,PNG,JPEG格式的图像文件。

    26.使用表单标签,与用户交互

    网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

    语法:

    <form   method="传送方式"   action="服务器文件">

    讲解:

    1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    3.method  数据传送的方式(get/post)。

    <form    method="post"   action="save.php">
            <label for="username">用户名:</label>
            <input type="text" name="username" />
            <label for="pass">密码:</label>
            <input type="password" name="pass" />
    </form>

    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>表单标签</title>
    </head>
    <body>
    <form method="post" action="save.php">
          <label for="username">用户名:</label>
          <input type="text"  name="username" id="username" value="" />
          <label for="pass">密码:</label>
          <input type="password"  name="pass" id="pass" value="" />    
          <input type="submit" value="确定"  name="submit" />
          <input type="reset" value="重置" name="reset" />
    </form>  
    </body>
    </html>

    运行结果:

    注意:

    (1)所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    (2)method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki,里面有详细介绍。

    27.文本输入框、密码输入框

    语法

    <form>
       <input type="text/password" name="名称" value="文本" />
    </form>

    (1)type:

       当type="text"时,输入框为文本输入框;

       当type="password"时, 输入框为密码输入框。

    (2)name:为文本框命名,以备后台程序ASP 、PHP使用。

    (3)value:为文本输入框设置默认值。(一般起到提示作用)

    举例

    <form>
      姓名:
      <input type="text" name="myName">
      <br/>
      密码:
      <input type="password" name="pass">
    </form>

    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>文本输入框、密码输入框</title>
    </head>
    <body>
    <form  method="post" action="save.php">
            账户: 
    	<input type="text"    name="myName" />
    	<br>
    	密码: 
        <input type="password"  name="pass" />
    </form> 
    </body>
    </html>

    运行结果:

    28.文本域,支持多行文本输入

    当用户需要在表单中输入大段文字时,需要用到文本输入域。

    语法

    <textarea  rows="行数"  cols=“列数”>文本</textarea>

    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

    2cols :多行输入域的列数

    3rows :多行输入域的行数

    4、在<textarea></textarea>标签之间可以输入默认值

    举例

    <form  method="post" action="save.php">
            <label>联系我们</label>
            <textarea cols="50" rows="10" >在这里输入内容...</textarea>
    </form>

    29.使用单选框、复选框,让用户选择

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

    语法:

    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

    (1)type:

       当 type="radio" 时,控件为单选框

       当 type="checkbox" 时,控件为复选框

    (2)value:提交数据到服务器的值(后台程序PHP使用)

    (3)name:为控件命名,以备后台程序 ASP、PHP 使用.同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。

    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>单选框、复选框</title>
    </head>
    <body>
    <form action="save.php" method="post" >
        <label>性别:</label>
        <label>男</label>
        <input type="radio" value="1"  name="gender" />
        <label>女</label>
        <input type="radio" value="2"  name="gender" />
    </form>
    </body>
    </html>

    运行结果如下:

    (4)checked:当设置 checked="checked" 时,该选项被默认选中

    如下代码:

    30.使用下拉列表框,节省空间

    下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

    讲解:

    1、value:

    2、selected="selected"

    设置selected="selected"属性,则该选项就被默认选中。

    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>下拉列表框</title>
    </head>
    <body>
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select>
          <option value="看书">看书</option>
          <option value="旅游" selected="selected">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
    </form>
    </body>
    </html>

    31.使用下拉列表框进行多选

    下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。如下代码:

    在浏览器中显示的结果:

    举例代码:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>使用下拉列表框进行多选</title>
    </head>
    <body>
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select multiple="multiple">
          <option value="看书">看书</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
          <option value="购物">购物</option>
        </select>
    </form>
    </body>
    </html>

    运行结果如下:

    32.使用提交按钮,提交数据

    在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮

    语法

    <input   type="submit"   value="提交">

    type:只有当type值设置为submit时,按钮才有提交作用

    value按钮上显示的文字

    举例

    在浏览器中显示的结果:

    33.使用重置按钮,重置表单信息

    当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

    语法

    <input type="reset" value="重置">

    type:只有当type值设置为reset时,按钮才有重置作用

    value按钮上显示的文字

    举例

    在浏览器中显示的结果:

    代码演示:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>重置按钮</title>
    </head>
    <body>
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select>
          <option value="看书">看书</option>
          <option value="旅游" selected="selected">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
        <input type="submit" value="确定"  />
        <input type="reset" value="重置"  />
    </form>
    </body>
    </html>

    运行结果如下:

    34.form表单中的label标签

    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

    语法:

    <label for="控件id名称">

    注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

    例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>form中的lable标签</title>
    </head>
    
    <body>
    <form>
       <label for="male">男</label>
      <input type="radio" name="gender" id="male" />
      <br />
      <label for="female">女</label>
      <input type="radio" name="gender" id="female" />
      <br />
      <label for="email">输入你的邮箱地址</label>
      <input type="email" id="email" placeholder="Enter email">
      
    </form>
    
    </body>
    </html>

    运行结果:

    展开全文
  • 假设我们要获取下面html标签中的内容: <p>桥边姑娘</p><p>你的芬芳</p><p>我把你放心上</p><p>不想让你流浪</p> <p><span style="white-space: normal;...

    如何获取html中正文的内容

    假设我们要获取下面html标签中的内容:

    <p>桥边姑娘</p><p>你的芬芳</p><p>我把你放心上</p><p>不想让你流浪</p>
    
    <p><span style="white-space: normal;">王者荣耀</span></p>
    

    第一段是获取<p></p>标签内部的数据,第二个是获取<p><span></span></p>标签中的数据,其中span标签中有style属性值。

    使用过正则表达式的同学肯定知道,上面两种情况其实都是一种情况,我们要获取的是尖括号括起来的一对标签中间的数据,起始标签形如<x>,结束标签形如</x>,这里的x表示的html标签。

    定义正则表达式

    此外,我们还需要考虑起始标签中包含style的数据,另外特殊的<br/>标签,对实际获取数据无意义,也需要过滤掉。

    通过上面的分析,我们可以如下正则表达式:

    <[a-zA-Z]+.*?>([\s\S]*?)</[a-zA-Z]*?>
    

    具体处理过程

    数据预处理

    在使用正则表达式处理之前,我们先对数据进行预处理,比如style和
    标签:

    /**
     * 替换掉html标签里面的style内容
     *
     * @param content
     * @return
     */
    public static String replaceStyle(String content) {
        if (content == null || content.length() == 0) {
            return content;
        }
        String regEx = " style=\"(.*?)\"";
        Pattern p = Pattern.compile(regEx);
        Matcher m = p.matcher(content);
        if (m.find()) {
            content = m.replaceAll("");
        }
        return content;
    }
    
    /**
     * 移除掉</br>标签
     *
     * @param src
     * @return
     */
    public static String removeBrTag(String src) {
        if (src != null && !src.isEmpty()) {
            src = src.replaceAll("<br/>", "");
        }
        return src;
    }
    
    针对标签嵌套的情况

    针对多个标签嵌套的情况进行处理,比如 <p><span style="white-space: normal;">王者荣耀</span></p>,在经过预处理和正则匹配的后结果是 <span>王者荣耀,需要手工移除掉前面的起始标签,对应的方法如下:

    /**
     * 针对多个标签嵌套的情况进行处理
     * 比如 <p><span style="white-space: normal;">王者荣耀</span></p>
     * 预处理并且正则匹配完之后结果是 <span>王者荣耀
     * 需要手工移除掉前面的起始标签
     * @param content
     * @return
     */
    public static String replaceStartTag(String content) {
        if (content == null || content.length() == 0) {
            return content;
        }
        String regEx = "<[a-zA-Z]*?>([\\s\\S]*?)";
        Pattern p = Pattern.compile(regEx);
        Matcher m = p.matcher(content);
        if (m.find()) {
            content = m.replaceAll("");
        }
        return content;
    }
    

    具体匹配方法

    /**
     * 匹配html标签,例如"<p>xxx</p>"这种格式
     */
    private static Pattern HTML_TAG_PATTERN = Pattern.compile("<[a-zA-Z]+.*?>([\\s\\S]*?)</[a-zA-Z]*?>");
    
    /**
     * 获取html中的数据
     * @param htmlString
     * @return
     */
    public static List<String> getResultsFromHtml(String htmlString) {
        List<String> results = new ArrayList<>();
        // 数据预处理
        htmlString = replaceStyle(removeBrTag(htmlString));
        if (htmlString != null && htmlString.length() > 0) {
            Matcher imageTagMatcher = HTML_TAG_PATTERN.matcher(htmlString);
            // 针对多个并列的标签的情况
            while (imageTagMatcher.find()) {
                String result = "";
                // group(1)对应正则表达式中的圆括号括起来的数据
                result = imageTagMatcher.group(1).trim();
    
                // 针对多个标签嵌套的情况进行处理
                if (result != null && result.length() > 0) {
                    result = replaceStartTag(result);
                }
    
                results.add(result);
            }
        }
        return results;
    }
    

    测试验证

    测试方法如下:

    public static void main(String[] args) {
        String ss = "<p>桥边姑娘</p><p>你的芬芳</p><p>我把你放心上</p><p>不想让你流浪</p>";
        List<String> results = getResultsFromHtml(ss);
        System.out.println("results:" + results);
    
        String ss1 = "<p><span style=\"white-space: normal;\">王者荣耀</span></p>";
        List<String> results1 = getResultsFromHtml(ss1);
        System.out.println("results1:" + results1);
    }
    

    output:

    results:[桥边姑娘, 你的芬芳, 我把你放心上, 不想让你流浪]
    results1:[王者荣耀]
    
    展开全文
  • Spring boot 中Thymeleaf 模板 html 标签使用 ​ 在Spring boot 项目开发中,会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧,有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中...

    Spring boot 中Thymeleaf 模板 html 标签使用

    ​ 在Spring boot 项目开发中,会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧,有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中(html页面)Thymeleaf元素与html元素相结合使用的说明与代码例子。文中会提高大量Thymeleaf标签的属性介绍和使用的逻辑示例代码。
    pom.xml 项目中使用的Thymeleaf版本

            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf</artifactId>
                <version>3.0.11.RELEASE</version>
            </dependency>
    

    1 文字内联标签引入

    ​ Thymeleaf模板中的使用文字内联标签,需要在使用的html元素上加上文字内联标签标记。

    <body th:inline="text">            
      ...
    </body>
    
    <script th:inline="javascript">
      ... 
    </script>
    

    2 逻辑类标签使用

    2.1 th:block与th:each [# th:each=""]循环

    th:block仅是一个属性容器,允许模板开发人员指定他们想要的任何属性。Thymeleaf执行完成后,th:block标签不会在html页面中保存下来,它只是逻辑标签。

    th:each是循环逻辑标签,负责迭代集合中数据到显示到html页中来。

    th:each=“迭代器名称: 集 合 元 素 的 名 称 " 。 例 如 : t h : e a c h = " u s e r : {集合元素的名称}"。 例如: th:each="user: "th:each="user:{users}”

    <body th:inline="text">
    <table>
       <tr> 
            <td>名称</td>
            <td>地址</td>
        </tr>    
      <th:block th:each="user:${users}">
        <tr>
            <td th:text="${user.name}">...</td>
            <td th:text="${user.address}">...</td>
        </tr>
      </th:block>
    </table>
    </body>
    

    javascript[# th:each=""]循环遍历也可以使用文字关联标签。

    例如:[# th:each=“item: l i s t " ] [ ( {list}"] [( list"][({item.name})]” [/]

    <script  th:inline="javascript">  
      [# th:each="item:${users}"] 
        [(${item.name})]  
        [(${item.address})]  
       [/]
    </script>
    

    引用名称+Stat 例子:itemStat 遍历循环的公共属性引用名字

    • 当前的迭代索引,从0开始。这是index属性。
    • 从1开始的当前迭代索引。这是count属性。
    • 迭代变量中元素的总数。这是size属性。
    • 每次迭代的iter变量。这是current属性。
    • 当前迭代是偶数还是奇数。这些是even/odd布尔属性。
    • 当前迭代是否是第一个。这是first布尔属性。
    • 当前迭代是否为最后一次。这是last布尔属性。
    <table>
       <tr> 
            <td>名称</td>
            <td>地址</td>
        </tr>    
      <th:block th:each="user:${users}">
        <tr th:class="${userStat.odd}?'odd'"><--判断是否是偶数列-->
            <td th:text="${user.name}">...</td>
            <td th:text="${user.address}">...</td>
        </tr>
      </th:block>
    </table>
    

    2.2 th:text 与 [(${name})] 功能

    th:text显示文本内容标签,可以将循环中遍历的内容通过标签的形式显示在html页面中。

    [(${name})]也可以使用文本标签的形式将内容显示在html页面中,这个方法更加灵活,但是前提必须要在body元素中加入th:inline="text"标记参考 1文字内联标签引入。

    <table>
       <tr> 
            <td>名称</td>
            <td>地址</td>
        </tr>    
      <th:block th:each="user : ${users}">
        <tr>
            <td th:text="${user.name}">...</td>    //th:text 标签使用方法
            <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
        </tr>
      </th:block>
    </table>
    

    2.3 @{}字符串拼接语法

    @{'字符串'+引用内容}将固定的字符串与引用变量组合成新的字符串内容。

    ​ 例如@{’…/WbsItemManageContorller/finduser?id=’+${item.id}}

    ​ html 显示的字符串’…/WbsItemManageContorller/finduser?id=1’

    <table>
       <tr> 
            <td>名称</td>
            <td>地址</td>
            <td>编辑</td>
        </tr>    
      <th:block th:each="user : ${users}">
        <tr>
            <td th:text="${user.name}">...</td>    //th:text 标签使用方法
            <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
            <td>
                <a th:href="@{'../WbsItemManageContorller/finduser?id='+${user.id}}">
                    修改
                </a>
            </td>         
        </tr>
      </th:block>
    </table>
    

    例子 th:onClick:

    <table>
       <tr> 
            <td>名称</td>
            <td>地址</td>
            <td>编辑</td>
        </tr>    
      <th:block th:each="user:${users}">
        <tr>
            <td th:text="${user.name}">...</td>    //th:text 标签使用方法
            <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
            <td>
                <a th:href="@{'../WbsItemManageContorller/finduser?id='+${user.id}}">
                    修改
                </a>
                <div th:onClick="@{'ondel('+${item.id}+')'}">删除</div>
                //@{}字符串拼接语法
            </td>         
        </tr>
      </th:block>
    </table>
    

    2.4 th:if判断标签 [# th:if=]

    ​ th:if通过条件判断,来决定符合条件的元素是否存在于html页面中来。或者通过 [# th:if=] 文字标签来判断范围内的内容是否显示在html页面中。可以在block容器中写 th:if判断语法,也可以在html 元素中写th:if 判断语法。

    gt:great than(大于)>

    ge:great equal(大于等于)>=

    eq:equal(等于)==

    lt:less than(小于)<

    le:less equal(小于等于)<=

    ne:not equal(不等于)!=

    ​ 例如: <th:block th:if="${user.id}>10">

    <table>
       <tr> 
            <td>名称</td>
            <td>地址</td>
            <td>编辑</td>
        </tr>    
      <th:block th:each="user:${users}">
         //判断用户id大于是否大于10
        <th:block th:if="${user.id}>10">   元素判断标签使用
        <tr>
            <td th:text="${user.name}">...</td>    //th:text 标签使用方法
            <td>[(${user.address})]</td>           //[(${引用})]文字内联使用方法
            <td>
                <a th:href="@{'../WbsItemManageContorller/finduser?id='+${user.id}}">
                    修改
                </a>
                <div th:onClick="@{'ondel('+${item.id}+')'}">删除</div>
                //@{}字符串拼接语法
            </td>         
        </tr>
        </th:block>  判断结束标签元素
      </th:block>
    </table>
    

    key javascript[# th:if=]文字逻辑

    <script th:inline="javascript">  
      [# th:each="item:${users}"] 
      `[# th:if="${item.id}>10"] ` 
            [(${item.name})]  
            [(${item.address})]  
        [/]
       [/]
    </script>
    
    

    2.5 标签追加和前置设置

    有些业务逻辑中需要在html属性中进行动态的追加属性内容,我们可以使用到th:attrappendth:attrprepend来进行这样的逻辑操作

    <input type="button" value="提交"
     class="btn" 
     th:attrappend="class=${' ' + cssStyle}" />
     <input type="button" value="提交"
      class="btn warning" />
    

    3 普通标签使用

    3.1 input 常用标签

    标签说明备注
    th:valuevalue 属性th:value="${item.itemid}"
    th:id替换id<input th:id="'xxx' + ${collect.id}"/>
    th:text文本替换<p th:text="${collect.description}">description</p>
    th:selectedselect选择框选中th:selected="(${xxx.id} == ${configObj.dd})"
    th:action表单提交的地址<form action="subscribe.html" th:action="@{/subscribe}">
    th:checked复选框选中th:checked="${user.active}"
    <form action="subscribe.html">
       <input type="text" name="name" th:value="${user.name}"/>
       <select name="deptid">
           <option value="1" th:selected="(${user.deptid}==1)">部门a</option>
           <option value="2">部门b</option>
           <option value="3">部门c</option>
       </select>   
        
       <input type="checkbox" name="z1" value=""/> 
       <input type="hidden" name="z2" value=""/> 
       <input type="radio" name="z3" value=""/> 
       <input type="button"  value="提交" th:onclick="@{'ondel('+${item.id}+')'}"/> 
    </form>
       
    <input type="checkbox" name="option2" checked />
    <input type="checkbox" name="active"
     th:checked="${user.active}" />  
    
    <option value="1" selected >部门a</option>  
    <option value="1" th:selected="(${user.deptid}==1)">部门a</option> //select 判断返显示
    
    

    在html属性标签中有判断是否为false和true的情况。以下标签都可以使用 if 的方式判断true与false的情况。

    th:asyncth:autofocusth:autoplay
    th:checkedth:controlsth:declare
    th:defaultth:deferth:disabled
    th:formnovalidateth:hiddenth:ismap
    th:loopth:multipleth:novalidate
    th:nowrapth:openth:pubdate
    th:readonlyth:requiredth:reversed
    th:scopedth:seamlessth:selected

    3.2 常用标签

    Thymeleaf所有标签合集,这些为在Thymeleaf中可以使用和引用的标签。

    th:abbrth:acceptth:accept-charset
    th:accesskeyth:actionth:align
    th:altth:archiveth:audio
    th:autocompleteth:axisth:background
    th:bgcolorth:borderth:cellpadding
    th:cellspacingth:challengeth:charset
    th:citeth:classth:classid
    th:codebaseth:codetypeth:cols
    th:colspanth:compactth:content
    th:contenteditableth:contextmenuth:data
    th:datetimeth:dirth:draggable
    th:dropzoneth:enctypeth:for
    th:formth:formactionth:formenctype
    th:formmethodth:formtargetth:fragment
    th:frameth:frameborderth:headers
    th:heightth:highth:href
    th:hreflangth:hspaceth:http-equiv
    th:iconth:idth:inline
    th:keytypeth:kindth:label
    th:langth:listth:longdesc
    th:lowth:manifestth:marginheight
    th:marginwidthth:maxth:maxlength
    th:mediath:methodth:min
    th:nameth:onabortth:onafterprint
    th:onbeforeprintth:onbeforeunloadth:onblur
    th:oncanplayth:oncanplaythroughth:onchange
    th:onclickth:oncontextmenuth:ondblclick
    th:ondragth:ondragendth:ondragenter
    th:ondragleaveth:ondragoverth:ondragstart
    th:ondropth:ondurationchangeth:onemptied
    th:onendedth:onerrorth:onfocus
    th:onformchangeth:onforminputth:onhashchange
    th:oninputth:oninvalidth:onkeydown
    th:onkeypressth:onkeyupth:onload
    th:onloadeddatath:onloadedmetadatath:onloadstart
    th:onmessageth:onmousedownth:onmousemove
    th:onmouseoutth:onmouseoverth:onmouseup
    th:onmousewheelth:onofflineth:ononline
    th:onpauseth:onplayth:onplaying
    th:onpopstateth:onprogressth:onratechange
    th:onreadystatechangeth:onredoth:onreset
    th:onresizeth:onscrollth:onseeked
    th:onseekingth:onselectth:onshow
    th:onstalledth:onstorageth:onsubmit
    th:onsuspendth:ontimeupdateth:onundo
    th:onunloadth:onvolumechangeth:onwaiting
    th:optimumth:patternth:placeholder
    th:posterth:preloadth:radiogroup
    th:relth:revth:rows
    th:rowspanth:rulesth:sandbox
    th:schemeth:scopeth:scrolling
    th:sizeth:sizesth:span
    th:spellcheckth:srcth:srclang
    th:standbyth:startth:step
    th:styleth:summaryth:tabindex
    th:targetth:titleth:type
    th:usemapth:valueth:valuetype
    th:vspaceth:widthth:wrap
    th:xmlbaseth:xmllangth:xmlspace

    3.3 工具内部对象

    在Thymeleaf中为我为提供了一组非常使用的工具对象。帮助我们进行编码

    • #execInfo:有关正在处理的模板的信息。
    • #messages:用于获取变量表达式内的外部化消息的方法,与使用#{…}语法获得消息的方法相同。
    • #uris:用于转义部分URL / URI的方法
    • #conversions:用于执行已配置的转换服务(如果有)的方法。
    • #datesjava.util.Date对象的方法:格式化,组件提取等。
    • #calendars:类似于#dates,但用于java.util.Calendar对象。
    • #numbers:格式化数字对象的方法。
    • #stringsString对象的方法:包含,startsWith,前置/附加等。
    • #objects:一般对象的方法。
    • #bools:布尔值评估的方法。
    • #arrays:数组方法。
    • #lists:列表方法。
    • #sets:套方法。
    • #maps:地图方法。
    • #aggregates:用于在数组或集合上创建聚合的方法。
    • #ids:用于处理可能重复的id属性的方法(例如,由于迭代的结果)。
    展开全文
  • Java去掉html标签的各种姿势

    千次阅读 2019-06-12 22:43:10
    业务开发中可能需要将html标签全部去掉,本文将多种方法综合在这里,供大家参考。 二、方法 2.1 纯正则方法 import java.util.regex.Matcher; import java.util.regex.Pattern; public class HTMLSpirit{...
  • 今天用wangEditor写一个文章详情,html标签存进去了,但是在取出来解析的时候出现问题 解析的样子如下: ``` <p>fasfas</p><p>fkasjfkas</p><p>kasfjalsk</p>&...
  • 各位大佬,我想问一下如何在HTML标签的尖括号里面写c标签呀 就像下面这样 ``` ${appCategory.id == queryCategoryLevel3 }">selected="selected"</c:if>value="${appCategory.id}">${appCategory....
  • js去掉html标签

    万次阅读 2019-06-03 20:33:00
    在jsp文件中,通过js脚本加正则表达式去掉html标签的样式,例如,编辑器里面的文字会有很多的样式,我们怎么给去掉呢? 像下面这图中,就是编辑器,我们给加入一点样式后,看着编辑器里面很简单:如下: 这时候,...
  • 动态修改HTML标签属性的两种方式

    千次阅读 2019-12-30 15:50:04
    一般来说,如果想要对HTML标签的属性进行动态修改,基本上都是通过JS的触发事件来实现的,这也就涉及到有关JS代码的编写,当然,其中也有两种编写方式:JS和JQuery,下面我来进行详细的案例分析一下: (一)通过JS...
  • Html常用标签(大全)html标签大全总结必看

    万次阅读 多人点赞 2018-08-01 14:26:59
    html&gt;…&lt;/html&gt; 定义 HTML 文档 &lt;head&gt;…&lt;/head&gt; 文档的信息 &lt;meta&gt; HTML 文档的元信息 &lt;title&gt;…&lt;/title&gt;...
  • html标签触发方法,标签绑定事件

    千次阅读 2019-06-27 10:29:55
    html标签触发方法,标签绑定事件 1. js脚本里面通过ID绑定 $('#标签ID').click(function () { }) $(’#标签ID’)就是通过标签ID拿到了标签,下面无论是触发点击事件还是什么,都可以自行操作 2. 在标签上绑定事件...
  • 使用正则过滤html标签。 以前写了很多次。但每次都没保存,然后换了家公司后,没有了以前的代码,然后又遇到类似的问题,然后又是网上查啊写啊,自己鼓捣了大半天。 所以,这次,我决定在博客上也写一份,备份,省...
  • HTML 标签(tag)

    千次阅读 2018-09-16 10:26:09
    *html标签是由尖括号包围的关键词,例如&lt;html&gt;、&lt;head&gt;、&lt;title&gt;等等; *html标签通常是成对出现的,例如&lt;b&gt;和&lt;/b&gt;等; *标签中的第一个...
  • Html 标签文本缩进

    千次阅读 2020-02-19 09:58:43
    一是每行都放在p标签里,再设置p标签的样式。 二是在每行文字前面加空格或是span标签,设置span标签padding-left:2em;这个数值自己改改也行。 <style type="text/css"> p { text-indent: 2em; /*em是相对...
  • js将html字符串转化为html标签

    千次阅读 2019-10-17 14:59:26
    js将html字符串转化为html标签 let data = { "errCode": "0", "errMessage": "", "data": { "sOmGetDataResult": "<OmRes State=\"err\" Msg=\"Database error: Data...
  • Markdown中使用html标签

    万次阅读 2018-08-28 15:19:48
    有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. &lt;h1&gt;这是一个标题&lt;/h1&gt; //其中的&lt;h1&...
  • //删除html标签 public string SplitHtml(string Htmlstring) { Htmlstring = System.Text.RegularExpressions.Regex.Replace(Htmlstring, @"<[^>]*>", ""); ...
  • vscode怎么自动结束html标签

    万次阅读 2021-02-06 15:07:32
    vscode怎么自动结束html标签 首先Ctrl + shift + x 打开拓展 搜索Auto Close Tag 插件 安装完后应该既可以了。
  • html_str = “1234567891011121314151617181920” 正则提取(正常思维) var re = new RegExp(’<[^<>]+>’,‘g’); var text = html_str.replace(re ,""); //或 var text = html_str.replace(/<[^&...
  • html标签分类及常用标签

    万次阅读 多人点赞 2018-01-28 11:52:05
    html标签 html标签HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。 标签不会出现在页面中,只有标签中的内容才会显示在页面上 :也就是html>此处为内容html> 标签不区分大小写...
  • html标签中添加点击事件的写法

    千次阅读 2019-10-12 14:33:47
    fn是函数名,2是实参 <div id="node" onclick="fn(2)"></div>
  • 后台用富文本编辑器编辑好后,在前台读取数据库中的信息,前台读取的数据是带HTML标签的数据格式 尝试的解决办法: 1:使用js方法将前台读取出来的数据用html()方法 innerhtml() 等js原生方法尽行转换,...
  • html标签使用多个class

    千次阅读 2018-12-07 10:03:03
    #html标签使用多个class html标签是允许定义多个class类名的。比如: &amp;lt;div class = &quot;exp1 exp2&quot;&amp;gt;&amp;lt;/div&amp;gt; 上边这个div就用到了exp1、exp2这两个...
  • mysql去除某个字段的html标签

    千次阅读 2018-07-11 15:48:57
    因此数据迁移过来后,字段里就多余了一些html标签。下面就是一个处理html标签的函数。可以用批量修改的脚本加这个函数,将标签去掉。SET GLOBAL log_bin_trust_function_creators=1; DROP FUNCTION I...
  • freemarker 页面显示html标签问题

    千次阅读 2018-12-04 09:15:18
    在页面显示富文本的内容时,会自动将内容加上双引号,导致页面展示时连同标签一起展示,想了好多种办法都不行,最后终于想到了一个办法,总结如下: 1、将后台内容用一个隐藏域在页面上存储下来 &lt;div id=&...
  • html标签的快捷录入方式

    万次阅读 2018-05-09 05:29:02
    很经典的HTML标签录入方式,最好是使用IDE,可以达到智能快速录入。
  • Vue中解析html标签

    万次阅读 2019-01-19 11:49:23
    vue中不解析html标签,会把html标签给正常输出,vue中提供了v-html来解决这一问题 正常情况下输出: &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta...
  • 折叠当前标签: ctrl + shift + [ 展开当前标签: ctrl + shift + ] 折叠所有: ctrl + k, ctrl + 0 // 注意:是先执行ctrl + k后执行ctrl + 0(数字零),而不是两个命令都可以 展开所有: ctrl + k, ...
  • python去除文本中html标签

    万次阅读 2019-01-07 22:08:46
    利用正则表达式去除html标签。代码如下: import re c = re.sub('&lt;[^&lt;]+?&gt;', '', b).replace('\n', '').strip() 效果如下: 总代码如下: import re a = response...
  • 在给公司的产品查询数据的过程中,要求去掉字段里的一些html标签。 下面就是一个处理html标签的函数。可以用批量修改的脚本加这个函数,将标签去掉。 查询前后的对比如下 没有使用上面函数的查询结果: select...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,422,196
精华内容 568,878
关键字:

html标签