HTML标签

HTML是一种超文本标记语言
head:头部 meta title script style 可以提高网页代码的优先级

标签分类：

行级元素（标签）：没有高和宽，它高度是由内容填充，跟其他内容同占一行；
块级元素（标签）：有高和宽，独占一行；
编码：utf-8
多国语言，不区分大小写；gb2312 中文简体；

 路径：
1.  
相对地址:从自身出发；
2.  
绝对地址:从盘符出发

锚点：
<!--链接锚点 -->
<a href="#part_one">跳转到 part_one</a>

<!--跳转的地方 -->
<a name="part_one "></a>

超链接 <a></a>

 <a href="mailto:1111111@qq.com?Subject=Hello%20again" target="_top">

第一个参数以“?”开头，后面的参数每一个都以“&”分隔。

<a href="images/Chrysanthemum.jpg">图片</a>

<a href="http://www.baidu.com">百度</a>

空链接在当前页面做链接  <a href=”#”>链接的内容</a>

<a href="#">文件</a>

<a href="index.html">百度</a>

<a href=”javascript:window.close()”>关闭</a>

<a href="javascript:alert('a')">弹出</a>

target参数：_blank   _parent    _self    _top

在 HTML5 中，<a> 标签是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。

网页title

1. 页面标题  <title><tilte/>

2. 标签提示信息 <p  title="HTML5教程">HTML5</p>

分割线<hr>

<hr size=”” width=””  align=””color=””/>

<hr  width="50%|300px"  宽，就是线的长度  size="20px"  高度 align="left|center|right" 对齐方式 左|中|右/>

注释

注释<!-- --><!--//-->  两个正斜杠（//）是 JavaScript 注释符号。这确保了 JavaScript 不会执行 注释内的 内容。

首字母缩略词<abbr>

<abbr  title="World Health Organization">WHO</abbr>

加粗<b>  ||  <strong>

<b></b>  <strong></strong>

被强调的文本应该用 <em> 标签表示，重要的文本应该用 <strong>
标签表示，被标记的或者高亮显示的文本应该用 <mark> 标签表示。

块引用 <blockquote>

<blockquote></blockquote>浏览器通常会对 <blockquote></blockquote> 元素进行缩进。

删除<del>   

<del></del>定义文档中已删除的文本。<ins></ins>插入文档中的文本

<del></del>和 <ins></ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

斜体<i>  ||  <em>

<i></i>  <em></em> 在没有其他适当语义的元素可以使用时，请使用 <i> 元素

突出显示文本<mark> </mark>

<pre></pre>保留格式

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

上标 下标<sub>下标<sup>上标

时间<time>

<p>我在 <time datetime="2016-02-14">情人节</time>有个约会。</p>

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

换行符<wbr>

无序列表 <ul>

<ul>

   <li></li>

</ul>

有序列表 <ol>

start=“数值”  //表示从第几个数值开始统计

type=“a”  “circle”   //表示以字母排序disc  square  1  a  A

value=“数值”  //强行设置某个项目的编号

有格式列表<dl>

<dl>

   <dt>

      <dd></dd>

   </dt>

<dl>

          type="circle" 空心圆

          type="square" 实心方框

          type="disc" 实心圆

          type="1 a A I i" 列表序号

          start="2"  开始位置

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

常用的符号有

 ；一个空格，代表一个字符，一个汉字占两个字符

©；版权

<  <

>>

¥  ¥

<link>

标签定义文档与外部资源的关系

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

元数据 <meta>

<meta name=”author” content=”作者” />

 网站的作者

<meta name="keywords" content="HTML, CSS, XML, XHTML,JavaScript">

实例 2 - 定义web页面描述：

<meta name="description" content="Free Web tutorialson HTML and CSS">

实例 3 - 定义页面作者：

<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：

<meta http-equiv="refresh" content="30">

<meta http-equiv=”refresh” content=”8;http://www.baidu.com”/>  等待8秒自动跳转到百度页面

http-equiv :模拟的是http文件头信息，当内容从服务器端发送客户端，告诉浏览器如何正确显示信息

<meta http-equiv=”content-type”content=”text/html;charset=UTF-8”/>多国语言

 <meta http-equiv=”content-type”content=”text/html;charset=gbk” />国标码

 <meta http-equiv=”content-type” content=”text/html;charset=gb2312”/>简体中文

文档主题部分<section>
定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section包含了一组内容及其标题

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is....</p>

