您的位置: 首页  >  文章  >  HTML学习小结之HTML标签

HTML学习小结之HTML标签

分类: 文章 • 2024-04-29 20:52:51

1.文档结构标签

 ◎ <html>:标识文档的开始和结束

 ◎ <head>:标识文档的头部区域

 ◎ <body>:标识文档的主体区域

其中头部区域在页面中不可见而主体区域可见

示例1：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>文档结构标签</title>  
  6. </head>  
  7. <body>  
  8. 网页正文写在这里  
  9. </body>  
  10. </html>  



2.文本格式标签

主要标识文本区块并附带显示格式

 ◎ <title>:标识网页标题

 ◎ <hi>:标识标题文本，其中i是1到6的数字，标识i级标题

 ◎ <p>:段落

 ◎ <pre>:预定义文本

 ◎ <blockquote>:引用

示例2：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>文本格式标签</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <h1>这是一级标题</h1><!-- <br> -->  
  10. <h2>这是二级标题</h2><!-- <br> -->  
  11. <h3>这是三级标题</h3><!-- <br> -->  
  12. <h4>这是四级标题</h4><!-- <br> -->  
  13. <h5>这是五级标题</h5><!-- <br> -->  
  14. <h6>这是六级标题</h6><!-- <br> -->  
  15.   
  16. 这不是一个段落  
  17. <p>这是一个段落</p>  
  18.   
  19. 这不是预定义文本  
  20. <pre>这是预定义文本</pre>  
  21.   
  22. 这不是引用  
  23. <blockquote>这是引用</blockquote>  
  24.   
  25. <!-- 想在网页上现实“<p>”的字样要怎么办呢？ &lt;p&gt;-->  
  26. <p>&lt;p&gt;标签标识段落文本</p>  
  27.   
  28. </body>  
  29. </html>  

3.字符格式标签

主要用来标识部分文本字符的语义，大部分字符格式标签有具体效果

 ◎ <b>:标识强调文本，效果为加粗

 ◎ <i>:标识引用文本，效果为倾斜

 ◎ <blink>:标识闪烁文本，效果为闪烁（IE浏览器不支持该标签）

 ◎ <big>:标识放大文本，效果为放大

 ◎ <small>:标识缩小文本，效果为缩小

 ◎ <sup>:标识上标文本，效果为上标

 ◎ <sub>:标识下标文本，效果为下标

 ◎ <cite>:标识引用文本，效果为倾斜

示例3：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>字符格式标签</title>  
  6.     <style type="text/css">  
  7.         nav,article {  
  8.             border: solid 1px red;  
  9.             padding: 10px;  
  10.             margin: 6px;  
  11.         }  
  12.         nav{  
  13.             float: left;  
  14.             width: 100px;  
  15.             height :170px;  
  16.         }  
  17.         article{  
  18.             float: left;  
  19.             width: 280px;  
  20.             height: 170px;  
  21.         }  
  22.     </style>  
  23. </head>  
  24. <body>  
  25. <nav>  
  26.     <b>b:强调，加粗</b><br>  
  27.     <i>i:引用，倾斜</i><br>  
  28.     <blink>blink:闪烁</blink><br>  
  29.     <big>big:放大</big><br>  
  30.     <small>small：缩小</small><br>  
  31.     sup:上标，x<sup>2</sup><br>  
  32.     sub:下标，x<sub>2</sub><br>  
  33.     <cite>cite：引用</cite><br>  
  34. </nav>  
  35.   
  36.   
  37. <!-- 使用字符标签显示解方程的过程 -->  
  38. <article>  
  39.     <p>例如，针对下面这个一元二次方程</p>  
  40.     <p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>  
  41.     <p>我们使用<big><b>因式分解法</b></big>来演示解题思路如下：</p>  
  42.     <p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>  
  43.     <p><small>得：</small><br/><i>x</i><sub>1</sub>=1<br/><i>x</i><sub>2</sub>=4</p>  
  44. </article>  
  45.   
  46.   
  47. </body>  
  48. </html>  
效果：

HTML学习小结之HTML标签























4.列表标签

列表分为有序列表和无序列表。

 无序列表使用项目符号来标识列表

有序列表使用编号来标识列表的项目顺序

 ◎ <ul>:标识无序列表

 ◎ <ol>:标识有序列表

 ◎ <li>:标识列表项目

示例4.1：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>列表标签</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 无序列表 -->  
  10. <h1>解一元二次方程</h1>  
  11. <p>一元二次方程有4种解法：</p>  
  12. <ul>  
  13.     <li>直接开平方法</li>  
  14.     <li>配方法</li>  
  15.     <li>公式法</li>  
  16.     <li>因式分解法</li>  
  17. </ul>  
  18. <!-- 有序列表 -->  
  19. <p>一元二次方程有4种解法：</p>  
  20. <ol>  
  21.     <li>直接开平方法</li>  
  22.     <li>配方法</li>  
  23.     <li>公式法</li>  
  24.     <li>因式分解法</li>  
  25. </ol>  
  26. </body>  
  27. </html>  
另外还有特殊结构--定义列表

定义列表包括词条和解释两部分

 ◎ <dl>:标识定义列表

 ◎ <dt>:标识词条

 ◎ <dd>:标识解释

