精华内容
下载资源
问答
  • HTML标签常用标签

    千次阅读 多人点赞 2017-02-23 11:33:58
    1、 注释标签  注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 2、  声明标签 声明必须是 HTML ...版本进行编写的指令。在 HTML 4.01 中有三种 声明 :1)HTML 4.01 Strict 该 DTD 包含所有

                    

    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-26 16:32:38
    图像标签 &lt;img src="" alt=""..../&gt; img属性:src(必写) 表示图片的URL alt代表图像替代文字 height、width代表高和宽 可以是像素(weight="50px")也可以是百分比...


    图像标签
    <img src="" alt=""..../>
    img属性:src(必写) 表示图片的URL   alt代表图像替代文字    height、width代表高和宽 可以是像素(weight="50px")也可以是百分比(height="30%")
    src内容:可以是绝对路径,也可以是相对路径,相对路径是相对网页来说:
    1.如果图片和网页在同一目录下 <img src="1.jpg"/>
    2.如果图片在网页的上一目录中 <img src="../1.jpg"/>
    3.如果图片在网页的下一级目录中 <img src="文件夹名/1.jpg"/>

    当由于:网速太慢、src属性中的错误、浏览器禁用图像,用户无法查看图像,alt属性可以代替图像显示在浏览器中的内容。

    展开全文
  • HTML基础——图像标签(img标签)

    千次阅读 热门讨论 2021-01-09 21:39:21
    一、思维导图: 二、代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">...img标签</title> </head> <body> • <img src="花花.jpg" /> • &l

    一、思维导图:

    二、img标签语法结构

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>img标签</title>
    </head>
    <body>
    
    	①    <img src="花花.jpg" />
    
    	②    <img src="花花.jpg" width=" 100">
    
    	③     <img src="花花.jpg" height=" 178">
    
    	④     <img src="花花.jpg" width=" 200" title="这是华晨宇">
    	<!--alt属性:图像的替代文字-->
    	⑤    <img src="huahua.jpg" width="100" alt="对不起,你需要查看的图片不见了" />
    </body>
    </html>

     

    代码说明:

        1、img标签中的img其实是英文image的缩写,所以 img标签的作用,就是告诉浏览器我们需要显示一张图片。

     

        2、img标签格式:<img src="">

         其实img标签中的src是英文source的缩写,所以img标签中的src就是用来告诉img标签,需要显示的图片

        

        3、注意点

        - 和H系列的标签/p标签还有Hr标签不一样,img标签不会独占一行

        - 使用width、height属性可能会使图片变形,想要等比例改变大小,可以只指定其中一个(宽度或高度),另一个会系统计算出来。

    注释:图像的名称和尺寸是以属性的形式提供的。

     

        4、属性:

        (1)width、height属性就是指定显示图片的宽度和高度若无指定,则系统按照指定的高度、宽度来显示

        (2)title属性:用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容

        (3)alt:是alternate的缩写,它的作用就是用于告诉浏览器,当需要显示的图片找不到时显示什么内容

    效果:

    三、img标签的路径问题:

    其实想给src属性赋值有两种方式:

     

    1.通过相对路径赋值:

    相对路径就是每次都从.html文件所在的文件夹开始查找,我们称之为相对路径。

    • 1.1 *.html 文件跟 *.jpg 文件(同在f盘)在不同目录下:
       <img src="file:///f:/*.jpg" width="300" height="120"/>
    • 1.2同级:指图片和.html文件存储在同一个文件夹中

    格式:src="图片名称.jpg"

    含义:在.html文件所在的文件夹中查找名称叫做"xxx.jpg"的图片

    即:*.html 文件跟 *.jpg 图片在相同目录下:

    <img src="*.jpg" width="300" height="120"/>
    • 1.3 下级:指存储图片的文件夹和.html文件在同一个文件夹中

    格式:src="images/xxx.jpg"

    含义:在.html文件所在的文件夹中找到名称叫做images的文件夹,然后在images文件夹中找到名称叫做xxx.jpg的图片

    即:图片 *.jpg 在 image 文件夹中,*.html 跟 image 在同一目录下:

    <img src="image/*.jpg/"width="300" height="120"/>
    • 1.4上级:存储图片的位置和存储代码的文件夹在用一个文件夹中

    格式:src="../xxx.jpg"

    含义:在.html文件所在的文件夹中找到这个文件夹的上一级文件夹,然后再在上一级文件夹中找到名称叫做xxx.jpg的图片

    其中“../”代表从当前的位置找到上一级文件夹

    即:图片 *.jpg 在 image 文件夹中,*.html 在 connage 文件夹中,image 跟 connage 在同一目录下:​​​​​​​

     <img src="../image/*.jpg/"width="300" height="120"/>

     

    2.通过绝对路径赋值:

    绝对路径就是每次都从指定的盘符开始查找.

    • 格式:src="F:\学习资料\计算机学习资料\BS\HTML学习\花花.jpg"

    例如:<img src="F:\学习资料\计算机学习资料\BS\HTML学习\花花.jpg">

    • 含义:按照文件夹的名称一层一层的找。
    • 如果图片来源于网络,那么写绝对路径:
     <img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

     

    注意:

    1.路径中不要出现中文,否则可能出现未知问题

    2.如果是通过相对路径来指定,那么不能跨盘符

     

    注意:

    1.以后企业开发中如果需要编写路径,统一使用反斜杠"/",不要使用正斜杠“\”。因为将来我们开发的程序肯跟会部署到其他操作写鸥汀的服务器上,而在其他操作系统中共路径都是"/",所以如果你写的不是"/",可能会引发问题。

    2.一般在企业开发中不会使用绝对路径,因为绝对路径的可移植性不好,代码拷贝发给别人之后,可能就不能打开了。

    展开全文
  • Java编写的网页版魔方游戏 内容索引:JAVA源码,游戏娱乐,魔方,网页游戏 Java编写的网页版魔方游戏,编译后生成.class文件,然后用HTML去调用,不过运行时候需要你的浏览器安装有运行Class的插件。Java源代码实现部分...
  • 示例使用HTML5的canvas标签和Javascript脚本,简单的编写了装载图片效果,请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  ...
  • 教学内容HTML图像标签的使用HTML链接标签的使用HTML水平线标签的使用设置网页背景图像教学目的掌握标签a标签标签标签的使用教学重点标签a标签标签标签的使用实验难点链接标签的使用1使用HTML标题标签设置网页标题...
  • html5

    千次阅读 2018-11-15 00:07:56
    HTML5 1.Html5 是一个泛指: HTML5 +CSS3+JavaScript 文档的第一行的代码表示的是当前文档的类型...(1)首先在文档类型的书写上不同,html5中新增了一些语义化的标签,以及表单属性和表单的类型,还包含有新的...

    HTML5

    1.Html5 是一个泛指: HTML5 +CSS3+JavaScript

    文档的第一行的代码表示的是当前文档的类型(Html1.0---html5.0)

    Html5 的文档类型:  <!doctype Html>

    2.Html5和html之间有什么区别

    (1)首先在文档类型的书写上不同,html5中新增了一些语义化的标签,以及表单属性和表单的类型,还包含有新的伪类,伪元素选择器。

    (2)简单,在书写上没有一定的要求eg: 可以不写结束标签,但是不能太随意。

    小拓展:

    浏览器内核指的是浏览器渲染的方式,每个浏览器的内核不相同。浏览器最重要或者说核心的部分是"Rendering Engine","渲染引擎",不过我们一般习惯将之称为"浏览器内核"。负责对网页语法的解释(如标准通用标记语言下的一个应用HTMLJavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

    1. 常用的语义标签:<nav></nav>--------导航

                       

                       <section></section>-------区块,相当于html中的主体

    <header></header>-------页眉,相当于html中的头部

                       <footer></footer>----------页脚,相当于html中的尾部

                       <article></article>------<文章>

                   <aside></aside>------<侧边栏>

                   <figure></figure>------表示媒介 内容分组,里面用来放置图像图表等

                   <progress></progress>------进度条,包括value和max两个属性

    1. 表单事件以及表单属性:

    表单属性:       patttern:正则表达式,用来验证表单

    placeholder:占位符,用于表单的阴影提示

    autofocus:用于获取焦点(可以自动聚焦在某一控件上)

    muliple:多选

    required:必填项

    novalidate:关闭验证

    autocomplete:规定输入字段是否应该启用自动完成功能其属性值(value)包括两个属性值:on(启用自动完成),off(禁止)

    表单事件: oninput   oninvalid(验证不通过时的提示)

     

     

    智能(数据)列表:<datalist>

                          <option></option>-------通过option添加属性

                          <option></option>

    </datalist>

    5.多媒体

    Video   audio   embed

    属性: src   引入视频的路径

    Controls  属性只有video和audio具备

    Poster: 设置初始加载的视频图片

    Loop: 设置视频循环播放

    Autoplay: 自动播放

    Type: video/mp4

    添加多媒体的四种方法:(1)通过controls(是用来设置视频播放控件)控件添加

    例如:<video src=媒体链接 controls=controls>

        (2)<video controls=controls poster=给视频添加背景图片 loop=loop  autoplay=autoplay>

    (3)<auto autoplay=autoplay>

         <source src=video/....mp4(mp3)></source>

    </auto>

    1. <embed src=video/...mp3(mp4)></embed>这种方法最简单,不用添加其他播放控件.

    6. css3中新增选择器

    1. 属性选择器分为5种

    E:[attr=value]

    E:[attr]

    E:[attr*=value]

    E:[attr^=value]

    E:[attr$=value]

     

     

     

     

     

     

     

          2.伪类选择器

    E::first-child E::last-child E::nth-child()

    E::nth-last-child()

    E::target 结合锚点使用  ,用户点击时选择

    E::selection  选中的区域

    E::empty  选择没有内容的元素

    E::after/before  在元素内容之后或之前添加内容(元素)

    E::first-line  元素内容首行

    E::first-letter  元素内容首字

     

     

     

    展开全文
  • HTML学习

    千次阅读 多人点赞 2016-10-08 17:31:27
    HTML简介什么是 HTMLHTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 ...HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag
  • html--图像显示标签

    千次阅读 2017-09-19 09:18:29
    基本语法格式 编写图片网页查看源代码图像和文字的对齐
  • PyTagCloud, 创建美丽的标签云作为图像或者 HTML PyTagCloudPyTagCloud允许你创建由 http://www.wordle.net/ 激发的简单标签云。当前,已经编写了以下输出格式并正在工作:PNG图像html/css代码如果你有其他格式的...
  • HTML标签测试

    千次阅读 2018-10-03 00:43:47
     代码如下所示:在body标签中输入HelloWorld!,就会展示在浏览器上。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HelloWorld&lt;/title&gt; &...
  • “数万行代码“教你用html和css编写一个精美的网页

    万次阅读 多人点赞 2021-05-15 14:13:27
    我是歌谣 放弃很容易 但是坚持一定很酷 1前言 作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候...几个人分为一个小组 进行共同开发 页面的跳转直接a标签进行跳转即可 2.1.1..
  • html编写网页实例 网站是开源软件项目的绝佳资源。 网站为用户提供了一个了解您的项目的理想机会。 项目网站可以共享其他信息,屏幕快照,示例代码,视频以及开发人员和用户会发现有用的其他资源。 如果您有兴趣...
  • html编写邮件发送 This article was first published in 2006, then updated in 2015. 本文于2006年首次发表,然后于2015年更新。 HTML email newsletters have come a long way since this article was first ...
  • HTML 代码编写技巧

    千次阅读 2018-04-24 16:57:54
    1. 一定要闭合HTML标签在以往的页面源代码里,经常看到这样的语句: &lt;li&gt;Some text here. &lt;li&gt;Some new text here. &lt;li&gt;You get the idea. 也许过去我们可以容忍这样的非...
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 21 Quirks模式是什么?它和Standards模式有什么区别 21 ...
  • 海思评估板使用指南

    万次阅读 2019-07-02 11:12:06
    LinkPi评估板使用指南 ... 除了对于海思基本功能的封装外,还包括了常用驱动对接,以及 流媒体传输、多格式录制、多画面导播、图像调优、特效叠加、美颜、音频降噪 、移动侦测、 UI 框架 等。     在线文档: ...
  • H5

    千次阅读 多人点赞 2017-08-23 22:32:54
    2)article:它是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面其他内容使用。 3)nav:此标签代表页面的一个部分,表示页面中导航链接的部分。 4)...
  • vue面试题总汇

    千次阅读 多人点赞 2019-02-22 15:26:53
    首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是以创建编译器的。另外compile还负责合并...
  • Caffe简介

    千次阅读 多人点赞 2018-08-19 16:15:54
    这两个函数实现之后,我们就可以把许多层连接成一个网络,这个网络输入数据(图像,语音或其他原始数据),然后计算需要的输出(比如识别的标签)。在训练的时候,可以根据已有的标签计算loss和gradient,然后...
  • 如何制作一个HTML网页

    万次阅读 多人点赞 2018-12-27 12:15:53
    一、基本概念 1.什么是 HTMLHTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 ...HTML 标记标签通常被称为 HTML ...
  • 个人整理 HTML全部标签总集,及用法

    千次阅读 多人点赞 2019-08-07 09:53:01
    个人整理,资料来自HTML参考手册,应该是最全的的了 ...当您编写了大量代码时尤其有用。 使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯(这样就不会把脚本显示为纯文本): <script type="te...
  • JavaWeb

    千次阅读 多人点赞 2017-12-26 09:09:24
    Contant-Disposition ----告诉浏览器下载的方式接受响应 //response.setHeader("Content-Dispositon","attrachment;filename=xxxx"); InputStream 重定向:response.sendRedirect("客服端路径"); 转发: ...
  • C#基础教程-c#实例教程,适合初学者

    万次阅读 多人点赞 2016-08-22 11:13:24
    本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习C#语言编写window应用程序和Web应用程序。当然仅靠一章的内容就完全掌握C#语言是不可能的,如需进一步学习C#语言...
  • html学习笔记 本文章根据B站pink老师的视频内容进行整理,供复习参考 本文内容: 一、Web标准 1、为什么需要Web标准 2、Web标准的构成 二、HTML标签 1、语法规范 2、HTML基本结构标签 ... 3.6 图像标签i...
  • JAVA上百实例源码以及开源项目

    千次下载 热门讨论 2016-01-03 17:37:40
     Java编写的网页版魔方游戏,编译后生成.class文件,然后用HTML去调用,不过运行时候需要你的浏览器安装有运行Class的插件。Java源代码实现部分,比较有意思,也具参考性。像坐标控制、旋转矩阵、定时器、生成图像...
  • 【input 标签的 type 属性详解】

    万次阅读 多人点赞 2019-09-03 23:16:31
    input 标签的 type 属性详解1. input 输入标签的type 属性1.1 input 标签的 type类型 属性的常用属性值⑴ type="text"⑵ type="button"⑶ type="checkbox"⑷ type="file"⑸ type="hidden"⑹ type="image"⑺ type=...
  • HTML基本结构及基本标签

    千次阅读 2018-08-11 08:56:47
    什么是HTMLHTML是Hyper Text Markup Language的缩写,即超文本标记语言(所谓超文本可以理解为具有超能力的文本),是一种解释性语言,用于制作网页界面,使用该语言编写的网页最终被浏览器解释执行 HTML基本...
  • 一、前端学习之HTML编写静态页面

    千次阅读 2019-03-27 22:49:20
    本人也是前端入门小白 先从HTML开始学起 最近花了3天时间学完HTML基础 并练了一个Demo 算是温习一下 1、如图: 2、代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,844
精华内容 14,337
关键字:

如何用html编写图像标签