前端再学习&＃xff08;1&＃xff09;html遗忘知识复习

第一次学习html是2016年3月份&＃xff0c;到现在2018年7月&＃xff0c;虽然中间做各种项目&＃xff0c;用了狠毒哟&＃xff0c;但很多使用时都要查文档&＃xff0c;时不时百度&＃xff0c;有些冷门但很重要的。这一阶段主要整理
遗忘知识点、冷门知识点。

• a标签的四种状态设置&＃xff0c;以及target属性

<style>a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */<style/><a href&＃61;"#" target&＃61;"bodyFrame">Prefacea><a href&＃61;"#" target&＃61;"view_window">Chapter 1a>

• hr p abbr address bdo blockquote

<br>是换行&＃xff0c;<p>是段落。换行后<br>不会空行&＃xff0c;而<p>换行后会空一行
The <abbr title&＃61;"People China">PRCabbr> 是一个缩写注释
<acronym title&＃61;"World Wide Web">不支持html5acronym><address>Written by <a href&＃61;"mailto:webmaster&＃64;example.com">Donald Ducka>.<br> Visit us at:<br>Example.com<br>文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。address><b>545b><bdo dir&＃61;"ltr">定义文字方向bdo><big>bigbig><blockquote>blockquote这是一个很长的引用<br>之间的所有文本都会从常规文本中分离出来&＃xff0c;经常会在左、右两边进行缩进&＃xff08;增加外边距&＃xff09;&＃xff0c;<p>而且有时会使用斜体。也就是说&＃xff0c;块引用拥有它们自己的空间。blockquote>

<em> 把文本定义为强调的内容。
<strong> 把文本定义为语气更强的强调的内容。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite> 定义引用。可使用该标签对参考文献的引用进行定义&＃xff0c;比如书籍或杂志的标题。
<sup><sub>定义上下标

HTML <time> 标签
<p>我们在每天早上 <time>9:00time> 开始营业。p><p>我在 <time datetime&＃61;"2008-02-14">情人节time> 有个约会。p>

• 框架

<frameset cols&＃61;"25%,50%,25%"><frame src&＃61;"frame_a.htm" /><frame src&＃61;"frame_b.htm" /><frame src&＃61;"frame_c.htm" />
frameset><frame> 定义框架集的窗口或框架。
<frameset> 定义框架集。
<noframes> 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。

• 图片标签

img、map、area、canvas、figcaption、figure
<img src&＃61;"planets.jpg" border&＃61;"0" usemap&＃61;"#planetmap" alt&＃61;"Planets" /><map name&＃61;"planetmap" id&＃61;"planetmap"><area shape&＃61;"circle" coords&＃61;"180,139,14" href &＃61;"venus.html" alt&＃61;"Venus" /><area shape&＃61;"circle" coords&＃61;"129,161,10" href &＃61;"mercur.html" alt&＃61;"Mercury" /><area shape&＃61;"rect" coords&＃61;"0,0,110,260" href &＃61;"sun.html" alt&＃61;"Sun" />
map>

• 音频/视频

<audio src&＃61;"someaudio.wav">
您的浏览器不支持 audio 标签。
audio>
-----
<audio controls><source src&＃61;"horse.ogg" type&＃61;"audio/ogg"><source src&＃61;"horse.mp3" type&＃61;"audio/mpeg">Your browser does not support the audio element.
audio>
------
<video width&＃61;"320" height&＃61;"240" controls&＃61;"controls"><source src&＃61;"forrest_gump.mp4" type&＃61;"video/mp4" /><source src&＃61;"forrest_gump.ogg" type&＃61;"video/ogg" /><track kind&＃61;"subtitles" src&＃61;"subs_chi.srt" srclang&＃61;"zh" label&＃61;"Chinese"><track kind&＃61;"subtitles" src&＃61;"subs_eng.srt" srclang&＃61;"en" label&＃61;"English">
video>
-------
<video src&＃61;"movie.ogg" controls&＃61;"controls">
您的浏览器不支持 video 标签。
video>
----
<audio> 定义声音内容。
<source> 定义媒介源。
<track> 定义用在媒体播放器中的文本轨道。
<video> 定义视频。

• 列表

<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮。----------**ul 、li属性**
ul&＃xff1a; list-style:none&＃xff0c;这一句是取消列表前点&＃xff0c;因为我们不需要这些点。
li&＃xff1a; margin:0px&＃xff0c;这一句是删除UL的缩进&＃xff0c;这样做可以使所有的列表内容都不缩进。
ul li float:left 的左右是让内容都在同一行显示&＃xff0c;因此使用了浮动属性(float)。一、list-style-type属性
-------------------list-style-type属性是用来定义li列表的项目符号的&＃xff0c;即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下&＃xff1a;&＃xff08;列举一些常用的属性值&＃xff09;list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-romanlist-style-type属性的属性值有很多&＃xff0c;在这里我们只是列举了比较常用的几个。none&＃xff1a;不使用项目符号。 disc&＃xff1a;实心圆。 circle&＃xff1a;空心圆。 square&＃xff1a;实心方块。 demical&＃xff1a;阿拉伯数字。 lower-alpha&＃xff1a;小写英文字母。 upper-alpha&＃xff1a;大写英文字母。 lower-roman&＃xff1a;小写罗马数字。 upper-roman&＃xff1a;大写罗马数字。使用list-style-type属性的示例代码如下&＃xff1a;li{
list-style-type:square;}<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>二、list-style-image属性
--------------------list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性&＃xff0c;其语法结构如下&＃xff1a;list-style-image:none/urllist-style-image属性可以取两个值&＃xff1a;none&＃xff1a;没有替换的图片。 url&＃xff1a;要替换图片的路径。来看一段代码&＃xff1a;li{
list-style-image:url(images/bg03.gif);}三、list-style-position属性
-----------------------list-style-position属性&＃xff0c;是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性&＃xff0c;语法结构如下&＃xff1a;list-style-position:inside/outsideinside&＃xff1a;项目符号放置在文本以内。 outside&＃xff1a;项目符号放置在文本以外。使用list-style-position属性的示例如下&＃xff1a;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样式的属性&＃xff0c;也是一个可以继承的属性&＃xff0c;语法结构如下&＃xff1a;li-style:list-style-type/list-style-image/list-style-position各个值的位置可以交换。比如&＃xff1a;li{
list-style:url(images/bg03.gif) inside;}<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>

表格

在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表
http://2004.sina.com.cn

• table定义表格
• tr定义行
• td定义列
• th标签: 给每一列设置标题, 单元格中的内容会自动加粗&＃xff0c;居中
• caption标签:给整个表格设置标题

表格中的属性&＃xff08;6大属性&＃xff09;

border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度

width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度

height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度

cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙

cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距

align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

说明
给table设置align属性, 是让表格在浏览器中居左/居右/居中
给tr设置align属性, 是让当前行中所有内容居左/居右/居中
给td设置align属性,是让当前单元格中所有内容居左/居右/居中
该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right

给table设置valign属性, 无效
给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
bgcolor:规定表格的背景颜色

给table设置bgcolor属性, 是给整个表格设置背景颜色
给tr设置bgcolor属性, 是给当前行设置背景颜色
给td设置bgcolor属性, 是给当前单元格设置背景颜色
该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义

表格结构

• thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
• tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
• tfoot标签:用来存放表格的页脚&＃xff08;脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现

表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写

结构图

HTML基础-认识HTML

HTML基础–基础标签

HTML基础–基本概念

HTML基础–列表标签

HTML基础–表格标签

HTML基础–表单标签

HTML基础–多媒体标签