</section>

独立成章的文档<article>

里面也可里包含header footer nav section

<article>

  <h1>Internet Explorer 9</h1>

  <p>Windows Internet Explorer 9(缩写为IE9 )在2011年3月14日21:00 发布。</p>

</article>

导航<nav>

侧边栏<aside>

也可以放nav  footer

<aside>

  <h4>Epcot Center</h4>

  <p>The Epcot Center is a theme park in Disney World,Florida.</p>

</aside>

文档的头部区域<header>

 在页面中你可以使用多个<header> 元素

<article>

  <header>

    <h1>Internet Explorer 9</h1>

    <p><time pubdatedatetime="2011-03-15"></time></p>

  </header>

  <p>Windows Internet Explorer 9(缩写为IE9 )是在2011年3月14日21:00发布的</p>

</article>

文档的底部区域<footer>

  文档中你可以使用多个 <footer>元素

<footer>

  <p>Posted by: Hege Refsnes</p>

  <p><time pubdatedatetime="2012-03-01"></time></p>

</footer>

<hgroup> 标题组合

地址<address></address>   

<figure>

元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

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

<figure>

<figcaption>这是一张图片</figcaption>  //描述信息

  <img src="" widthheight  border  align=”center |left |right |top| middle  |bottom” hspace vspace >  

</figure>

hspace与文本的水平间距vspace 与文本的垂直间距

音频<audio>

定义声音 支持的3种文件格式：MP3、Wav、Ogg

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

下面的例子使用了两个不同的音频格式。HTML5<audio> 元素会尝试以mp3 或ogg 来播放音频。如果失败，代码将回退尝试<embed> 元素。

 最好的 HTML解决方法

<audio controls autoplay loop muted preload=”none |auto | metadata>
  <source src="horse.mp3"  type="audio/mpeg">

  <source src="horse.ogg"  type="audio/ogg">

  <embed height="50" width="100"src="horse.mp3">

您的浏览器不支持 audio 元素。

</audio>

第二种方法：雅虎媒体播放器 -一个简单的添加音频到你网站上的方式

把这段 JavaScript 插入网页底部<script src="http://mediaplayer.yahoo.com/latest"></script>

然后
<audio controls autoplay loop muted  preload=”none |auto | metadata src=”.......” >

</audio>

第三种方法：使用超链接

<a href="song1.mp3">Play Song 1</a>

音乐(背景音乐)

          <bgsound src="" loop="-1"/>

          loop="-1" 自动重复播放

视频<video>

视频支持三种视频格式：MP4、WebM、Ogg

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

preload=”none“    //为打开前什么都不加载包括第一帧

preload=”auto“    //未打开视频也提前加载

preload=”metadata“ //未打开时只加载第一帧

 最好的 HTML解决方法

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  <source src="movie.webm" type="video/webm">

  <object data="movie.mp4" width="320"height="240">

    <embed src="movie.swf" width="320"height="240">

  </object>

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

</video>

第二种方法：优酷解决方案 上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"width="480" height="400"type="application/x-shockwave-flash"> </embed>

第三种方法：使用超链接

<a href="intro.swf">Play a video file</a>

<object>
标签用于包含对象，比如图像、音频、视频、Javaapplets、ActiveX、PDF以及 Flash。

属性	值	描述
align	top bottom middle left right	HTML5 不支持。HTML 4.01 已废弃。 规定 <object> 元素相对于周围元素的对齐方式。
archive	URL	HTML5 不支持。由空格分隔的指向档案文件的 URL 列表。这些档案文件包含了与对象相关的资源。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定 <object> 周围的边框宽度。
classid	class_ID	HTML5 不支持。定义嵌入 Windows Registry 中或某个 URL 中的类的 ID 值，此属性可用来指定浏览器中包含的对象的位置，通常是一个 Java 类。
codebase	URL	HTML5 不支持。定义在何处可找到对象所需的代码，提供一个基准 URL。
codetype	MIME_type	HTML5 不支持。通过 classid 属性所引用的代码的 MIME 类型。
data	URL	规定对象使用的资源的 URL。
declare	declare	HTML5 不支持。定义该对象仅可被声明，但不能被创建或例示，直到该对象得到应用为止。
formNew	form_id	规定对象所属的一个或多个表单。
height	pixels	规定对象的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定对象左侧和右侧的空白。
name	name	为对象规定名称。
standby	text	HTML5 不支持。定义当对象正在加载时所显示的文本。
type	MIME_type	规定 data 属性中规定的数据的 MIME 类型。
usemap	#mapname	规定与对象一同使用的客户端图像映射的名称。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定对象的顶部和底部的空白。
width	pixels	规定对象的宽度。

