HTML一篇通

目录

HTML全部标签都可使用的属性

HTML事件属性

 基础标签介绍

关于文本的标签:

 ​​​​p - 段落标签

​编辑

 sub -- sup  上下标标签

  del  -  ins  -  u  -  s 标签介绍

 textarea 文本框标签

​编辑

  blockquote 引用标签

​编辑

 abbr 缩写表述标签

 cite 定义作品标题标签

​编辑

 address 存放作者联系人信息标签

 code  存放代码的标签

 pre -- small -- b -- i -- q -- bdo -- bdi -- time -- mark -- span 文本标签

​编辑

 video  -  audio  标签介绍:

 图片相关标签介绍:

 form  表单介绍

ul  --  ol  列表标签介绍

 input 标签介绍:

输入框相关

  多选框

单选框

 文件选择相关

提交按钮相关

时间选择标签

值选择框:

按钮:

颜色选择标签: 

隐藏的标签: 

 其他标签介绍:

br 换行标签

hr 下划线标签

 header - main - footer 页眉-主体-页脚标签介绍

 div 区域标签

 h1  -  h6  标题标签

hgroup

 a  超链接标签

nav 导航条标签

 script  -  noscript 脚本标签

button 按钮标签

 progress  -  meter  进度标签

 fieldset - legend 标签

下拉选项列表相关

 object 文件载入标签 和 param 对载入文件进行设置标签

label 标记标签

datalist 数据列表标签

 figure -- figcaption 标签

字体注音标签

dl - dt - dd 标签

template 隐藏标签介绍

article 标签

section 标签

  表格标签相关


 

 

HTML全部标签都可使用的属性

属性

描述

accesskey

设置访问该元素的键盘快捷键。

语法: <元素标签 accesskey="快捷键字符" >

如:<a href="//www.baidu.com" accesskey="h"> 按住alt+h跳转到百度 </a>

激活方法: IE--Chrome = Alt + 定义的快捷键字符
                 Firefox = Alt + Shift + 定义的快捷键字符

class

规定元素的类名(classname)

语法:<元素标签 class="string">

如:<h1 class="intro">标题 1</h1>

name

给元素取一个名字(name)

语法:<元素标签 name="string">

如:<h1 id="intro">标题 1</h1>

id

给元素设置一个id(id 在 HTML 文档中必须是唯一的。)

语法:<元素标签 name="string">

如:<h1 id="intro">标题 1</h1>

dir

设置元素中内容的文本方向。

语法:<元素标签 dir="ltr | rtl | auto">  ltr (从左向右)  rtl (从右向左)  auto (让浏览器判断)

如:<bdo dir="rtl">文本方向从右到左!</bdo>

hidden

对元素进行隐藏。

语法:<元素标签 hidden>

如:<p hidden>这是一段隐藏的段落。</p>

lang

告诉元素该标签内的内容是什么语言

语法:<元素标签 lang="en">

如:<p lang="en">asd</p>

spellcheck

检测元素是否拼写错误

语法:<元素标签 spellcheck="true|false"> true为开启检查,false为关闭

如:<p spellcheck="true">asb</p>

contenteditable

当属性值为true时,可对该标签的文本进行编辑操作

语法:<元素标签  contenteditable="true|false">

如:<p contenteditable="true">这是一个可编辑段落。</p>

title

规定元素的额外信息(可在工具提示中显示)

语法:<元素标签  title="string">

如:<p title="菜鸟">小菜鸟</p>

style

给该元素设置样式,一个或多个由分号分隔的 CSS 属性和值。 

如:<h1 style="color:blue;text-align:center">这是一个标题</h1>

data-*

用于存储页面的自定义数据

draggable

该属性可以规定该标签是否可以拖动(移动)

语法:<元素标签  draggable="true|false"> true为可移动

如:<p draggable="true">这是一段可移动的段落。</p>

HTML事件属性

事件属性描述

ondblclick

