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

    万次阅读 多人点赞 2019-09-24 13:41:13
    不需要插件,VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 效果图 · 演示如下: 操作步骤 · 如下: 本编辑器已经汉化,所以截图如下。 首先,取消选中(控制在活动...

    不需要插件,VSCode代码自动补全(html标签style样式、css属性及值、),修改配置文件即可完成!


    效果图 · 演示如下:

    在这里插入图片描述


    操作步骤 · 如下:

    本编辑器已经汉化,所以截图如下。

    首先,取消选中(控制在活动代码片段内是否禁用快速建议)

    修改路径(截图示下):

    1. 设置 -->
    2. 文本编辑器 (建议)-->
    3. 取消选中 Suggest:Snippets Prevent Quick Suggestions (控制在活动代码片段内是否禁用快速建议)
    4. 完成第一步。剩下的就是修改配置文件:settings.json

    在这里插入图片描述
    在这里插入图片描述


    如何修改配置文件settings.json

    1. 首先找到文件(截图示下) · 找到并点击 “设置”:
      在这里插入图片描述

    2. 然后,弹出(如下图所示)弹框界面:

      在这里插入图片描述

    3. 然后,点击(如上图)的 “黄色的空心矩形框”,弹出settings.json文件(截图如下)。
      在这里插入图片描述

    4. 开始修改文件settings.json
      修改之前 · 全部代码如下:

      {
          "window.zoomLevel": 0,
          "terminal.integrated.rendererType": "dom"
      }
      

      修改之后 · 全部代码如下:

      {
          "window.zoomLevel": 0,
          "terminal.integrated.rendererType": "dom",
          "editor.suggest.snippetsPreventQuickSuggestions": false,
          "files.associations": {
              "*.vue":"html"
          }
      }
      

    附:参考文章

    1. 解决vscode没有代码提示

    以上就是关于“ VSCode代码自动补全html标签、、css属性及值 - 无插件 ” 的全部内容。

    展开全文
  • 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标签学习

    千次阅读 2020-05-01 14:06:23
    HTML标签学习 1.HTML标签初步认识 HTML是以一个一个标签组成的,标签中可以添加属性,来改变他们的样式。 <!--双便签--> <标签> <标签 属性名="属性值" 属性名="属性值"> </标签> </...

    HTML标签学习

    1.HTML标签初步认识

    HTML是以一个一个标签组成的,标签中可以添加属性,来改变他们的样式。

    <!--双便签-->
    <标签>
    	<标签 属性名="属性值" 属性名="属性值">
    	</标签>
    </标签>
    
    <!--单便签-->
    <便签/>
    <便签>
    

    2.HTML注释

    多行注释:

    <!--
    	html注释
    -->
    

    单行注释:

    <!--html注释-->
    

    3.HTML标准结构

    <!DOCTYPE HTML>
    <!--HTML文件的根-->
    <html>
    	<!--头部-->
    	<head>
    		<meta charset="utf-8">
    		<title>网页标题</title>
    	</head>
    	
    	<!--体-->
    	<body>
    	<!--体内写内容-->
    	</body>
    </html>
    

    4.HTML基础标签

    段落便签
    <!--被p标签标记的文字会形成一个段落-->
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    
    标题字
    <!--
    被h标签标记的文字会形成一个标题
    标题由大到小,1大
    -->
    <h1>这是一个标题</h1>
    <h2>这是另一个标题</h2>
    <h3>这是另一个标题</h3>
    <h4>这是另一个标题</h4>
    <h5>这是另一个标题</h5>
    <h6>这是另一个标题</h6>
    
    换行
    hello<br>world!
    
    横线
    <!--横线-->
    <hr>
    <!--设置横线格式-->
    <hr color="red" width=50%>
    
    居中标签
    <center>这段文字将居中</center>
    
    预留格式文字
    <!--保留当前文字格式输出-->
    <pre>
    	for(int i =0;i<10;i++)
    		System.out.println("hello world!");
    </pre>
    
    特殊字体
    <del>删除字</del>
    <ins>插入字</ins>
    <b>粗体字</b>
    <i>斜体字</i>
    <!--出现在文字上端-->
    10<sup>2</sup>
    <!--出现在文字下端-->
    10<sub>2</sub>
    
    <!--字体标签-->
    <font color="red", size="50">字体标签</font>
    
    实体符号

    实体符号由&开始,由;结束。实体符用于解决HTML的语法一些标记符号冲突。

    <!--小于号-->
    &lt;
    <!--大于号-->
    &gt;
    <!--空格-->
    &nbsp;
    
    表格

    border边框,width表格(每个单元)宽度,hight表格高度。align对齐方式,放在table整个表格居中,放在tr整个行单元内容居中,放在td单元内容居中。

    <!--表格-->
    <table align="center" border="1px" width="60%" hight="150px">
        <!--便签col可以设置列的属性,一个代表一列-->
        <col width="60px">
        <col width="60px">
    	<!--行-->
    	<tr>
    		<!--单元格th 自带居中加粗-->
    		<th>a</th>
    		<th>b</th>
    		<th>c</th>
    	</tr>
    	<tr align="center">
    		<!--单元格-->
    		<td>a</td>
    		<td>b</td>
    		<td>c</td>
    	</tr>
    	<tr>
    		<td align="center">1</td>
    		<td>2</td>
    		<td>3</td>
    	</tr>
    </table>
    
    <!--单元格合并
    rowspan行合并单元格,row合并删下面单元格,colspen和并,删除没有要求
    -->
    <table align="center" border="1px" width="60%" hight="150px">
    	<!--行-->
    	<tr align="center">
    		<!--单元格-->
    		<td>a</td>
    		<td>b</td>
    		<td rowspan="2">c</td>
    	</tr>
    	<tr>
    		<td align="center">1</td>
    		<td>2</td>
    		<!--<td>3</td>-->
    	</tr>
    </table>
    
    <!--瓜分表格 便于以后js处理(thead,tbody,tfoot)-->
    <!--cellspacing属性表示单元格间隙-->
    <table align="center" border="1px" cellspacing="0" width="60%" hight="150px">
    	<!--行-->
    	<thead>
            <tr align="center">
                <!--单元格-->
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
        <thead>
        <tfoot>
        	<tr>
                <td align="center">1</td>
                <td>2</td>
                <td>3</td>
    		</tr>
    	<tfoot>
    </table>
    
    编码告知
    <!--告知浏览器以utf-8编码方式打开HTML文件,写在头部-->
    <head>
    	<meta charset="utf-8">
    </head>
    
    背景图片
    <!--bgcolor设置背景颜色,backgound设置背景图片。背景图片如果重复可以通过CSS来设计-->
    <body bgcolor="red" background="img/myimg.png">
    </body>
    
    图片
    <!--
    设置图片大小时设置图片宽度,高度自动等比缩放
    title设置图片鼠标悬停信息
    alt设置图片加载失败时显示提示信息
    图片默认是重左到右排列显示的
    如果使用的是%来设计图片的大小,是按窗口比例来设置的
    -->
    <img src="img/myimg.png" width="100px" title="我是图片" alt="图片加载失败"/>
    
    超链接

    通过超链接可以从浏览器向服务器发送请求,浏览器向服务器发送请求(request),服务器响应浏览器(response)

    <!--href设置连接地址,也可以是本地路径-->
    <a href="https://www.baidu.com/">百度</a>
    <a href="img/myimg.png">本地图片</a>
    
    <!--图片连接-->
    <a href="https://www.baidu.com/">
    	<img src="img/baidu.png"/>
    </a>
    
    <!--target属性设置打开窗口
    	_blank:新窗口  _self:当前窗口 _top:顶级窗口 _parent:父窗口
    -->
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    
    列表

    ul标签表示无序列表,li表示列表项

    <!--无序列表-->
    <!--type设置前面的显示标记-->
    <ul>
    	<li>a</li>
    	<li>b</li>
    </ul>
    
    <!--镶嵌无序列表-->
    <ul  type="circle">
    	<li>a
    		<ul>
    			<li>apple</li>
    			<li>app</li>
    		</ul>
    	</li>
    	<li>b
    		<ul>
    			<li>boy</li>
    			<li>bag</li>
    		</ul>
    	</li>
    </ul>
    
    <!--有序列表-->
    <!--type设置前面的显示标记-->
    <ol>
    	<li>a</li>
    	<li>a</li>
    </ol>
    
    表单

    表单提交的数据可以重浏览器上方的地址输入宽看到,提交格式是:

    格式:action?name=value&name=value(键值对格式)

    name和value对于属性值

    如果属性method的值是post将无法在地址框上看到提交的键值对

    并且键值对用&分割,想要提交数据必须有namee属性,没name无法提交信息,因为提交数据以键值对形式提交。

    form表单method属性:

    ​ get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。

    ​ post:采用post方式提交的时候,用户提交的信息不会显示在浏览器地址栏上

    get请求和post请求区别

    1.get请求通常表示获取数据(同时也能发送数据)

    2.post请求通常表示提交数据

    3.get请求发送的数据都写在地址栏上

    4.post请求发送的数据用户不可见

    5.get请求不能提交大量数据,但post可以,建议不要混用(虽然两者都能发送数据)

    <!--
    	表单收集用户信息
    	1.type属性设置类型
    		type="text"为文本框
    			="password"密码输入框
    			="checkbox"复选框
    			="radio"单选按钮
    			="image"图片按钮
    			="submit"提交按钮
    			="reset"重置按钮
    			="button"普通按钮
    			="file"文件选择框
    			="hidden"隐藏框
    			
    		name:给定表单名称,表单命名之后就可以用脚本语言(如VBScript或JavaScript)对它进行控制。
    		method:用于指定表单处理表单数据方法,
    		method的值(get、post,默认get)。
    		action:指定处理表单信息的服务器端应用程序。
    		value:文本框或者按钮显示的文本,指定输入框中初始值;
    -->
    <form name="form1" method="post" action="http://192.168.111.5:8080/form" enctype="text/plain">
    	姓名:<input type="text" name="name"/>
    	分数:<input type="text" size="4" name="result"/>
    	<input type="submit" value="提交"/>
    	<input type="reset" value="成绩重置"/>
    </form>
    
    表单中的复选框和单选框等
    <form>
    	用户名<input type="text" name="username"/>
    	<br>
    	密码<input type="password" name="password"/>
    	<br>
    	<!--同name单选框为同一组-->
    	<input type="radio" name="sex" value="1"/><input type="radio" name="sex" value="0"/><!--同name复选框同一组,checked属性为设置默认选中-->
    	兴趣
    	<input type="checkbox" name="interesting" value="sing">唱歌
    	<input type="checkbox" name="interesting" value="dance"   checked>跳舞
    	<br>
    	<!--同name复选框同一组 ,selected属性为默认选择项-->
    	<!--multiple支持多选,size设置显示条目数量-->
    	下拉框
    	<select name="grade" multiple="multiple" size="2">
    		<option value="1">等级1</option>
    		<option value="2" selected>等级2</option>
    		<option value="3">等级3</option>
    	</select>
    	<br>
    	文本域
    	<textarea row="10" cols="30" name="textarea"></textarea>
    	<input type="submit" value="注册"/>
    	<input type="reset" value="清空"/>
    	
    	<!--file控件,文件上传专用。-->
    	<input type="file"/>
    </form>
    
    表单和超链接
    <!--表单提交方式可以是get,也可以是post-->
    <form></form> 
    <!--超链接提交方式只可以是get-->
    <a></a>
    
    表单隐藏域和文件
    <form action="http://localhost:8080">
    <!--隐藏框的内容,网页页上看不到,但是隐藏框的数据能提交到服务器-->
    	<input type="hidden" name="hidden" value="value"/>
    	用户代码<input type="text" name="usercode"/>
    	<br>
    	<input type="submit" value="提交"/>
    </form>
    

    文件提交

    <form>
    	<!--file控件上传文件-->
    	<input type="file"/>
    </form>
    
    表单中文本框的readonly和disabled

    readonly和disabled都是只读,但是readonly能向服务器提交数据,disabled直接不可用

    <form>
    	用户名:<input type="text" name="username" value="jack" readonly/>
        用户名:<input type="text" name="username" value="jack" disabled/>
    </form>
    
    maxlength属性
    <form>
    	<!--maxlength控制用户输入字符长度-->
    	用户名:<input type="text" name="username" maxlength="3"/>
        
    </form>
    
    id属性

    id能可以更容易定位元素,更方便JavaScript获取元素(节点)。通常我们是通过id来获取元素

    <!--html中每个元素都有id属性,id属性是改节点的唯一标识。id属性不能重复-->
    <form id="myf">
        <input type="text" id="username" name="username"/>
        <input type="password" id="password" name="password"/>
    </form>
    
    DOM树

    html文件可以看成一课树,这课树叫做DOM树,其中HTML便签是根节点,其有head和body两个孩子,便签一层一层地延伸下去。JavaScript主要就是对这课DOM树进行增删改。

    5.div标签和span标签

    div和span是图层,图层能灵活地布局网页。

    div
    <!--默认情况下div独占一行-->
    <div id="mydiv">这是一个div</div>
    
    span
    <!--默认span只占自己使用的空间-->
    <span id="myspan">这是span</span>
    

    6.content属性

    https://blog.csdn.net/u012402190/article/details/70172371

    下一张: CSS样式学习.

    展开全文
  • html标签分类及常用标签

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

    html标签

    html标签HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

    • 标签不会出现在页面中,只有标签中的内容才会显示在页面上 :也就是<html>此处为内容</html>
    • 标签不区分大小写,但是推荐使用小写 :(X)HTML 版本中强制使用小写,这样更加严谨
    • 标签分为闭合标签和空标签 :闭合标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,例如:<html></html><p></p>;空标签是没有内容的标签,在开始标签中自动闭合,例如:<img /><br /><hr />

     

    html标签分类

    html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念。

    块级元素

    块级元素是指本身属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建。

    块级元素的特点:

    • 独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
    • 可以直接控制宽度、高度以及盒子模型的相关css属性
    • 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
    • 在不设置高度的情况下,块级元素的高度是它本身内容的高度

    常用的块级元素

    标签 描述
    div 常用块级容器,也是css layout的主要标签
    h1 大标题
    h2 副标题
    h3 三级标题
    h4 四级标题
    h5 五级标题
    h6 六级标题
    hr 水平分隔线
    menu 菜单列表
    ol 有序列表
    ul 无序列表
    li 列表项
    dl 定义列表
    dt 定义术语
    dd 定义描述
    table 表格
    p 段落
    form 交互表单

    内联元素

    内联元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的搭建。

    内联元素的特点:

      • 和其他内联元素从左到右在一行显示
      • 不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
      • 内联元素的宽高是由本身内容的大小决定(文字、图片等)
      • 内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

    常用的内联元素

    标签 描述
    span 常用内联容器,定义文本内区块
    a 锚点
    b 加粗
    strong 加粗强调
    i 斜体
    em 斜体强调
    s 中划线(不推荐使用)
    strike 中划线
    del 文档中已被删除的文本
    br 强制换行
    u 下划线
    textarea 多行文本输入框
    input 输入框
    select 下拉列表
    label input 元素定义标注(标记)
    img 引入图片
    sub 下标
    sup 上标
    big 大字体文本
    small 小字体文本
     
    展开全文
  • 这时候,我们不仅仅只是放一些字符串,也要放一些html标签,或者是elementUI的组件,这时候可以用到组件来解决 &lt;el-tabs v-model="editableTabsValue2" type="card" closable @tab-...
  • js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结。以下所讲的示例适用于其它标签元素。 主要包括2中方法获取元素内容: 方法一:.innerText time_Interval=...
  • Markdown中如何显示HTML标签

    万次阅读 2019-06-20 20:09:09
    Markdown显示HTML标签以及转义字符 我们在使用Markdown编辑器时,如果遇到HTML标签,则编辑器会将内容转为HTML标记,这就与我们原来的本意像违背了,如果我们只是想显示一些标签的字面内容而不想被转换,这时我们...
  • html标签触发方法,标签绑定事件

    千次阅读 2019-06-27 10:29:55
    html标签触发方法,标签绑定事件 1. js脚本里面通过ID绑定 $('#标签ID').click(function () { }) $(’#标签ID’)就是通过标签ID拿到了标签,下面无论是触发点击事件还是什么,都可以自行操作 2. 在标签上绑定事件...
  • Markdown中使用html标签

    万次阅读 2018-08-28 15:19:48
    有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. &lt;h1&gt;这是一个标题&lt;/h1&gt; //其中的&lt;h1&...
  • vscode怎么自动结束html标签

    万次阅读 2021-02-06 15:07:32
    vscode怎么自动结束html标签 首先Ctrl + shift + x 打开拓展 搜索Auto Close Tag 插件 安装完后应该既可以了。
  • 假设我们要获取下面html标签中的内容: <p>桥边姑娘</p><p>你的芬芳</p><p>我把你放心上</p><p>不想让你流浪</p> <p><span style="white-space: normal;...
  • 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...
  • HTML页面中显示HTML标签代码

    千次阅读 2018-09-11 10:46:44
    HTML页面中显示HTML标签代码,可以使用&lt;xmp&gt;html标签内容&lt;/xmp&gt;,这样,在网页中就会显示html标签,如图:
  • C# mvc 中把带 html标签的字符 当作 html标签 显示到页面
  • vscode补全html标签

    万次阅读 2018-11-14 22:59:00
    vscode补全html标签 文件–首选项–设置 搜索files.associations,点击在settings.json中编辑 点击左边的笔,点击在设置中替换, 加入这句代码即可 "files.associations": { "*.vue":"...
  • 问题: (python)Xpath如何提取html标签HTML标签和内容) 描述: &lt;div&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Row value 1&lt;/td&gt; &lt;td&gt;Row...
  • vue v-html 解析html标签

    千次阅读 2019-01-22 11:09:58
    1、通过控制器传出的值含有、 等标签 2、 只需在显示时 添加v-html标签即可
  • js去掉html标签

    万次阅读 2019-06-03 20:33:00
    在jsp文件中,通过js脚本加正则表达式去掉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;等; *标签中的第一个...
  • jsoup获取meta标签、jsoup获取img标签、jsoup获取a标签、jsoup获取h标签、Java解析HTML标签 主要是对一个网页的meta、a、img等对SEO有有益的标签 主要代码:(熟悉Jsoup的看这块就行了,直接复制除实体对象外即可...
  • php去除html标签

    千次阅读 2018-06-06 21:20:29
    会出现一堆Html标签。然后发现了php的strip_tags() 函数。这个函数会剥去字符串中的 HTML、XML 以及 PHP 的标签。strip_tags(string,allow)其中 string是必填的,allow项选填,可以选择忽略的标签。...
  • JavaScript替换HTML标签

    千次阅读 2014-06-08 23:21:39
    JavaScript替换HTML标签 1、说明  获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2、实现JavaScript代码 function deleteTag() { var regx = /]*>|]*>/gm; var tagStr = $("#...
  • 一)struts2中的HTML标签与用原始的hteml标签哪个更好?有什么区别?为什么要使用上struts2标签? 1)应该根据实际情况的选取,当你的标签中出现了action返回的参数,选用struts的html标签可能好些,否则你的页面会...
  • 经过自定义html标签的使用,此时要是有需求先执行父标签的java代码再把需要的值传递给字标签呢?怎么做?先来看看官方文档 2.24. 绑定变量的HTML标签 对于html标签(参考上一节),Beetl还 支持将标签实现...
  • HTML标签的嵌套

    千次阅读 2016-11-08 11:49:43
    随着时间的推移,我们学习html的基础知识有了大概的了解。而我发现,平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,然而发现有时...通过网上找资料,了解了html标签的嵌套规则
  • HTML标签以及各个标签属性大全

    万次阅读 多人点赞 2016-07-10 11:25:37
    HTML标签以及各个标签属性大全(网页制作必备)   总类(所有HTML文件都有的) -------------------------------------------------------------------------------- 文件类型 (放在档案的开头与结尾) ...
  • 使用正则过滤html标签。 以前写了很多次。但每次都没保存,然后换了家公司后,没有了以前的代码,然后又遇到类似的问题,然后又是网上查啊写啊,自己鼓捣了大半天。 所以,这次,我决定在博客上也写一份,备份,省...
  • 如何原样输出html标签

    千次阅读 2017-11-17 21:00:19
    遇到一个小问题,需要在浏览器中原样输出含html标签的信息 下一秒我想到的是标签, 其实理解错了,pre标签只是保留原有的格式,也就是保留所有空格换行,html标签一样会输出 真正应该使用的标签是标签 浏览器...
  • HTML标签原样显示

    千次阅读 2018-03-23 11:35:05
    如何使HTML标签原样显示出来方法一:将HTML代码嵌入到&lt;script type='text/html' style='display:block'&gt;&lt;/scipt&gt;中 &lt;script type='text/html' style='display:block'&gt; ...
  • 隐藏html标签

    千次阅读 2011-04-06 22:26:00
    隐藏html标签Insert title here

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 200,137
精华内容 80,054
关键字:

html标签