听取下小宝的建议，梳理下以前看过的知识点吧
2018-03-19 20:06
288 查看
HTML知识点梳理小宝说，如果没有记录下来的话，以前看过的知识点就跟没看过没什么区别，想想也对，那就尽量回忆下，看还能剩下多少
<!DOCTYPE html> <!--<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型 -->
<!-- 使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本） -->
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
<!-- 基底网址标记base标签 大型网站常用，改变所有链接默认基地址，注意，仅最先定义的能生效 -->
<link href="图标的路径" rel="shortcut icon">
</head>
<body>
<div style="width:980px;margin:0 auto;">
<p>html标签的回顾和总结：</p>
<a href="#">a标签可以链接到指定url或页面内的id</a><br>
<abbr title="People's Republic of China">PRC</abbr><!--定义缩写 --><br>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address><br> <!-- 定义文档作者或拥有者的联系信息 -->
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<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> <!--定义图像映射内部的区域 -->
<article>定义一个文章区域</article>
<aside>aside标签的内容可用作文章的侧栏。</aside>
<audio controls loop> <!-- controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop 如果出现该属性，则每当音频结束时重新开始播放。
auto metadata none 规定当网页加载时，音频是否默认被加载以及如何被加载
<audio preload="auto|metadata|none">。 -->
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio> <br>
<b>这是一个加粗文本</b><br>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p><br> <!-- 用来覆盖默认的文本方向。 -->
<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, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote> <!-- 定义一个摘自另一个源的块引用,有文本缩进效果 --><br>
&l
4000
t;form>
输入框:<br>
<input type="text" name="firstname">
<input type="password" name="psw">
<br>
<P>单选、复选框 radio\checkbox</P>
<label for="male">Male</label> <!-- input 元素定义标注（标记）label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，
就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。 -->
<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="提交"><br>
<label for="female">音乐</label>
<input type="checkbox" name="sex" id="female" value="female"><br><br>
<label for="female">舞蹈</label>
<input type="checkbox" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
<p>下拉列表</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="saab">Saab</option>
</select>
<p>文本域</p>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button type="button" onclick="alert('Hello World!')">按钮</button>
</form>
<!-- 使用HTML5的Placeholder属性实现input输入框背景文字提示效果：
在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。
例子： -->
<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密码..." name="pass"><input type="submit" value="提交">
</form>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form> <!-- datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。 -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p> <!-- <output>New 定义不同类型的输出，比如脚本的输出。 -->
<!-- <keygen>New 规定用于表单的密钥对生成器字段。 -->
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
<p>表格</p><!-- align表示表格标题列相对于表格的对齐方式(水平)，
可选值为： left, center, right, top, middle, bottom
valign表示表格标题列相对于表格的对齐方式(上下)，可选值为： top, bottom。
colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。
colspan是表示横向合并单元格，colspan=“3”表示水平合并三个td
rowspan是表示竖直合并单元格，rowspan=“2” 表示竖直合并两个td
cellspacing属性设置单元格与单元格、边框之间的距离-->
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
<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>
<!-- datalist定义输入时提示的下拉列表 -->
<p>datalist</p>
<form action="">
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</form>
<p>价格：<del>100</del> <ins>50元</ins></p>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<p>details定义展开详情</p>
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<dialog>对话框</dialog><!-- 标签定义对话框或窗口 ,很多浏览器不支持-->
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dd>显示器</dd>
</dl>
<embed src="/i/helloworld.swf" /><!-- 标签定义嵌入的内容，比如插件。 -->
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form><!-- ieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。 -->
<!-- <frameset> 定义框架集。
<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">
</frameset>
-->
<!--H5的新元素 <header></header> <footer></footer> <nav> <section>-->
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<p>无序列表：</p>
<ul>
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
<p>定义预定义范围内的度量。显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
<p><b>注释：</b>Internet Explorer 不支持 meter 标签。
</p>
<!-- <time><time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日
提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。 -->
视频播放及简单控制：
<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
<span>Your browser does not support HTML5 video.</span>
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</div>
</body>
</html>
<!DOCTYPE html> <!--<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型 -->
<!-- 使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本） -->
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签</title>
<!-- 基底网址标记base标签 大型网站常用，改变所有链接默认基地址，注意，仅最先定义的能生效 -->
<link href="图标的路径" rel="shortcut icon">
</head>
<body>
<div style="width:980px;margin:0 auto;">
<p>html标签的回顾和总结：</p>
<a href="#">a标签可以链接到指定url或页面内的id</a><br>
<abbr title="People's Republic of China">PRC</abbr><!--定义缩写 --><br>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address><br> <!-- 定义文档作者或拥有者的联系信息 -->
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<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> <!--定义图像映射内部的区域 -->
<article>定义一个文章区域</article>
<aside>aside标签的内容可用作文章的侧栏。</aside>
<audio controls loop> <!-- controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop 如果出现该属性，则每当音频结束时重新开始播放。
auto metadata none 规定当网页加载时，音频是否默认被加载以及如何被加载
<audio preload="auto|metadata|none">。 -->
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio> <br>
<b>这是一个加粗文本</b><br>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p><br> <!-- 用来覆盖默认的文本方向。 -->
<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, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote> <!-- 定义一个摘自另一个源的块引用,有文本缩进效果 --><br>
&l
4000
t;form>
输入框:<br>
<input type="text" name="firstname">
<input type="password" name="psw">
<br>
<P>单选、复选框 radio\checkbox</P>
<label for="male">Male</label> <!-- input 元素定义标注（标记）label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，
就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。 -->
<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="提交"><br>
<label for="female">音乐</label>
<input type="checkbox" name="sex" id="female" value="female"><br><br>
<label for="female">舞蹈</label>
<input type="checkbox" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
<p>下拉列表</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="saab">Saab</option>
</select>
<p>文本域</p>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button type="button" onclick="alert('Hello World!')">按钮</button>
</form>
<!-- 使用HTML5的Placeholder属性实现input输入框背景文字提示效果：
在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。
例子： -->
<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密码..." name="pass"><input type="submit" value="提交">
</form>
<form action="/demo/demo_form.asp">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form> <!-- datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。 -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p> <!-- <output>New 定义不同类型的输出，比如脚本的输出。 -->
<!-- <keygen>New 规定用于表单的密钥对生成器字段。 -->
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p>
<p>表格</p><!-- align表示表格标题列相对于表格的对齐方式(水平)，
可选值为： left, center, right, top, middle, bottom
valign表示表格标题列相对于表格的对齐方式(上下)，可选值为： top, bottom。
colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。
colspan是表示横向合并单元格，colspan=“3”表示水平合并三个td
rowspan是表示竖直合并单元格，rowspan=“2” 表示竖直合并两个td
cellspacing属性设置单元格与单元格、边框之间的距离-->
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
<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>
<!-- datalist定义输入时提示的下拉列表 -->
<p>datalist</p>
<form action="">
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</form>
<p>价格：<del>100</del> <ins>50元</ins></p>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<p>details定义展开详情</p>
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<dialog>对话框</dialog><!-- 标签定义对话框或窗口 ,很多浏览器不支持-->
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dd>显示器</dd>
</dl>
<embed src="/i/helloworld.swf" /><!-- 标签定义嵌入的内容，比如插件。 -->
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form><!-- ieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。 -->
<!-- <frameset> 定义框架集。
<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">
</frameset>
-->
<!--H5的新元素 <header></header> <footer></footer> <nav> <section>-->
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<p>无序列表：</p>
<ul>
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
<p>定义预定义范围内的度量。显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
<p><b>注释：</b>Internet Explorer 不支持 meter 标签。
</p>
<!-- <time><time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日
提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。 -->
视频播放及简单控制：
<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
<span>Your browser does not support HTML5 video.</span>
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- mybatis知识点总结和梳理
- 侃侃面试那些事儿：面试知识点梳理
- Memcache知识点梳理
- QT5知识点记录梳理（一）
- JAVA基础知识点梳理六：static相关
- 听取建议，大改动! 剪切板记录器 2.03版
- Java基础--反射机制的知识点梳理
- 2017吉林省教师招聘考试：法律法规知识点梳理
- 给Java新手的一些建议----Java知识点归纳(J2EE and Web 部分)
- [独孤九剑]Oracle知识点梳理（六）数据库常用对象之Procedure、function、Sequence
- Android 知识点梳理
- 10分钟梳理css知识点
- Sass的知识点梳理
- springMVC官方文档知识点梳理-关键
- 面试宝典之知识点梳理
- 给Java新手的一些建议----Java知识点归纳(Java基础部分)
- Android知识点梳理--sdcard读写操作
- 从0到1：Python爬虫知识点梳理
- Memcache知识点梳理
- 面试时技术知识点和个人建议