HTML的常用标签

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML的常用标签相关的知识,希望对你有一定的参考价值。

  1 <!--编写html常用的标签
  2     文字版面的编辑
  3         格式标签
  4         文本标签
  5     超链接和锚点
  6     图像和图像地图
  7     -->
  8 
  9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 10 <html xmlns="http://www.w3.org/1999/xhtml">
 11 <head>
 12 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 13 <title>格式标签</title>
 14 </head>
 15 
 16 <body>
 17 <!--格式标签用于网页中文本的布局、缩进、位置、换行、列表等
 18     <br>           换行
 19     <p>            段落
 20     <center>       居中
 21     <pre>          保留文字在源代码中的格式
 22     <ul><li>       无序列表
 23     <ol><li>       有序列表
 24     <hr>           水平分割线-->
 25     aaaaaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaa<br />
 26     bbbbbbbbbbbb<br />
 27     cccccccccccc<br />
 28     <hr>
 29     <p>aaaaaaaaaaa</p>
 30     <p style="color:blue">bbbbbbbbbbb</p>
 31     <p align="center">ccccccccccc</p>
 32     <hr />
 33     <center>居中文字</center>
 34     <hr />
 35     <pre>aaaa     bbbb    cccc     ddddd        eeeee     fffff     gggg   hhhhh    yyyyy </pre>
 36     <hr />
 37     <ul>
 38         <li>内容一
 39             <ul>
 40                 <li>列表项</li>
 41                 <li>列表项</li>
 42                 <li>列表项</li>
 43                 <li>列表项</li>
 44             </ul>
 45         </li>
 46         <li>内容二
 47             <ul>
 48                 <li>列表项</li>
 49                 <li>列表项</li>
 50                 <li>列表项</li>
 51                 <li>列表项</li>
 52             </ul>
 53         </li>
 54         <li>内容三
 55             <ul>
 56                 <li>列表项</li>
 57                 <li>列表项</li>
 58                 <li>列表项</li>
 59                 <li>列表项</li>
 60             </ul>
 61         </li>
 62     </ul>
 63     <hr width="600" size="20" noshade="noshade">
 64     <hr width="80%" size="20" noshade="noshade" color="#000000">
 65     <ol>
 66         <li>内容一
 67             <ol>
 68                 <li>列表项</li>
 69                 <li>列表项</li>
 70                 <li>列表项</li>
 71                 <li>列表项</li>
 72             </ol>
 73         </li>
 74         <li>内容二
 75             <ol>
 76                 <li>列表项</li>
 77                 <li>列表项</li>
 78                 <li>列表项</li>
 79                 <li>列表项</li>
 80             </ol>
 81         </li>
 82         <li>内容三
 83             <ol>
 84                 <li>列表项</li>
 85                 <li>列表项</li>
 86                 <li>列表项</li>
 87                 <li>列表项</li>
 88             </ol>
 89         </li>
 90     </ol>    <!--文本标签在网页中,为了着意强调某一部分文字,或者为了让文字有所变化
 91     <hn>(n为1~6)     标题文字
 92     <b>                粗体
 93     <i>                斜体
 94     <u>                下划线
 95     <font>
 96     <tt>
 97     <cite>
 98     <em>
 99     <strong>
100     <small>
101     <sub>           
102     <sup>
103     -->
104     <h1>使用&lt;H1&gt;输出一号标题字体</h1>
105     <h2>使用&lt;H2&gt;输出二号标题字体</h2>
106     <h3>使用&lt;H3&gt;输出三号标题字体</h3>
107     <h4>使用&lt;H4&gt;输出四号标题字体</h4>
108     <h5>使用&lt;H5&gt;输出五号标题字体</h5>
109     <h6>使用&lt;H6&gt;输出六号标题字体</h6>
110     
111     <b>粗体</b>
112     <u>下划线</u>
113     <i>斜体</i><br />
114     
115     <font face="楷体_GB2312" color="red" size="5">绝对字体大小为5的红色楷体字</font><br />
116     <font face="宋体" color="green" size="+3">相对字体大小为+3的绿色字体</font><br>
117     <font face="黑体" color="blue" size="-1">相对字体为-1的蓝色黑体字</font><br />
118     
119     <tt>输出打印文字</tt><br />
120     <cite>输出引证、举例的斜体字</cite><br />
121     <em>输出强调的斜体字</em><br />
122     <strong>输出强调的粗体字</strong><br />
123     <small>输出小型字体</small><br />
124     <big>输出大型字体</big><br />
125     
126     
127     
128 <!--超链接标签-->
129 <a href="../1/1.html">1.html网页</a>
130 <br />
131 
132 <!--锚点标签
133 <a href="URL">某某页面</a>:超链接
134 <a name="name">内容</a>:锚点
135 使用时<a href="#name">定位位置</a>
136 -->
137 <a href="#one">第一段</a>
138 <a href="#two">第二段</a>
139 <a href="#three">第三段</a>
140 <br />
141 <a name="one">
142 aaaaaaaaa<br />
143 aaaaaaaaa<br />
144 aaaaaaaaa<br />
145 </a><br />
146 <a href="#">返回</a>
147 <a name="two">
148 bbbbbbbbbb<br />
149 bbbbbbbbbb<br />
150 bbbbbbbbbb<br />
151 </a><br />
152 <a href="#">返回</a>
153 <a name="three">
154 cccccccccc<br />
155 cccccccccc<br />
156 cccccccccc<br />
157 </a>
158 <a href="#">返回</a>
159 <br />
160 
161 <!--图像标签
162 <img>
163 src:指定图片所在的URL
164 border:边框的宽度
165 alt:1.鼠标放上去有黄色小图标。2.如图片不存在,则出现它指定的文字。3.搜索引擎可以通过它指定的文字搜索该图片
166 width:宽度
167 height:高度
168 -->
169 <a href="../2/2.html"><img src="../1/logo.gif" border="0" width="300" alt="geshi_logo"/></a><br />
170 
171 <!--图片地图
172 一个图像只能加一个a标签,做一个链接。
173 如果把一副图像分成多个区域,每个区域指向不同的URL地址(为图片加多个链接)
174 在图像标签<img>中使用usemap属性去使用地图热点
175 <map>定义热点区域
176 <area>指定每个热点区域
177     shape指定形状rect(矩形)、poly(多边形)、circle(圆形)
178     coords确定形状
179     href指定链接的位置
180 -->
181             <img src="../1/logo.gif" usemap="#mymap" border=0 />
182 
183             <map name="mymap">
184                 <area shape="rect"  coords="5, 5, 50, 70" href="../1/1.html" target="_blank">
185                 <area shape="circle" coords="75, 35,30" href="../2/2.html" target="_blank">
186                 <area shape="poly" coords="175,0,110,70, 180,70" href="#" target="_blank">
187             </map>    
188 </body>
189 </html>

 

以上是关于HTML的常用标签的主要内容,如果未能解决你的问题,请参考以下文章

收藏|分享前端开发常用代码片段

关于js----------------分享前端开发常用代码片段

常用HTML5代码片段

IOS开发-OC学习-常用功能代码片段整理

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发

前端开发常用js代码片段