• HTML学习笔记-标签总结


    说明:该文档的目的是方便快速查询和记忆HTML中涉及到的标签。对于可以设置属性的标签,只标明可设置属性,不给出属性的具体介绍,避免出现混乱。需要具体看哪个标签的,请查看另外详细的文档说明。

     

    第一章 HTML概述与基本结构

    1.1 <HTML></HTML>:Hypertext Marked Language,超文本标记语言

    在文档的最外层,文档中的所有文本和html标签都包含在其中,它表示该文档是以超文本标识语言(HTML)编写的。

    1.2 <HEAD></HEAD>

    HTML文档的头部标签,在浏览器窗口中,头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公共属性。

    1.3 <TITLE></TITLE>

    嵌套在<HEAD>头部标签中,标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。

    1.4 <BODY> </BODY>:可设置属性

    标签之间的文本是正文,是在浏览器要显示的页面内容。

    第二章 HTML主体标签及属性、颜色的设定

    第三章 文字版面的编辑

    3.1 <br>blank row,换行

    换行标签是个单标签,也叫空标签,不包含任和内容,在html文件中的任何位置只要使用了<br>标签,当文件显示在浏览器中时,该标签之后的内容将显示下一行。

    3.2 <p><p></p>paragraph,换段落,可设置属性

    该标签所标识的文字,代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符,也就是要隔一行空白行,用以区别文字的不同段落。它可以单独使用,也可以成对使用。单独使用时,下一个<P>的开始就意味着上一个<P>的结束。良好的习惯是成对使用。

    3.3 <pre></pre>:原样显示文字

    要保留原始文字排版的格式,就可以通过<pre>标签来实现,方法是把制作好的文字排版内容前后分别加上始标签<pre>和尾标签</pre>

    3.4 <center></center>:居中对齐

    文本在页面中使用<center>标签进行居中显示,<center>是成对标签,在需要居中的内容部分开头处加<center>,结尾处加</center>

    3.5 <blockquote></blockquote>:引文标签(即开头缩进)

    该标签可以用来建立一个引文,他特别适合较长文本的引用,引文显示时将会自动右移,左边空出几个格,加以区别。可以使用多个该标签,来增加缩进量。

    3.6 <hr>horizontal rule,水平分割线,可设置属性

    该标签是单独使用的标签,是水平线标签,用于段落与段落之间的分隔,使文档结构清晰明了,使文字的编排更整齐。通过设置<hr>标签的属性值,可以控制水平分隔线的样式。

    3.7 <address></address>:署名

    该标签一般用于说明这个网页是由谁或是由哪个公司编写的,以及其它相关信息。在<address></address>标签之间的文字显示效果是斜体字。

    3.8 html中常见特殊字符及其代码表

    3.9 <!--注释的内容-->:注释 

    HTML文档中可以加入相关的注释标记,便于查找和记忆有关的文件内容和标识,这些注释内容并不会在浏览器中显示出来。注释标签的格式:<!--注释的内容-->

    3.10 字体属性

    3.10.1 <hn></hn>:标题,可设置属性

    <hn>标签用于设置网页中的标题文字,被设置的文字将以黑体或粗体的方式显示在网页中。

    标题标签的格式:<hn align=参数>标题内容</hn>

    说明:<hn>标签是成对出现的,<hn>标签共分为六级,在<h1>...</h1>之间的文字就是第一级标题,是最大最粗的标题;<h6>...</h6>之间的文字是最后一级,是最小最细的标题文字。<hn>标签本身具有换行的作用,标题总是从新的一行开始。

    3.10.2 <font></font>:文字格式控制标签,可设置属性

    <FONT>标签用于控制文字的字体,大小和颜色。控制方式是利用属性设置得以实现的。格式:<font face=1 size=2 color=3>文字</font>

    3.11 特定文字样式标签

    在有关文字的显示中,常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在html中用于这种功能的标签可以分为两类,物理类型和逻辑类型。

    3.11.1 物理类型

    3.11.1.1 <b></b>:粗体标签

    放在<b></b>标签之间的文字将以粗体方式显示。

    3.11.1.2 <i></i>:斜体标签

    放在<i></i>标签之间的文字将以斜体方式显示。

    3.11.1.3 <u></u>:下划线标签

    放在<u></u>标签之间的文字将以下划线方式显示。

    3.11.2 逻辑类型

    逻辑类型是使用一些标签来改变字体的形态和式样,以便产生一些浏览者习惯的或约定的显示效果,常用的逻辑类型标签有八种,放在标签之间的文字受其控制。

    3.11.2.1 <em></em>

    em标签:<em>用于强调的文本,一般显示为斜体字</em>

    3.11.2.2 <strong></strong>

    strong标签:<strong>用于特别强调的文本,显示为粗体字</strong>

    3.11.2.3 <cite></cite>

    cite标签:<cite>用于引证和举例,通常是斜体字</cite>

    3.11.2.4 <code></code>

    code标签:<code>用来指出这是一组代码</code>

    3.11.2.5 <small></small>

    small标签:<small>规定文本以小号字显示</small>

    3.11.2.6 <big></big>

    big标签:<big>规定文本以大号字显示</big>

    3.11.2.7 <samp></samp>

    samp标签:<samp>显示一段计算机常用的字体,即宽度相等的字体</samp>

    3.11.2.8 <kbd></kbd>

    kbd标签:<kbd>由用户输入文本,通常显示为较粗的宽体字</kbd>

    3.11.2.9 <var></var>

    var标签:<var>用来表示变量,通常显示为斜体字</var>

    3.11.2.10 <dfn></dfn>

    dfn标签:<dfn>表示一个定义或说明,通常显示为斜体字</dfn>

    3.11.2.11 <sup></sup>

    sup标签:12<sup>2</sup>=144

    3.11.2.12 <sub></sub>

    sub标签:硫酸亚铁的分子式是Fe<sub>2</sub>SO<sub>4</sub>

    第四章 建立列表

    4.1 <UL></UL>unordered lists,无序列表,<LI>可设置属性

    无序列表使用的一对标签是<ul></ul>,无序列表指没有进行编号的列表,每一个列表项前使用<LI>

    4.2 <OL></OL>ordered lists,有序列表,可设置属性,<LI>也可设置属性

    和无序列表的使用格式基本相同,它使用标签<ol></ol>,每一个列表项前使用<li><ol>列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表项,编号会自动调整。

    4.3 <DL></DL><DT><DD>:定义列表,可设置属性

    定义列表也叫描述性列表,定义列表默认为两个层次,第一层为列表项标签<DT>,第二层为注释项标签<DD><DT><DD>标签通常是成对使用的。也可以一个列表项对应于几个解释项,这种方式很少用。<DD>默认的注释是显示在另一行中,当使用<dl compact="compact">,注释项和列表项将显示在同一行。其格式为:

    <dl>

      <dt>1项 <dd>注释1

      <dt>2项 <dd>注释2

      <dt>3项 <dd>注释3

    </dl>

    4.4 <DIR></DIR><MENU></MENU>:目录列表和菜单列表

    它们的格式和无序列表<ul>是一样的。

    第五章 图像的处理

    5.1 <IMG>:网页中插入图片及avi文件,可设置属性

    当浏览器读取到<img>标签时,就会显示此标签所设定的图像。

    第六章 建立超链接

    6.1 <A></A>:建立超链接,可设置属性

    格式为:<A HREF="资源地址" TARGET="窗口名称" TITLE="指向连接显示的文字">超链接名称</A>

    第七章 TABLE表格

    7.1 定义表格的基本语法

    7.1.1 <table></table>:定义一个表格的开始和结束,可设置属性

    7.1.2 <caption></caption>:定义表格的标题,可设置属性

    在表格中也可以不用此标签。

    7.1.3 <th></th>:定义表头单元格,可设置属性

    表格中的文字将以粗体显示,在表格中也可以不用此标签,<th>标签必须放在<tr>标签内。

    7.1.4 <tr></tr>:定义一行标签,可设置属性

    一组行标签内可以建立多组由<td><th>标签所定义的单元格。

    7.1.5 <td></td>:定义单元格标签,可设置属性

    一组<td>标签将将建立一个单元格,<td>标签必须放在<tr>标签内。

    7.2 表格的分组

    7.2.1 表格的行分组

    7.2.1.1 <thead></thead>:表头标签,可设置属性

    其标签内是由表头标签标识的表头元素。<thead><tbody>标签的属性和<th><td>标签是一样的。

    7.2.1.2 <tbody></tbody>:表格主体标签,可设置属性

    标签用于规定表格主体部分的元素,可出现多次。

    7.2.1.3 <tfoot></tfoot>:尾注标签

    尾注标签很少用。

    7.2.2 <colgroup>:表格按列分组,可设置属性

    第八章 网页的动态、多媒体效果

    8.1 <marquee></marquee>:滚动字幕,可设置属性

    8.2 <embed>:插入多媒体文件,可设置属性

    在网页中可以用<embed>标签将多媒体文件插入,比如可以插入音乐和视频等。

    8.3 嵌入多媒体文件

    8.3.1 <bgsound>:设置网页背景音乐,可设置属性

    <bgsound>标签用来设置网页的背景音乐。但只适用於 IE,其参数设定不多。格式如下:<BGSOUND src="your.mid" autostart=true loop=infinite>

    第九章 多视窗口框架

    9.1 <frameset></frameset>:框架集标签,可设置属性

    框架就是把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果,也可以非常方便的完成导航工作。

    所有的框架标记要放在一个html文档中。html页面的文档体标签<body>被框架集标签<frameset>所取代,然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。

    9.2 <frame>:框架标签,可设置属性

    <frame>是个单标签,<frame>标签要放在框架集frameset,<frameset>设置了几个子窗口就必须对应几个<frame>标签,而且每一个<frame>标签内还必须设定一个网页文件。

    9.3 <noframes></noframes>:提醒

    即使在做框架集网页时没有这对标签,文件在很多浏览器解析时也会自动生成<noframes>标签,这对标签的作用是当浏览者使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用<NOFRAMES>这个标记,当使用的浏览器看不到框架时,他就会看到<NOFRAMES>你的浏览器不支持框架网页</NOFRAMES>之间的内容,而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本。

    9.4 <iframe>:浮动窗口提醒,可设置属性

    <iframe>这标记只适用於IE浏览器。它的作用是在浏览器窗口中可以嵌入一个框窗以显示另一个文件。它是一个围堵标记,但围著的字句只有在浏览器不支援iframe标记时才会显示,如<noframes>一样,可以放些提醒字句之类。通常iframe配合一个辨认浏览器的Java Script会较好,若JavaScript认出该浏览器并非Internet Explorer便会切换至另一版本。

    第十章 表单的设计

    10.1 <form></form>:定义表单的开始和结束位置,可设置属性

    10.2 <input>:写入标记,可设置属性

    html语言中,标记<input>具有重要的地位,它能够将浏览器中的控件加载到html文档中,该标记是单个标记,没有结束标记。<input type="">标志用来定义一个用户输入区,用户可在其中输入信息。此标志必须放在 <form></form>标志对之间。

    10.3 <select></select><option>:菜单下拉列表框,可设置属性

    10.4 <textarea></textarea>:多行的文本框,可设置属性

  • 相关阅读:
    计算十位数以内的数的反数
    用Python做一个简单的小游戏
    Python的发展历史及其前景
    监控相关总结
    前端css学习_Day15
    常用命令总结
    mysql常用命令总结
    Python之Paramiko、前端之html学习_Day14
    Python操作redis、memcache和ORM框架_Day13
    Python连接msyql、redis学习_Day12
  • 原文地址:https://www.cnblogs.com/PistonType/p/5277383.html
Copyright © 2020-2023  润新知