HTML开发简记

谁践踏了优雅 2022-07-16 13:48 223阅读 0赞

1:WHATWG---网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。WHATWG 致力于 web 表单和应用程序.  
2:定义文字方向。  
<bdo dir="rtl">ltr  
Here is some Hebrew text  
</bdo>  
3:定义长的引用。  
<blockquote>  
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.  
</blockquote>  
4:定义被删除文本。  
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>  
5:  
<tt>:呈现类似打字机或者等宽的文本效果。  
<i>:显示斜体文本效果。  
<b>:呈现粗体文本效果。  
<big>:呈现大号字体效果。  
<small>:呈现小号字体效果。  
<pre>：定义预格式文本。  
<q>：定义短的引用。<p>Here comes a short quotation: <q>This is a short quotation</q></p>  
效果：Here comes a short quotation: "This is a short quotation"  
<strong>:定义语气更为强烈的强调文本。  
<sup>:定义上标文本。  
<sub>:定义下标文本。  
<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>  
\--<fieldset>：定义围绕表单中元素的边框。  
<form>  
<fieldset>  
<legend>健康信息</legend> //定义 fieldset 元素的标题。  
身高：<input type="text" />  
体重：<input type="text" />  
</fieldset>  
</form>  
6:框架  
\--<frame>:定义框架集的窗口或框架。  
（  
属性：  
\--frameborder：0 1--规定是否显示框架周围的边框。  
\--longdesc：规定一个包含有关框架内容的长描述的页面。  
\--marginheight：定义框架的上方和下方的边距。  
\--marginwidth：定义框架的左侧和右侧的边距。  
\--name：规定框架的名称。  
\--noresize：noresize--规定无法调整框架的大小。  
\--scrolling：yes no auto：规定是否在框架中显示滚动条。  
\--src：规定在框架中显示的文档的 URL。  
）  
\--<frameset>:定义框架集。  
（  
属性：  
\--cols：pixels % \*：定义框架集中列的数目和尺寸。  
\--rows：pixels % \*：定义框架集中行的数目和尺寸。  
）  
\--<noframes>:定义针对不支持框架的用户的替代内容。  
<frameset cols="25%,50%,25%">  
<frame src="/example/html/frame\_a.html">  
<frame src="/example/html/frame\_b.html">  
<frame src="/example/html/frame\_c.html">  
  
  
<noframes>  
<body>您的浏览器无法处理框架！</body>  
</noframes>  
  
  
</frameset>  
\---<iframe>:定义内联框架。  
<iframe src="/i/eg\_landscape.jpg"></iframe>  
（  
属性：  
\--frameborder  
\--height  
\--longdesc  
\--marginheight  
\--marginwidth  
\--name  
\--scrolling  
\--src  
\--width  
新：  
\--sandbox:启用一系列对 <iframe> 中内容的额外限制。  
\--seamless:seamless--:规定 <iframe> 看上去像是包含文档的一部分。  
\--srcdoc:HTML\_code:--规定在 <iframe> 中显示的页面的 HTML 内容。  
）  
7:图像  
\--<img>：定义图像。  
<img src="/i/eg\_tulip.jpg" alt="上海鲜花港 - 郁金香" />  
（  
属性：  
\--alt：规定图像的替代文本。  
\--src：规定显示图像的 URL。  
）  
\--<map>：定义图像映射。  
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。  
<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>  
（  
属性：必需的属性--id：为 map 标签定义唯一的名称。  
可选的属性--name：为 image-map 规定的名称。  
）  
\--<area>：定义图像地图内部的区域。  
8：链接  
\--<a>：定义锚。  
<a href="http://www.w3school.com.cn">W3School</a>  
（  
属性：  
\--charset：规定被链接文档的字符集。  
\--coords：规定链接的坐标。  
\--href：URL--：规定链接指向的页面的 URL。  
\--hreflang：language\_code--：规定被链接文档的语言。  
\--shape：default、rect、circle、poly:规定链接的形状。  
\--target:\_blank、\_parent、\_self、\_top：规定在何处打开链接文档。  
新属性：  
\--download：filename：规定被下载的超链接目标。  
<a href="/images/myw3schoolimage.jpg" download="w3logo">  
\--media：media\_query：规定被链接文档是为何种媒介/设备优化的。  
\--type：MIME type--：规定被链接文档的的 MIME 类型。  
<a href="http://www.w3school.com.cn" type="text/html">W3School</a>  
）  
\--<link>：定义文档与外部资源的关系。  
<link rel="stylesheet" type="text/css" href="theme.css" />  
（  
属性：  
\--charset  
\--href  
\--hreflang：language\_code--：规定被链接文档中文本的语言。  
\--media：media\_query--：规定被链接文档将被显示在什么设备上。  
\--rel：alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、  
stylesheet、tag：规定当前文档与被链接文档之间的关系。  
\--rev：。。。。--：与上相反  
\--target：  
\--type：MIME\_type 规定被链接文档的 MIME 类型。  
）  
9：表单  
\--<ul>：定义无序列表。  
属性：type：disc、circle、square--实心圆。空心圆。实心方块。  
\--<ol>：定义有序列表。  
（  
属性：  
\--start：number 规定有序列表的起始值。  
<ol start="5">  
<li>HTML</li>  
<li>XHTML</li>  
<li>CSS</li>  
</ol>  
\--type：1 A a I i--：规定在列表中使用的标记类型。  
新--reversed：reversed--： 对列表顺序进行降序：<ol reversed>  
）  
\--<li>：定义列表的项目。  
（  
属性：  
\--type：A a I i 1 disc square circle  
\--value：number--：规定列表项目的数字。  
）  
\--<dir>：不赞成使用。定义目录列表。  
\--<dl>：定义定义列表。  
<dl>  
<dt>计算机</dt> //定义列表中的项目  
<dd>用来计算的仪器 ... ...</dd> //描述列表中的项目  
<dt>显示器</dt>  
<dd>以视觉方式显示信息的装置 ... ...</dd>  
</dl>  
\--<dt>：定义定义列表中的项目。  
\--<dd>：定义定义列表中项目的描述。  
\--<menu>：定义命令的菜单/列表。  
<menu type="toolbar">  
<li>  
<menu label="File">  
<button type="button" οnclick="file\_new()">New...</button>  
<button type="button" οnclick="file\_open()">Open...</button>  
<button type="button" οnclick="file\_save()">Save</button>  
</menu>  
</li>  
<li>  
<menu label="Edit">  
<button type="button" οnclick="edit\_cut()">Cut</button>  
<button type="button" οnclick="edit\_copy()">Copy</button>  
<button type="button" οnclick="edit\_paste()">Paste</button>  
</menu>  
</li>  
</menu>  
\--<menuitem>：定义用户可以从弹出菜单调用的命令/菜单项目。  
新：  
<command>：定义命令按钮。  
10:表格  
\--<table> 定义表格  
（  
属性：  
\--border：规定表格边框的宽度。  
\--cellpadding：规定单元边沿与其内容之间的空白。  
\--cellspacing：规定单元格之间的空白。  
\--frame：void、above、below、hsides<上下>、lhs、rhs、vsides<左右>、box、border：规定外侧边框的哪个部分是可见的。  
\--rules：none、groups、rows、cols、all：规定内侧边框的哪个部分是可见的。  
\--summary：text--:规定表格的摘要。  
\--width:规定表格的宽度。  
）  
\--<caption> 定义表格标题。  
<caption>我的标题</caption>  
\--<th>  定义表格中的表头单元格。  
（  
属性：  
\--align：left、right、center、justify、char：规定单元格内容的水平对齐方式。  
\--rowspan：number--：规定单元格可横跨的行数。  
\--valign：top、middle、bottom、baseline：规定单元格内容的垂直排列方式。  
）  
\--<tr>  定义表格中的行。  
\--<td>  定义表格中的单元。  
（  
属性：  
\--align  
\--axis：对单元进行分类。  
\--colspan：规定单元格可横跨的列数。  
\--headers：规定与单元格相关的表头。  
<tr>  
<th id="name">Name</td>  
</tr>  
<tr>  
<td headers="name">George Bush</td>  
</tr>  
）  
（  
td属性：  
\--height  
\--nowrap  
\--rowspan:规定单元格可横跨的行数。  
\--valign:规定单元格内容的垂直排列方式。  
\--width  
）  
\--<thead> 定义表格中的表头内容。  
\--<tbody> 定义表格中的主体内容。  
\--<tfoot> 定义表格中的表注内容（脚注）。  
\--<col>  定义表格中一个或多个列的属性值。  
\--<colgroup> 定义表格中供格式化的列组。  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
二：HTML5新标签  
1：<mark>：定义有记号的文本。<mark>milk</mark>  
<meter>：定义预定义范围内的度量。<meter value="3" min="0" max="10">十分之三</meter>  
<meter value="0.6">60%</meter>  
<progress>：定义任何类型的任务的进度。下载进度：  
<progress value="22" max="100">  
</progress>  
<time>:定义日期/时间。<p>我们在每天早上 <time>9:00</time> 开始营业。</p>  
  
  
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>  
<wbr>:切割单词换行。如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。  
\--<datalist>：定义下拉列表。  
<input list="cars" />  
<datalist id="cars">  
<option value="BMW">  
<option value="Ford">  
<option value="Volvo">  
</datalist>  
\--<keygen>：定义生成密钥。  
<form action="/example/html5/demo\_form.asp" method="get">  
用户名：<input type="text" name="usr\_name" />  
加密：<keygen name="security" />  
<input type="submit" />  
</form>  
\--<output>:定义输出的一些类型。  
<form οninput="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>  
2：图像  
\--<canvas>：定义图形。  
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">  
Your browser does not support the canvas element.  
</canvas>  
  
  
<script type="text/javascript">  
var c=document.getElementById("myCanvas");  
var cxt=c.getContext("2d");  
cxt.fillStyle="\#92B901";  
cxt.fillRect(50,50,100,100);  
</script>  
(  
新属性：height width  
)  
\--<figcaption>：定义 figure 元素的标题。  
<figure>  
<figcaption>黄浦江上的的卢浦大桥</figcaption>  
<img src="/i/shanghai\_lupu\_bridge.jpg" width="350" height="234" />  
</figure>  
\--<figure>：定义媒介内容的分组，以及它们的标题。  
3：音频/视频  
\--<audio>：定义声音内容。  
<audio src="/i/horse.ogg" controls="controls">  
Your browser does not support the audio element.  
</audio>  
（  
属性：  
\--autoplay：autoplay--：如果出现该属性，则音频在就绪后马上播放。  
\--controls：controls--：如果出现该属性，则向用户显示控件，比如播放按钮。  
\--loop：loop--：如果出现该属性，则每当音频结束时重新开始播放。  
\--muted：muted--：规定视频输出应该被静音。  
\--preload：preload--：如果出现该属性，则音频在页面加载时进行加载，并预备播放。  
如果使用 "autoplay"，则忽略该属性。  
\--src：url--：要播放的音频的 URL。  
）  
\--<source>：定义媒介源。  
<audio controls>  
<source src="/i/horse.ogg" type="audio/ogg">  
<source src="/i/horse.mp3" type="audio/mpeg">  
Your browser does not support the audio element.  
</audio>  
（  
属性：  
\--media：规定媒体资源的类型。  
\--src：url--：规定媒体文件的 URL。  
\--type：规定媒体资源的 MIME 类型。  
）  
\--<track>：定义用在媒体播放器中的文本轨道。  
播放带有字幕的视频：  
<video width="320" height="240" controls="controls">  
<source src="forrest\_gump.mp4" type="video/mp4" />  
<source src="forrest\_gump.ogg" type="video/ogg" />  
<track kind="subtitles" src="subs\_chi.srt" srclang="zh" label="Chinese">  
<track kind="subtitles" src="subs\_eng.srt" srclang="en" label="English">  
</video>  
（  
属性：  
\--default：default--：规定该轨道是默认的，假如没有选择任何轨道。  
\--kind：captions、chapters、descriptions、metadata、subtitles--表示轨道属于什么文本类型。  
\--label：轨道的标签或标题。  
\--src：轨道的 URL。  
\--srclang：轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的。  
）  
\--<video>：定义视频。  
<video src="/i/movie.ogg" controls="controls">  
your browser does not support the video tag  
</video>  
（  
属性：  
\--autoplay  
\--controls  
\--height  
\--loop  
\--muted  
\--poster：URL--：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。  
\--preload：  
\--src  
\--width  
）  
4：链接  
\--<nav>：定义导航链接。  
<nav>  
<a href="index.asp">Home</a>  
<a href="html5\_meter.asp">Previous</a>  
<a href="html5\_noscript.asp">Next</a>  
</nav>  
<nav> 标签定义导航链接的部分。提示：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。  
5：样式/节  
\--<header> 定义 section 或 page 的页眉。  
\--<footer> 定义 section 或 page 的页脚。  
\--<section> 定义 section。  
\--<article> 定义文章。 标签规定独立的自包含内容  
  
  
\--<aside> 定义页面内容之外的内容。  
\--<details> 定义元素的细节。  
<details>  
<summary>Copyright 2011.</summary>  
<p>All pages and graphics on this web site are the property of W3School.</p>  
</details>  
\--<dialog> 定义对话框或窗口。  
\--<summary> 为 <details> 元素定义可见的标题。  
6：元信息  
\--<head> 定义关于文档的信息。  
（  
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。  
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。  
）  
\--<meta> 定义关于 HTML 文档的元信息。  
（  
属性：  
必需的属性：  
\--content：some\_text--：定义与 http-equiv 或 name 属性相关的元信息  
可选的属性：  
\--http-equiv--：content-type、expires、refresh、set-cookie：把 content 属性关联到 HTTP 头部。  
\--name：author、description、keywords、generator、revised、others：把 content 属性关联到一个名称。  
\--scheme：some\_text--：定义用于翻译 content 属性值的格式。  
）  
\--<base> 定义页面中所有链接的默认地址或默认目标。  
\--<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。