1）

<object data="planets.gif" width="145" height="126"usemap="#planetmap"></object>

<map name="planetmap">

<area  shape="rect"  coords="0,0,82,126"alt="Sun" href="sun.htm">

<area shape="circle"coords="90,58,3" alt="Mercury"href="mercur.htm">

<area shape="circle"coords="124,58,8" alt="Venus"href="venus.htm">

</map>

2）
<object width="400" height="50" data="bookmark.swf"></object>

3）包含HTML文件

<object width="100%" height="500px" data="snippet.html"></object>

4）插入一张图片

<object data="audi.jpeg"></object>

视频<embed>

用来嵌入外部应用或者互动程序（插件）

<embed width="400" height="50" src="bookmark.swf">

可用于包含 HTML
文件

<embed width="100%" height="500px"src="snippet.html">

<track>字幕文件
这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。

属性	值	描述
defaultNew	default	规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
kindNew	captions chapters descriptions metadata subtitles	规定文本轨道的文本类型。
labelNew	text	规定文本轨道的标签和标题。
srcNew	URL	必需的。规定轨道文件的 URL。
srclangNew	language_code	规定轨道文本数据的语言。如果 kind 属性值是 "subtitles"，则该属性是必需的。

<video width="320" height="240" controls>

<source src="forrest_gump.mp4"  type="video/mp4">

<source src="forrest_gump.ogg"  type="video/ogg">

<track src="subtitles_en.vtt"  kind="subtitles"  srclang="en"

label="English">

<track src="subtitles_no.vtt"  kind="subtitles"  srclang="no"

label="Norwegian">

</video>

方法：

load()
方法重新加载音频/视频（audio/video）元素

<button onclick="changeSource()" type="button">更改视频来源</button>

<videoid="video1" controls="controls" autoplay="autoplay">

  <source  id="mp4_src"src="mov_bbb.mp4" type="video/mp4">

  <source  id="ogg_src"src="mov_bbb.ogg" type="video/ogg">

  您的浏览器不支持 HTML5 video  标签。

</video>

<script>

function changeSource(){

 document.getElementById("mp4_src").src="movie.mp4";

  document.getElementById("ogg_src").src="movie.ogg";

 document.getElementById("video1").load();   }

</script>

play()
方法开始播放当前的音频或视频

function playVid(){

  myVideo.play();    /*播放视频*/ 

}

function pauseVid(){

myVideo.pause(); /*暂停视频*/

}

属性：

autoplay属性启用自动播放，并重载视频

function enableAutoplay(){

  myVid.autoplay=true;

  myVid.load();

}

function disableAutoplay(){

  myVid.autoplay=false;

  myVid.load();

}

function checkAutoplay(){

  alert(myVid.autoplay);

}

buffered 属性

返回 TimeRanges对象。

TimeRanges
对象表示用户的音频/视频缓冲范围。

缓冲范围指的是已缓冲音频/视频的时间范围。如果用户在音频/视频中跳跃播放，会得到多个缓冲范围。

function getFirstBuffRange(){

  alert("Start: " + myVid.buffered.start(0) + " End: "  +myVid.buffered.end(0));

}

controls 音频/视频控件

function enableControls(){

  myVid.controls=true;

  myVid.load();

}

function disableControls(){

  myVid.controls=false;

  myVid.load();

}

function checkControls(){

  alert(myVid.controls);

}

41.
currentSrc 属性

返回当前音频/视频的 URL。

如果未设置音频/视频，则返回空字符串。

function getVid(){

  alert(myVid.currentSrc);

}

currentTime
属性

设置或返回音频/视频播放的当前位置（以秒计）。

当设置该属性时，播放会跳跃到指定的位置。

function getCurTime(){

  alert(myVid.currentTime);

}

function setCurTime(){

  myVid.currentTime=5;

}

ended 属性

返回音频/视频的播放是否已结束。

如果播放位置位于音频/视频的结尾时，则音频/视频已结束。

function hasVidEnded(){

 alert(myVid.ended);

}

loop 属性

设置或返回音频/视频是否应该在结束时重新播放。

function enableLoop(){

  myVid.loop=true;

  myVid.load();

}