当对该元素进行双击鼠标时运行指定函数
如: <button οndblclick="函数名">复制文本</button>  

onclick

当对该元素进行单击鼠标时运行指定函数
如: <button οnclick="函数名">复制文本</button>

onsubmit

当提交表单时运行指定函数
如: <form action=" " οnsubmit="函数名">

onresize

当调整窗口大小时运行指定函数
如: <body οnresize="函数名">

 基础标签介绍

<!DOCTYPE html>  <!-- 声明标签,告诉浏览器我们的html文件是什么版本的,html是HTML5版本的 -->

<html lang="en"> <!--html标签,表示该文档是html文档-->

<head> <!-- <head> 元素是所有头部元素的容器。-->

    <meta charset="UTF-8">
    <!--meta标签为定义文档的一些内容。该标签不会显示在页面中,通常用于指定网页的描述,关键词,
    文件的最后修改时间,作者及其他元数据。charset="UTF-8" 指定该文档使用的编码-->

    <meta http-equiv="refresh" content="30">    <!--refresh 定义刷新设置,指定每隔30秒刷新一次页面-->

    <meta name="author" content="Hege"> <!--author 定义作者标签,content=规定文档的作者的名字。-->

    <meta name="description" content="Free web tutorials"><!--
    规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。-->

    <meta name="keywords" content="HTML, meta tag, tag reference"><!--
    	规定一个逗号分隔的关键词列表 - (告诉搜索引擎页面是与什么相关的)。
    	总是规定关键词(对于搜索引擎进行页面分类是必要的)。-->

    <title>Title</title>
    <!--<title> 标签定义文档的标题,会显示在工具栏中和收藏夹还有引擎搜索结果中-->

    <base href="http://www.runoob.com/images/" target="_blank">
    <!-- 规定页面上所有链接的默认 URL 和默认的target,该标签只可使用一次,应在head内使用,
     这样在文本中就算链接标签没有设置target他也会给他们自动添加一个target-->


    <link rel="stylesheet" type="text/css" href="theme.css"> <!-- 
      <link> 标签定义文档与外部资源的关系。此元素只能存在于 head 部分;   
      rel="stylesheet" 	要导入的样式表的 URL。  ;
      type="text/css"  这个标签链接的内容的类型  ;  href="theme.css"  url或文件的地址 -->

    <style >
    h1 {color:red;}
    p {color:blue;}
    </style><!--style 样式标签,可在此标签内定义你想要的元素样式-->

</head>

<body>  <!-- body主体标签。对主文的设置都在该标签内 -->

</body>

</html>

关于文本的标签:

 ​​​​p - 段落标签

<p> 段落标签 </p> <!-- 段落标签,标签的前后会自动添加换行 -->


 sub -- sup  上下标标签

<p>这个文本包含 <sub>下标</sub>文本。</p><br>
<!--sub该标签内的内容会变成下标,文本会比普通文本矮半截-->

<p>这个文本包含 <sup>上标</sup> 文本。</p><br>
<!--sup该标签内的内容会变成上标,文本会比普通文本高半截-->


  del  -  ins  -  u  -  s 标签介绍

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <!--<del> 标签定义文档中已删除的文本。
<ins> 标签定义已经被插入文档中的文本。两标签一般搭配出现 -->

<u>text</u><br>   <!--u标签会为其中的内容添加下划线-->

<s>My car is blue.</s><br>  <!--<s> 标签对那些不正确、不准确或者没有用的文本进行中间横线标识。-->


 textarea 文本框标签

<textarea maxlength="50" placeholder="描述信息..." >
</textarea><!--textarea 标签定义一个多行的文本输入控件。
    disabled 禁用该标签  form=""定义该文本标签是哪个表单的
    maxlength="50" 限制文本框能输入的字符个数
    placeholder="描述信息..." 该属性规定一个简短的提示,它描述了文本区域的期望值。
    readonly 规定文本为只读。  required 规定文本区域是必需的/必填的。-->


  blockquote 引用标签

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization.
</blockquote>   <!-- 引用标签,标签内的文本为引用文本,cite为该文本来自哪里,标签内文本会自动缩进处理-->


 abbr 缩写表述标签

