前端再学习（1）html遗忘知识复习
第一次学习html是2016年3月份，到现在2018年7月，虽然中间做各种项目，用了狠毒哟，但很多使用时都要查文档，时不时百度，有些冷门但很重要的。这一阶段主要整理
遗忘知识点、冷门知识点。
- a标签的四种状态设置，以及target属性
<style>
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
<style/>
<a href="#" target="bodyFrame">Preface</a>
<a href="#" target="view_window">Chapter 1</a>- hr p abbr address bdo blockquote
<br>是换行，<p>是段落。换行后<br>不会空行，而<p>换行后会空一行
The <abbr title="People China">PRC</abbr> 是一个缩写注释
<acronym title="World Wide Web">不支持html5</acronym>
<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
</address>
<b>545</b>
<bdo dir="ltr">定义文字方向</bdo>
<big>big</big>
<blockquote>
blockquote这是一个很长的引用<br>
之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），<p>
而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
</blockquote><em> 把文本定义为强调的内容。
<strong> 把文本定义为语气更强的强调的内容。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
<sup><sub>定义上下标
HTML <time> 标签
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>- 框架
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
<frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<noframes> 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。- 图片标签
img、map、area、canvas、figcaption、figure
<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>- 音频/视频
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
-----
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
------
<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>
-------
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
----
<audio> 定义声音内容。
<source> 定义媒介源。
<track> 定义用在媒体播放器中的文本轨道。
<video> 定义视频。- 列表
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮。
----------
**ul 、li属性**
ul： list-style:none，这一句是取消列表前点，因为我们不需要这些点。
li： margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。
ul li float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。
一、list-style-type属性
-------------------
list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下：（列举一些常用的属性值）
list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
list-style-type属性的属性值有很多，在这里我们只是列举了比较常用的几个。
none：不使用项目符号。 disc：实心圆。 circle：空心圆。 square：实心方块。 demical：阿拉伯数字。 lower-alpha：小写英文字母。 upper-alpha：大写英文字母。 lower-roman：小写罗马数字。 upper-roman：大写罗马数字。
使用list-style-type属性的示例代码如下：
li{
list-style-type:square;}
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
二、list-style-image属性
--------------------
list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性，其语法结构如下：
list-style-image:none/url
list-style-image属性可以取两个值：
none：没有替换的图片。 url：要替换图片的路径。
来看一段代码：
li{
list-style-image:url(images/bg03.gif);}
三、list-style-position属性
-----------------------
list-style-position属性，是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性，语法结构如下：
list-style-position:inside/outside
inside：项目符号放置在文本以内。 outside：项目符号放置在文本以外。
使用list-style-position属性的示例如下：
li{
list-style-type:square;
list-style-position:outside;}
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
再来看一下属性值为inside的样式。
li{
list-style-type:square;
list-style-position:inside;}
<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
四、list-style属性
--------------
list-style属性是综合设置li样式的属性，也是一个可以继承的属性，语法结构如下：
li-style:list-style-type/list-style-image/list-style-position
各个值的位置可以交换。比如：
li{
list-style:url(images/bg03.gif) inside;}
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>