function disableLoop(){

  myVid.loop=false;

  myVid.load();

}

function checkLoop(){

 alert(myVid.loop)；

}

表单：

  <form action="js.php" method="get|post"></form>

          action=""  要提到的页面（处理页面）

          method="get|post" 提交方式

          disabled="disabled" 禁用

          readonly="readonly" 只读

             get:明文传输,适合小量数据传输

             post:密文传输,适合大数据传输

          enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

          enctype="multipart/form-data"  不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。 传值方式改为post

注意：不写action和method这两个属性。系统默认这两个属性值为#和get

a).单行文本域

          <input type="text" name="user" id="user" maxlength="5"/>

            type="text" 类型为文本框

            name="user" 作为传输过程中的变量名存在。在表单中name不能重复。

            maxlength="5" 限制文本框中只能输入5个字符

 b).密码框

           <input type="password" name="pwd" id="pwd"/>

 c).下拉菜单

           <select>

              <option value="1990" selected="selected">1990年</option>

           </select>

           selected="selected" 被选中状态

d).单选按钮（name值必须相同否则不能实现单选）checked="checked"被选中状态

           <input type="radio" name="sex" value="男" />

           <input type="radio" name="sex" value="女" />

        e).多选按钮checked="checked"被选中状态

           <input type="checkbox" name="lick" id="lick"  value="读书"/>

        f).多行文本域

           <textarea cols="100" rows="10"></textarea>

              cols="100" 横向可以输入100个左右字符

              rows="10"  纵向可以书写10行

        g).文件域

           <input type="file" id="file" name="file"/>

        h).普通按钮

           <input type="button" id="btn" value="确定"/>

           <button >确定</button>

        i).提交按钮(具备提交功能的按钮)

           <input type="submit" id="btn" value="提交"/>

        j).重置按钮

           <input type="reset" id="btn" value="清空"/>

        k).图像域(功能是提交)

           <input type="image" src="" />

        l).隐藏域

            <input type="hidden" name="" value="" />

1.placeholder="请输入账号"  提示

         2.autofocus   获取鼠标焦点

         3.required="required"     必填项，如果不填写内容，直接会有提示

         4.form表单的结束标签写在开始后边，先给form标签id="form1",所有内容提交要加form="form1"

         5.datetime-local 时间控件

         6.tel  电话

         7.url  网址（主页和微博）

         8.search 搜索

         9.email 邮件

         10.range  范围  最大值max 最小值min

         11.color  颜色

date 年月日

        time 时分

        datetime-local 年月日 时分

        week 一年的第几周

        month 某年某月

        number 数字

        color 颜色

        range 范围

        tel   电话

        url   路径

        search 搜索

        email 邮件 @ .

        pattern="^\d{5,11}@qq.com$" 正则表达式验证

邮件表单

<form action="MAILTO:someone@example.com"method="post" enctype="text/plain">

<keygen>

规定用于表单的密钥对生成器字段钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书

<formaction="demo_keygen.php" method="get">

  用户名:<input type="text" name="usr_name">

  加密:<keygen name="security">

  <input type="submit">

</form>

属性	值	描述
autofocusNew	autofocus	使 <keygen> 字段在页面加载时获得焦点。
challengeNew	challenge	如果使用，则将 keygen 的值设置为在提交时询问。
disabledNew	disabled	禁用 <keygen> 元素字段。
formNew	form_id	定义该 <keygen> 字段所属的一个或多个表单。
keytypeNew	rsa dsa ec	定义密钥的安全算法。
nameNew	name	定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。

<output>

作为计算结果输出显示(比如执行脚本的输出)

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a"value="50">100
+<input type="number" id="b"value="50">
=<output name="x" for="a b"></output>
</form>
autocomplete属性

规定 form 或 input 域应该拥有自动完成功能

提示:autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意:autocomplete 适用于 <form> 标签，以及以下类型的<input> 标签：text,search, url, telephone, email, password, datepickers, range 以及color。

<formaction="demo-form.php" novalidate></form>

autofocus属性

自动地获得焦点

<input type="text" name="fname" autofocus>

formaction 属性

用于描述表单提交的URL地址 formaction 属性会覆盖<form> 元素中的action属性formaction属性用于 type="submit" 和 type="image"



<formaction="demo-form.php">

 First name: <input type="text"name="fname"><br>

  Last name: <input type="text"name="lname"><br>

  <input type="submit" formaction="demo-admin.php"

  value="提交">