<abbr title="World Health Organization">WHO</abbr> was founded in 1948. <!--  标签用来表示一个缩写词或者首字母缩略词,
通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 -->


 cite 定义作品标题标签

<p><cite>呐喊</cite> 创作与 1893.</p>
<!-- <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题 -->


 address 存放作者联系人信息标签

<address> 斜的 </address>     <!-- 该标签定义文档作者/所有者的联系信息。文本是斜体的  -->


 code  存放代码的标签

<code>一段电脑代码 print("Hello World")</code>
<!--code标签内可以存放任何的代码,不会对其进行执行操作,用于显示输入的代码-->


 pre -- small -- b -- i -- q -- bdo -- bdi -- time -- mark -- span 文本标签

<pre>
<!-- 不对 pre 标签内的文本进行任何处理,会保留空格和换行符。而文本也会呈现为等宽字体-->

小型文本:  <small>Copyright 1999-2050 Data.</small>  <!--small标签内的文本会被变小化,相当于小型文本-->

加粗文本:  <b>加粗文本</b>  <!-- 加粗文本标签 -->

斜体文本:  <i>The lightning</i>  <!-- i 标签内容将呈现为斜体状态-->

引号:  <q>Build a .</q> <!--q标签为引用标签,会将标签内的内容用双引号引起来-->

文字显示方向:  <b><bdo dir="rtl">该段落文字从右到左显示。</bdo></b><!-- <bdo>标签用于设置文本的显示方式,dir:rtl(右到左),ltr(左到右)正常的 -->

隔离文本:  <b>这句话叫:<bdi>独立的</bdi></b><!-- <bdi>标签可以让你将特别的信息单独隔离起来,这样就不会和普通的东西合在一起了-->

文本时间:  <b>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</b><!--time标签为文本添加时间-->

背景颜色:  <b>Do not  <mark>milk</mark> today.</b>  <!--mark标签内的文本会被添加背景颜色-->

字体颜色:  <b>我的母亲有 <span style="color:#0033ff;font-weight:bold">蓝色</span> 的眼睛</b><br><!--span标签可以自定义标签内的文本颜色-->

</pre>

 video  -  audio  标签介绍:


<video controls width="320" height="240" src="">
    <!--<video> 标签定义视频,比如电影片段或其他视频流。目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
width=""  设置视频播放器的宽度。;                       height   设置视频播放器的高度。
autoplay 如果出现该属性,则视频在就绪后马上播放。;         controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop  如果出现该属性,则当媒介文件完成播放后再次开始播放。;   muted  如果出现该属性,视频的音频输出为静音。
poster   规定视频正在下载时显示的图像,直到用户点击播放按钮。  src="" 要播放的视频的 URL或地址。
preload="metadata"(	指示当页面加载后仅加载音频/视频的元数据。)
        "auto"(指示一旦页面加载,则开始加载音频/视频。)
        如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。-->
    <track default
           kind="captions"
           srclang="en"
           src="" /> <!-- track标签为视频/音频标签插入字幕文件。格式为 WebVTT 格式(.vtt 格式文件)。
           src="" 	必需的。字幕文件所在地址
           default 当该标签设置这个属性时,当没有为这个视频文件添加字幕的话,就默认使用这个字幕标签
           kind="captions" 在视频中显示字幕,
                "subtitles" 在视频中显示字幕,
           srclang="" 如果 kind 属性的值是 "subtitles",则 srclang 属性是必需的。该字幕文件使用的是什么语言-->
    抱歉,您的浏览器不支持嵌入视频!
</video>


----------------------------------------------------------------