示例4.2：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>列表标签</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 定义列表 -->  
  10. <h1>成语词条列表</h1>  
  11. <dl>  
  12.     <dt>学富五车</dt>  
  13.     <dd>形容读书多,学识丰富。</dd>  
  14.     <dt>才高八斗</dt>  
  15.     <dd>形容人文才高超。</dd>  
  16. </dl>  
  17.   
  18. </body>  
  19. </html>  


5.链接标签

链接标签能从一个页面跳到另一个页面

 ◎ <a>:标识超链接

示例5：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>链接标签</title>  
  6. </head>  
  7. <body>  
  8.   
  9. 1.用a标签定义超链接 <br>  
  10. <!-- 默认是在当前窗口打开 -->  
  11. <a href="http://www.baidu.com">百度</a><br>  
  12.   
  13. <!-- 用_self设置在当前窗口打开，效果和默认一样 -->  
  14. <a href="http://www.baidu.com" target = "_self">百度</a><br>  
  15.   
  16. <!-- 用_blank设置在新窗口打开 -->  
  17. <a href="http://www.baidu.com" target="_blank">百度</a><br>  
  18.   
  19. 2.用a标签定义锚点 <br>  
  20. <!-- 锚点是一类特殊的超链接，可以定位到页面中某个具体位置 -->  
  21.   
  22. <a href="#btm">跳转到底部</a>  
  23. <div id = "box" style="height:2000px;border:solid 1px red;">撑开浏览器滚动条</div>  
  24. <span id="btm">底部锚点位置</span>  
  25.   
  26. </body>  
  27. </html>  

6.多媒体标签

用于引入外部多媒体文件

 ◎ <img/>:引入图片

 ◎ <embed>:引入多媒体

 ◎ <object>:引入多媒体

7.表格标签

 ◎ <table>:定义表格结构

 ◎ <caption>:定义表格标题

 ◎ <th>:定义表头

 ◎ <tr>:定义表格行

 ◎ <td>:定义表格单元格

示例7：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>表格标签</title>  
  6. </head>  
  7. <body>  
  8. <!-- 使用表格结构显示5行3列的数据集 -->  
  9. <table summary="随便来个矩阵吧">  
  10.     <caption>一个4*3的矩阵</caption>  
  11.     <tr>  
  12.         <th>第一列</th>  
  13.         <th>第二列</th>  
  14.         <th>第三列</th>  
  15.     </tr>  
  16.     <tr>  
  17.         <td>A<sub>11</sub></td>  
  18.         <td>A<sub>12</sub></td>  
  19.         <td>A<sub>13</sub></td>  
  20.     </tr>  
  21.     <tr>  
  22.         <td>A<sub>21</sub></td>  
  23.         <td>A<sub>22</sub></td>  
  24.         <td>A<sub>23</sub></td>  
  25.     </tr>  
  26.     <tr>  
  27.         <td>A<sub>31</sub></td>  
  28.         <td>A<sub>32</sub></td>  
  29.         <td>A<sub>33</sub></td>  
  30.     </tr>  
  31.     <tr>  
  32.         <td>A<sub>41</sub></td>  
  33.         <td>A<sub>42</sub></td>  
  34.         <td>A<sub>43</sub></td>  
  35.     </tr>  
  36. </table>  
  37.   
  38. </body>  
  39. </html>  
效果：

HTML学习小结之HTML标签




8.表单标签

用来制作交互式表单

 ◎ <from>:定义表单结构

 ◎ </input>:定义文本域、按钮和复选

 ◎ <textarea>:定义多行文本框

 ◎ <select>:定义下拉列表

 ◎ <option>:定义下拉列表中的选择项目

示例8：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>表单标签</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <form id = "form1" name = "form1" method="post" action="">  
  10.     <!-- 暂时只是用标签做出一个样子，具体的功能还需要其他设置 -->  
  11.     <p>  
  12.         单行文本域：<!-- 单行文本域写单行 -->  
  13.         <input type="text" name="textfield" id="passwordfield"/>  
  14.     </p>  
  15.     <p>  
  16.         密码域：  
  17.         <input type="password" name="passfield" id="passwordfield"/>  
  18.     </p>  
  19.     <p>  
  20.         多行文本域：<!-- 多行文本域可以写多行 -->  
  21.         <textarea name="textareafield" id="textareafield"></textarea>  
  22.     </p>  
  23.     <p>  
  24.         复选框：<!-- 复选框就是可以多选的 -->  
  25.         复选框1 <input type="checkbox" name="checkbox1" value=""/>  
  26.         复选框2 <input type="checkbox" name="checkbox2" value=""/>  
  27.         复选框3 <input type="checkbox" name="checkbox3" value=""/>  
  28.     </p>  
  29.     <p>  
  30.         单选按钮：  
  31.         <input type="radio" name="radio1" value=""/>按钮1  
  32.         <input type="radio" name="radio2" value=""/>按钮2  
  33.         <input type="radio" name="radio3" value=""/>按钮3  
  34.     </p>  
  35.     <p>  
  36.         下拉菜单：  
  37.         <select name="selectlist">  
  38.             <option value="1">选项 1</option>  
  39.             <option value="2">选项 2</option>  
  40.             <option value="3">选项 3</option>  
  41.         </select>  
  42.     </p>  
  43.     <p><input type="submit" name="button" id="button" value="提交"/></p>  
  44. </form>  
  45.   
  46. </body>  
  47. </html>  
效果：

HTML学习小结之HTML标签

相关推荐