</form>

formenctype 属性

描述了表单提交到服务器的数据编码 (只对form表单中method="post" 表单)

formenctype 属性覆盖form 元素的 enctype 属性。

主要: 该属性与type="submit" 和type="image" 配合使用

<form action="demo-post_enctype.php" method="post">

  Firstname: <input type="text" name="fname"><br>

  <inputtype="submit"formenctype="multipart/form-data"

  value="以 Multipart/form-data 提交">

</form>

formmethod 属性

定义了表单提交的方式。

formmethod 属性覆盖了<form> 元素的的method 属性。

注意: 该属性可以与 type="submit" 和type="image" 配合使用。

<form action="demo-form.php" method="post">

  First name: <input type="text"name="fname"><br>

  Last name: <input type="text"name="lname"><br>

  <input type="submit"formmethod="post" formaction="demo-post.php"

  value="使用 POST 提交">

</form>

novalidate 属性

是一个boolean 属性.

novalidate属性描述了<input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖<form> 元素的novalidate属性.

注意:formnovalidate 属性与type="submit一起使用

<formaction="demo-form.php">

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

  <input type="submit" formnovalidatevalue="不验证提交">

</form>

formtarget 属性

指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖<form>元素的target属性.

注意:formtarget 属性与type="submit" 和type="image"配合使用.

<formaction="demo-form.php">

  First name: <input type="text"name="fname"><br>

  Last name: <input type="text"name="lname"><br>

  <input type="submit" formtarget="_blank"

  value="提交到一个新的页面上">

</form>

height 和width 属性

规定用于 image 类型的<input> 标签的图像高度和宽度。

注意: height 和width 属性只适用于 image 类型的<input>标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

<input type="image" src="img_submit.gif"alt="Submit" width="48"height="48">

list 属性

规定输入域的 datalist。datalist是输入域的选项列表，里边的选项是预先定义好的，将作为用户的输入数据。

<input list="browsers">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<datalist>给文本框提供建议值

规定输入域的选项列表。

<datalist> 属性规定form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

<datalist  id=”对应from“>     

   <option  value="苹果">苹果</option>

<option  value="桔子">桔子</option>

<option  value="香蕉"  label="香蕉">

<option  value="梨子">

</datalist>

min、max和step 属性

用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max和step 属性适用于以下类型的 <input> 标签：datepickers、number 以及 range。

Enter a date before1980-01-01:

<input type="date" name="bday"max="1979-12-31">

Enter a date after 2000-01-01:

<input type="date" name="bday"min="2000-01-02">

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1"max="5">

multiple 属性

是一个boolean 属性.

multiple 属性规定<input>元素中可选择多个值。

注意:multiple 属性适用于以下类型的 <input> 标签：email和file。: email, and file.

Selectimages: <input type="file" name="img" multiple>

pattern 属性

描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text,search, url, tel, email, 和 password.

提示： 是用来全局title 属性描述了模式.

提示： 您可以在我们的
JavaScript 教程中学习到有关正则表达式的内容

Countrycode: <input type="text" name="country_code"pattern="[A-Za-z]{3}" title="Three letter country code">

60.

placeholder 属性

提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意:placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及password。

<input type="text" name="fname"placeholder="First name">

required 属性

是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url,telephone, email, password, date pickers, number, checkbox, radio 以及 file

Username: <input type="text"name="usrname" required>

tep 属性

为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime,datetime-local, month, time 和 week.

<input type="number"name="points" step="3">

name：给表单定义名称 radio和checkbox的name属性必须一样

value ：表单初始值 为文本输入框设置默认值  自己手动填入的内容也叫value值

每个input表单都有size属性 表单的长度

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

method=”get”  //提交的方式明文传输 小数据
method=”post“ //提交的方式密文传输  大数据传输

还必须设置enctype="multipart/form-data"表示对字符进行编码使用文件表单时必须设置这个值

autocomplete=”off“  //不记住输入记录  不设置默认开启  也可以单独给input设置不提示

<input>声明允许用户输入数据的 input 控件
 隐藏域

<input type=”hidden” name=”id1”/>
文件域

<inputtype=”file” />