<audio controls>   <!-- 音频标签,该元素支持的3种文件格式:MP3、Wav、Ogg
可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
autoplay	属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。
controls	如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop	    如果出现该属性,则每当音频结束时重新开始播放。
muted	    如果出现该属性,则音频输出为静音。
src		    规定音频文件的 URL或地址。-->
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    <!-- 该标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择,(如果都支持则任选一个)
    src  	规定媒体文件的 URL或地址。
    type	规定媒体资源的类型。video或audio-->
</audio>

 图片相关标签介绍:

<img src="qw.jpg" width="145" height="126" alt="Planets" usemap="#pla" >
<!--该标签定义显示的图片
 src:要显示的照片的路径或url;  width:规定图形的宽度;  height:规定图形的高度;
 alt:当浏览器无法显示指定图片时用户就可以通过该元素来查看alt的内容,alt的内容可以告诉用户该照片是什么
 usemap:使用name为pla的<map>标签, -->


<map name="pla">  <!-- 该标签内可以定义一些规则,让图片绑定这个规则,当图片内被触发了指定规则时就会执行指定操作 -->
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="qq.jpg">
    <!--该标签定义图片内哪些区域是可以点击的
 coords:规定可点击区域的坐标;  href:指定要访问的url或指定的东西
 shape:规定形状,(default)规定全部区域。(rect)定义矩形区域。(circle)定义圆形。(poly)定义多边形区域。
 alt:当浏览器无法显示指定图片时用户就可以通过该元素来查看alt的内容,alt的内容可以告诉用户该照片是什么
 target:要在什么地方打开该网页;  type:打开网页的类型 -->
</map>

------------------------------------------------------------------


<picture><!--picture 元素允许我们在不同的设备上显示不同的图片.
<picture> 元素中要有零或多个 <source> 元素和一个 <img> 元素,
每个 <source> 元素匹配不同的设备并引用不同的图像源,如果没有匹配的,则显示 <img> 元素的的图片。-->
  <source media="(min-width: 100px)" srcset="aa.jpg">
  <source media="(min-width: 465px)" srcset="qw.jpg">
  <img src="qw.jpg">
</picture>

 form  表单介绍

<form action="" accept-charset="ISO-8859-1" enctype="multipart/form-data" method="post" novalidate>
    <!--form 表单标签,action="该表单提交到哪" ; accept-charset="设置表单提交时使用的字符编码"
    enctype=application/x-www-form-urlencoded (在发送前对所有字符进行编码)。
            multipart/form-data (不对字符编码。当使用有文件上传控件的表单时,该值是必需的。)
            text/plain (将空格转换为 "+" 符号,但不编码特殊字符。)
    method="get|post"  指定该表单以什么方式提交数据
    novalidate 如果使用该属性,表单提交时将不对其进行验证
    target=_blank | _self | _parent | _top	规定在何处打开 action URL。-->
</form>

ul  --  ol  列表标签介绍

<ul>  <!--无序列表 -->
  <li>Coffee</li>  <!-- 列表的内容 -->
  <li>Tea</li>
  <li>Milk</li>
</ul>
<ol><!--有序列表 -->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 input 标签介绍:

input 标签除了特别说明的属性外,其它的都可以随便共同使用。

输入框相关


    字符限制和输入框长度设置: <input type="text" name="pin" maxlength="4" size="4"><br>
    <!--定义一个文本标签,maxlength=该标签可接收的最长字符限制,size=该标签的元素长度-->

    禁用该标签: <input type="text" name="lname" disabled ><br>
    <!-- 定义一个文本标签,disabled 禁用这个标签 -->

    只读标签: <input type="text" name="country" value="Norway" readonly><br>
    <!-- 定义一个文本标签,该标签只可读,不可写入-->

    设置提示标签:<input type="text" name="lname" placeholder="Last name"><br>
    <!-- 定义一个文本标签,placeholder=在这个元素内添加提示信息-->

    该标签必须得输入内容:<input type="text" name="usrname" required><br>
    <!-- 定义一个文本标签,该标签必须得输入内容-->
    <hr>

    搜索输入框<input type="search" name="googlesearch">
    <!--定义搜索输入框,可以让用户输入内容,获取这个元素内容对其进行搜索操作-->
    <hr>


    电话号码输入框<input type="tel" name="usrtel">
    <!--定义用于输入电话号码的字段,该标签会显示用户自己输入过的电话值-->
    <hr>

    邮件输入框:<input type="email" name="usremail"><br>
    <!--定义一个邮件地址标签,(当提交表单时会自动对 email 字段的值进行验证)-->
    <hr>

    密码输入<input type="password" name="pwd">
    <!--定义密码字段(密码字段中的字符会被遮蔽)-->
    <hr>

    方便选择框<input list="browsers">
    <datalist id="browsers">
     <option value="Internet Explorer">
     <option value="Firefox">
    </datalist>
    <!--输入标签,该标签绑定一个列表元素,从而让用户方便输入-->
    <hr>


  多选框

    checkbox--value--checked:<br>

    <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
    <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
    <input type="checkbox" name="vehicle[]" value="Boat" checked > 我有一艘船<br>
    <!--定义多选框标签,name=这个元素的名字。value=这个元素的值。
checked 自动选择这个元素(这个属性只适合这个类型和radio类型的元素)-->
    <hr>