提示: 你可以使用 <label> 元素来定义 <input> 元素的标注

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocompleteNew	on off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocusNew	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
formNew	form_id	form 属性规定 <input> 元素所属的一个或多个表单。
formactionNew	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
formenctypeNew	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
formmethodNew	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
formnovalidateNew	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtargetNew	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
heightNew	pixels	规定 <input>元素的高度。(只针对type="image")
listNew	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
maxNew	number date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
minNew	number date	属性规定 <input>元素的最小值。
multipleNew	multiple	属性规定允许用户输入到 <input> 元素的多个值。
name	text	name 属性规定 <input> 元素的名称。
patternNew	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式。
placeholderNew	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
readonly	readonly	readonly 属性规定输入字段是只读的。
requiredNew	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
stepNew	number	step 属性规定 <input> 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 <input> 元素的类型。
value	text	指定 <input> 元素 value 的值。
widthNew	pixels	width 属性规定 <input> 元素的宽度。 (只针对type="image")

 textarea >

标签定义一个多行的文本输入控件

属性	值	描述
autofocusNew	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的列数。
disabled	disabled	规定禁用文本区域。
formNew	form_id	定义文本区域所属的一个或多个表单。
maxlengthNew	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholderNew	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
requiredNew	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrapNew	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

<button>

标签定义一个按钮

在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。如果在 HTML 表单中使用 <button> 元素，请使用 <input> 在 HTML 表单中创建按钮

属性	值	描述
autofocusNew	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。
formNew	form_id	规定按钮属于一个或多个表单。
formactionNew	URL	规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctypeNew	application/x-www-form-urlencoded multipart/form-data text/plain	规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethodNew	get post	规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidateNew	formnovalidate	如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtargetNew	_blank _self _parent _top framename	规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
name	name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

<select>下拉列表

属性	值	描述
autofocusNew	autofocus	规定在页面加载时下拉列表自动获得焦点。
disabled	disabled	当该属性为 true 时，会禁用下拉列表。
formNew	form_id	定义 select 字段所属的一个或多个表单。
multiple	multiple	当该属性为 true 时，可选择多个选项。
name	name	定义下拉列表的名称。
requiredNew	required	规定用户在提交表单前必须选择一个下拉列表中的选项。
size	number	规定下拉列表中可见选项的数目。

<optgroup> 标签

经常用于把相关的选项组合在一起。

属性	值	描述
disabled	disabled	规定禁用该选项组。
label	text	为选项组规定描述。

<option> 标签

定义下拉列表中的一个选项（一个条目）。

<option>标签中的内容作为 <select> 或者<datalist> 一个元素使用

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用。
label	text	定义当使用 <optgroup> 时所使用的标注。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

<label>标签

为 input 元素定义标注（标记）

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

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

<label>电子邮件：<input  type="email"   name=”email ></label>
<label  for=”inputid“>电子邮件</label>  

<input  id=”inputid“  type="email"  name=”email“>

<fieldset>

将表单内的相关元素分组

<fieldset  name="" >         

  <legend>说明标签</legend>      //给分组设置说明标签

  <input  type="passwd">

  <input  type="number">     //只能输入数值

</fieldset>

表单类型

<input type="search">     // 搜索框  键入内容时出现叉标记用来取消 所有可设置属性与text一样

<input type=" password ">   //所有可设置属性与text一样

<input type="checkbox">   //复选框

<input type="radio">      //单选框

<input type="image"  src="img.png">    //生成一个图片按钮

<input type="color">      //生成一个颜色按钮

<input type="tel">        //电话

<input type="url">        //网址的文本框

<input type="hideen">      //生成一个隐藏控件

<input type="file">        //生成一个上传控件

<input type="checkbox">   //复选框用户勾选框

<input type="radio">      //单选框只能在几个中选一个

<input type=" email">    //所有可设置属性与text一样

.
type为number、range时

<input type=" number">    //只能输入数值的框

<input   type=" range"   list=““  min=”“  max=”“  readonly required   step=”“   value=”“>    //只能输入在一个数值范围的框

type为checkbox、radio时

多选框  name值可以不同

音乐<input  type="checkbox">

体育<input  type="checkbox"   name="music"  checked value=""  required >

//checked  //设置复选框是否为勾选状态

//required    //表示用户必须勾选，否则无法通过验证

// value=""   //设置复选框勾选状态时提交的数据。默认为on

单选框  name值相同

<input  type="radio"  name="" value="也要sex才行">内容

<input  type="radio"  name="" value="sex">内容

type为image时

<input  type="image"  src="img.png"  alt=““  width  height align  style="float:right" >      //生成一个图片按钮