单选框

    radio:<br>

    <input type="radio" value="male"> Male<br>
    <input type="radio" value="女"> 女 <br>
    <!--允许用户在一定数量的选择中选取一个选项-->
    <hr>


 文件选择相关

    file--accept: <br>
    <input type="file" accept="image/*"><br>
    <!-- 选择文件标签,accept=可接受的文件类型,audio/* 接受所有的声音文件。video/* 接受所有的视频文件。 image/*	接受所有的图像文件。-->

    选择多个文件: <br>
    <input type="file" multiple>
    <!--该标签可选择一个或多个文件-->
    <hr>


提交按钮相关

    submit--formaction:<br>
    <input type="submit" formaction="demo-admin.php" value="提交">
    <input type="submit">
    <!--定义一个提交按钮,点击该按钮就会将表单内容提交到指定的路由中,formaction="指定该按钮会将值传递到何处"
    默认为from内指定的,formaction属性只适合image和submit-->

    <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
    <!--定义一个提交按钮,formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。使得不对提交的数据进行验证-->
    <hr>
    reset<br>
    <input type="reset" value="重置">
    <!--从重按钮,点击的话就会重置表单内容-->
    <hr>

    image--src--alt--width--height:<br>
    <input type="image" src="qq.jpg" alt="Submit" width="48" height="48">
    <!-- 定义图像作为提交按钮 ,src=图形的地址 , alt=无法查看图像时提供了替代文本。 和设置图片的款和高。这三个属性只针对 type=image -->
    <hr>


时间选择标签


    年月选择框:<input type="month" name="bdaymonth"><br>
    <!--定义一个选择年月的标签-->

    年月日选择框:<input type="date" ><br>
    <!--定义一个选择年月日的标签-->

    年月日和具体时间选择框:<input type="datetime-local" name="bdaytime"><br>
    <!--定义一个选择年月日和具体时间的标签-->


    时间选择框:<input type="time" name="usr_time">
    <!--定义一个选择时间的标签-->
    <hr>


值选择框:

    范围内移动取值:<input type="range" name="points" min="1" max="10">
    <!--定义拉动条获取值字段,可以设置其的大小值-->
    <hr>


    上下取值:<input type="number" name="quantity" min="1" max="10" step="2">
    <!-- 定义数值标签,并限制他的最大最小区间 ,每次选择跨越的步长是两步-->
    <hr>


按钮:

    按钮控件:<input type="button" value="点我" onclick="msg()"><br>
    <!--定义一个按钮标签,该按钮的名字是点我-->
    <hr>


颜色选择标签: 

    颜色选择器:<input type="color" name="favcolor" form="form_id"><br>
    <!--定义一个颜色选择器,form=这个元素是哪个表单的元素-->
    <hr>


隐藏的标签: 

    隐藏的标签:<input type="hidden" name="country" value="Norway"><br>
    <!--定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由 JavaScript 改变它们的值-->
    <hr>

 其他标签介绍:

br 换行标签

<br>  <!-- 换行标签,只要一遇到这个标签就会自动换行一次 -->

hr 下划线标签

<hr><!-- 下划线标签-->

 


 header - main - footer 页眉-主体-页脚标签介绍


<header>
<!--<header> 标签定义文档一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中,您可以定义多个 <header> 元素。-->
</header>

<main>
该html的主体内容。<!--<main> 元素是唯一的,所以不能出现一个以上的 <main> 元素。-->
</main>

<footer>
    <!--<footer> 标签定义文档一部分区域的页脚。在典型情况下,该元素会包含文档创作者的姓名、
文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,可以定义多个 <footer> 元素。-->
</footer>

 


 div 区域标签

<div>  <!--<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。-->
  <h6>这是一个在 div 元素中的标题。</h6>
  <p>这是一个在 div 元素中的文本。</p>
</div>

 


 h1  -  h6  标题标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!-- 六个不同大小的标题标签-->

hgroup

<hgroup>
<!--<hgroup> 标签被用来对标题(h1-h6)元素进行分组。-->
</hgroup>

 


 a  超链接标签

<a href="aa.jpg" download="/images/logo.png">点击下载<br>  <!-- 超链接标签-定义下载属性,当点击该链接时就会下载指定照片-->

<a href="http://www.runoob.com" target="_top" type="text/html" >访问菜鸟教程!</a><br>  <!--
    <a>超链接标签-href是必要的属性,当点击该标签时会跳转到指定的url中
    target=规定在何处打开这个标签的 URL。仅在 href 属性存在时使用。
           _blank:在新页面中打开链接;   _parent:在当前页面中打开链接。
           _self:默认,在当前页面中打开链接;  _top:在当前页面打开链接,并替换当前的整个框架页。
     type="" 规定打开的页面是什么类型的-->

 


nav 导航条标签

<nav>
    <!--<nav> 标签定义导航链接的部分。并不是所有的 HTML 文档都要使用到 <nav> 元素。
    <nav> 元素只是作为标注一个导航链接的区域。-->
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>


 script  -  noscript 脚本标签

<!--<script> 标签用于定义客户端脚本,比如 JavaScript。
<script> 元素既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。如果使用 "src" 属性,则 <script> 元素必须是空的。
async 属性一旦脚本可用,则会异步立即执行。;  defer 属性规定当页面已完成加载后,才会执行脚本。
src="ss.js"  脚本的位置  ; type="text/javascript" 脚本的类型-->
<script src="ss.js" charset="UTF-8"></script>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript><!--
noscript 元素用来定义在脚本未被执行时的替代内容(文本)。-->

button 按钮标签

<button type="button">点我!</button> <!-- 在 <button> 标签内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。
按钮的属性:
    disabled  规定应该禁用该按钮。
    form="表单的id值"  规定按钮属于哪个表单。
    formaction="url或地址"  规定将表单数据发送到的地址。
    formenctype=application/x-www-form-urlencoded (在发送前对所有字符进行编码(默认)。) | multipart/form-data (不对字符编码。当使用有文件上传控件的表单时,该值是必需的。) | text/plain (将空格转换为 "+" 符号,但不编码特殊字符。)
    value="" 规定按钮的初始值。可由脚本进行修改
    type="submit"	该按钮是提交按钮 | "button"	该按钮是可点击的按钮 | "reset"	该按钮是重置按钮。
    name="" 规定按钮的名称。-->

 


 progress  -  meter  进度标签

<progress value="22" max="100"></progress><!--<progress> 标签定义运行中的任务进度(进程)。
请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。
value="22"  当前值。     max="100"  规定需要完成的值。-->

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6" >60%</meter>
<!--展示给定的数据范围:value="要显示在哪个点上"-->

 

 


 fieldset - legend 标签

<form>
  <fieldset><!-- 将这个标签内的内容用矩形括起来 -->
    <legend>Personalia:</legend>  <!--<legend> 元素为 <fieldset>元素定义标题。-->
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>


下拉选项列表相关

<select><!--<select> 元素用来创建有两个选项的下拉列表。
    disabled 禁用该标签  form=""定义该文本标签是哪个表单的
    multiple 可选择多个选项。  required  规定用户在提交表单前必须选择一个下拉列表中的选项。
    size="2" 属性规定下拉列表中可见选项的数目。-->

  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
      <!-- <option> 标签定义下拉列表中的一个选项(一个条目)。
    disabled 禁用该标签  value="" 定义送往服务器的选项值。-->
    <option value="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">  <!-- <optgroup> 标签把相关的选项组合在一起 label=""为选项组规定描述。-->
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
    
</select>


 object 文件载入标签 和 param 对载入文件进行设置标签

<object data="horse.wav">  <!--可将指定文件载入到该html文档中,data=""要载入的文档的位置
         form=规定对象所属的一个或多个表单 ; width  height  name  type -->
  <param name="autoplay" value="true"><!--设置name="autoplay" 为 value="true",音频载入后会自动播放-->
</object>

label 标记标签

<form action="">
  <label for="male">Male</label>  <!-- 文本标签,给input标签当标记用的 for 规定 label 与哪个元素绑定。
  | form 规定 label 字段所属的一个或多个表单。-->
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>


datalist 数据列表标签

<datalist id="aa">
  <option value="Internet Explorer">
  <option value="Firefox">
</datalist>
<!-- 数据列表标签,该标签内可以添加一些可选项,然后让其他元素可以通过id调用他,来获取列表内容 -->

 


 figure -- figcaption 标签

<figure>  <!--<figure> 标签规定独立的内容(图像、图表、照片、代码等等)。内容应该与主内容相关。-->
  <img src="qq.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    <!-- <figcaption> 标签为 <figure> 元素定义标题。-->
</figure>


字体注音标签

<ruby><!--<ruby> 标签定义 ruby 注释(中文注音或字符)。-->
  漢 <rp>(</rp><rt>han</rt><rp>)</rp><!--<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。-->
  字 <rp>(</rp><rt>zi</rt><rp>)</rp><!--<rt> 标签定义字符(中文注音或字符)的解释或发音。-->
</ruby>


dl - dt - dd 标签

<dl><!--<dl> 标签定义一个描述列表。-->
  <dt>Coffee</dt>  <!-- <dt> (定义项目/名字)-->
    <dd>Black hot drink</dd>  <!--<dd> (描述每一个项目/名字)-->
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

 


template 隐藏标签介绍

<template><!-- <template> 标签定义在页面加载时隐藏的一些内容,该标签中的内容可以稍后使用 JavaScript 呈现。-->
    <h2>logo</h2>
</template>

article 标签

<article> </article>  <!--  该标签定义独立的内容。 -->

section 标签

<section><!--<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。-->
  <h1>WWF</h1>
  <p>介绍上面缩写词的意思</p>
</section>

 

  表格标签相关

<table >
  <caption>表格标题</caption><!-- <caption> 标签必须直接放置到 <table> 标签之后。作用是:定义表格的标题。只能对每个表格定义一个标题。-->

  <tr>  <!--tr表格中的行标签,行标签内的内容代表这一行的内容,下一个行标签代表下一行的内容-->
    <th>Month</th>
<!--每一个th标签代表为这一行中的一个单元格。<th> 元素中的文本通常呈现为粗体并且居中。-->
    <th>Savings</th>
  </tr>

  <tr>
    <td>January</td>
<!--每一个td标签代表为这一行中的一个单元格.<td> 元素中的文本通常是普通的左对齐文本。-->
    <td>$100</td>
  </tr>

</table>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值