注意:在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替

生成下拉列表 

注意value值是区分option用的文本值是显示用的

<select  name=""  disabled   size =“数值“  multiple  autofocus   required   >

   <optgroup  label="水果类"> //设置分类

<option  value="1"  selected >苹果</option>

<option  value="2">橘子</option>

<option  value="3">香蕉</option>

</optgroup>

</select>

// size =“数值“  //文本高度

// multiple    //是否可以多选

// autofocus   //获取焦点

//  selected   //设置默认首选

多行文本框

<textarea  name=""  rows="数值"  cols="数值"  wrap="hard"  readonly disabled   maxlength=““   autofocus  placeholder=”“   required  >请留下您的建议！</textarea>

// rows="数值"   //  设置行数

// cols="数值"  //设置列数

// wrap="hard"  //设置是否插入换行符

//文本域之间的文字是默认内容

tabindex属性

<input  type="text"  name="user"  tabindex="2">

<input  type="text"  name="user"  tabindex="1">

解释：表单中按下tab键，实现获取焦点的顺序。如果是-1，则不会被选中。

<table>表格

 

      属性 table:

            border="1"   边框

            width="100"  宽

            height="100" 高

            cellpadding="10" 单元格内边距

            cellspacing="11" 单元格间距

            background="a.jpg" 背景图

            bgcolor ="red" 背景颜色

           tr

             height="10" 整行高度为10像素

             align="" 水平方向的对齐方式

             valign="" 垂直方向的对齐方式

             bgcolor=""背景颜色

             backgroun="images/3a.jpg" 背景图片

           td

            width=""

            height=""

            bgcolor=""背景颜色

            backgroun="images/3a.jpg" 背景图片

            rowspan="2"  合并行形成列

            colspan="3"  合并列形成行

           注意：① 合并不仅仅可以单列或单行的合并还可以多行多列的合并。

                 ② 宽度在设置过程中会互相影响

                 ③ 表格中可以嵌套表格，最多不要超过八层

标签定义 HTML 表格   可以在td中再嵌套表格

<tr>元素定义表格行，<th>元素定义表头，<td>元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot>以及 <tbody> 元素。

表格中的内容和单元格之间的距离 cellpadding=”数值” 默认数值是2像素

表格中单元格和单元格之间的距离 cellspacing=”数值” 默认数值是2像素

1.        表格的边框border=”数值” 默认是0

2.        表格的宽度 width=”数值”

3.        表格的高度height=”数值”（w3c推荐不建议使用高度）

4.        表格的居中方式 align=”水平对齐方式”  取值 left  center right

5.        表格的背景颜色 bgcolor=”颜色值” 例如 bgcolor=”red”

6.        表格的背景图片 background=”图片的地址”（背景图片不能含有中文）---修饰的作用

7.        表格的合并边框线 rules=”all”(w3c不推荐使用，css样式来实现)

8.        表格的边框颜色bordercolor=”颜色值”例如
bordercolor=”#ff0000”(不建议使用)

注意：背景图片的优先级高于背景颜色

<tr>的属性

l  Height 行的高度例如 height=”300”

l  Bgcolor背景颜色例如 bgcolor=”blue”

l  Background背景图片例如 background=”images/33.jpg”

l  Align 水平对齐方式例如  align=”left //center//right”    //或者

l  Valign 垂直对齐方式例如 valign=”top //middle //bottom”

单元格的属性

l  Bgcolor 背景颜色

l  Background 背景图片例如 background=”images/XX.jpg”

l  Width 单元格的宽度例如 width=”300”

l  Height 单元格的高度例如height=”40”

l  Align 内容在单元格中的水平对齐方式 align=”left/center/right”

l  Valign 内容在单元格中垂直对齐方式  valign =”top/middle/bottom”;

Colspan=“数值” 例如colspan=”3” 横向合并三个

纵向合并rowspan=”数值” 例如rowspan=”3” 纵向合并3个

属性	值	描述
align	left center right	HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border	1 ""	规定表格单元是否拥有边框。
cellpadding	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacing	pixels	HTML5 不支持。规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	HTML5 不支持。规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	HTML5 不支持。规定内侧边框的哪个部分是可见的。
summary	text	HTML5 不支持。规定表格的摘要。
width	pixels %	HTML5 不支持。规定表格的宽度。

<table border="数值"  bordercolor >         //border="数值"  //表格边框  //bordercolor 边框颜色   //n  

  <caption>表格标题</caption>    //表格外面的总标题

 <thead>                                                      

    <tr align>

      <throwspan="">基本情况</th>   //rowspan="" 合并列

      <th align></th>

      <th></th>      //表格表题第一行会加粗

      <th></th>

    </tr>

  </thead>

 

  <tbody>          //表内容

 

    <colgroup style="background:颜色" span=“数值”></colgroup>   //设置列颜色第一种方法  // span=“数值”数值表示选择几个不是第几个

<colgroup>

<col 占位符>

  <col style="background:颜色" >

</colgroup>    

//设置列颜色第二种方法 用<col>占位符设置几个就占位几个 

 

    <tr style=“background：颜色；”>   //设置行的颜色

      <td background=”路径”></td>

      <td align></td>    //内容

      <td></td>

    </tr>

 

    <tr>

      <td valign=”top|middle|bottom|baseline”></td>

      <td></td>    //内容 

      <td></td>  //valign 单元格垂直对其方式 baseline 基线对齐

    </tr>

 </tbody>

 

  <tfoot>       //表脚

    <tr>

      <td colspan=“”>统计</td>  //统计 colspan=““合并行

    </tr>

  </tfoot>

 

</table>

图片<img>

<img  src="" alt=“内容”title widthheight >     //插入图片

alt=“内容”   //当图片加载不出来时显示文字信息

title   //鼠标指在图片上显示的信息

图片和内容左右之间的距离 hspace=”数值”

图片和内容上下之间的距离 vspace=”数值”

创建图片热点响应分区

1.)

DW打开  左下角有正方形 圆形 不规则形 然后选择图片区域 设置左下角的热点 “链接"到的

网站 “目标”打开方式_black   "替换" 写名称

2.)
<map>

<img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap">

<map name="planetmap">

  <area shape="rect" coords="0,0,82,126"href="sun.htm" alt="Sun">

  <area shape="circle" coords="90,58,3"href="mercur.htm" alt="Mercury">

  <area shape="circle" coords="124,58,8"href="venus.htm" alt="Venus">

</map>

    <!-- usemap连接map的name名  #不能少

          map 包含所有指定的坐标

          area 区域   shape 热点形状 coords 热点坐标 href热点链接地址  -->

<iframe >嵌入另一个文档

<a href="" target=”对应iframe的name值“>名称</a> |    <a href=""target=”对应 “>名称</a>

<iframe src="这里设置默认页面可以与上面不同" width height  name=”“   frameborder></iframe>

//frameborder属性用于定义iframe表示是否显示边框。

ctrl+F5 深度刷新

框架：

     <iframe src="" name=""></iframe>    框架  src="" 链接页面  name="" 名称，为了给a标签的target提供打开位置

     <frameset cols="100,*"  rows="200,*"></frameset>    框架集    cols="100,*"  水平分成两部分   rows="200,*" 垂直分成两部分

框架集
<frameset  cols="20%,*"> 
左右排列

       <frame  src="q.html"name="1" >

        <framesetrows="40%,*"> 
上下排列

           <frame src="h.html" name="2" > //name值用于a链接target打开框架名的位置

           <frame src="t.html" name="3" >

       </frameset>

</frameset>

//frame属性：frameborder=yes|no|1|0 四个值可选

framespacing 框架边框的宽度

bordercolor=yes|no|auto框架边框的颜色

scrolling 是否显示滚动条

noresize 固定框架大小浏览器内不能调整大小

<frameset rows="100,*,500">

          <frame src="http://www.baidu.com" name=""/>

          <frame src="http://www.baidu.com" name=""/>

          <frameset cols="500,*">

             <frame src="images/3a.jpg" name=""/>

             <frame src="images/3a.jpg" name=""/>

          </frameset>

        </frameset>

        属性：rows="100,*" 将浏览器水平分割成几部分

             cols="100.*" 将浏览器垂直分割成几部分

             name=""  为a标签的target属性提供位置

             src="" 默认加载的地址    

       注意：

        ① frameset 和 body 是仇人 有我没他

        ② 框架集可以继续套用框架集。自框架集占用父框架的一个frame位置。

contenteditable
属性

指定元素内容是否可编辑。

[b]<p contenteditable="true">这是一个可编辑段落。</p>[/b]

draggable
属性

规定元素是否可拖动。

<element draggable="true|false|auto">