HTML学习小结之HTML标签

来源：互联网发布：微信营销游戏源码编辑：程序博客网时间：2024/05/21 17:18

1.文档结构标签

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

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

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

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

示例1：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档结构标签</title></head><body>网页正文写在这里</body></html>

2.文本格式标签

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

◎ <title>:标识网页标题

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

◎ <p>:段落

◎ <pre>:预定义文本

◎ <blockquote>:引用

示例2：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>文本格式标签</title></head><body><h1>这是一级标题</h1><!-- <br> --><h2>这是二级标题</h2><!-- <br> --><h3>这是三级标题</h3><!-- <br> --><h4>这是四级标题</h4><!-- <br> --><h5>这是五级标题</h5><!-- <br> --><h6>这是六级标题</h6><!-- <br> -->这不是一个段落<p>这是一个段落</p>这不是预定义文本<pre>这是预定义文本</pre>这不是引用<blockquote>这是引用</blockquote><!-- 想在网页上现实“<p>”的字样要怎么办呢？ &lt;p&gt;--><p>&lt;p&gt;标签标识段落文本</p></body></html>

3.字符格式标签

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

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

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

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

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

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

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

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

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

示例3：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>字符格式标签</title><style type="text/css">nav,article {border: solid 1px red;padding: 10px;margin: 6px;}nav{float: left;width: 100px;height :170px;}article{float: left;width: 280px;height: 170px;}</style></head><body><nav><b>b:强调，加粗</b><br><i>i:引用，倾斜</i><br><blink>blink:闪烁</blink><br><big>big:放大</big><br><small>small：缩小</small><br>sup:上标，x<sup>2</sup><br>sub:下标，x<sub>2</sub><br><cite>cite：引用</cite><br></nav><!-- 使用字符标签显示解方程的过程 --><article><p>例如，针对下面这个一元二次方程</p><p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p><p>我们使用<big><b>因式分解法</b></big>来演示解题思路如下：</p><p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p><p><small>得：</small><br/><i>x</i><sub>1</sub>=1<br/><i>x</i><sub>2</sub>=4</p></article></body></html>

效果：

4.列表标签

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

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

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

◎ <ul>:标识无序列表

◎ <ol>:标识有序列表

◎ <li>:标识列表项目

示例4.1：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>列表标签</title></head><body><!-- 无序列表 --><h1>解一元二次方程</h1><p>一元二次方程有4种解法：</p><ul><li>直接开平方法</li><li>配方法</li><li>公式法</li><li>因式分解法</li></ul><!-- 有序列表 --><p>一元二次方程有4种解法：</p><ol><li>直接开平方法</li><li>配方法</li><li>公式法</li><li>因式分解法</li></ol></body></html>

另外还有特殊结构--定义列表

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

◎ <dl>:标识定义列表

◎ <dt>:标识词条

◎ <dd>:标识解释

示例4.2：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>列表标签</title></head><body><!-- 定义列表 --><h1>成语词条列表</h1><dl><dt>学富五车</dt><dd>形容读书多,学识丰富。</dd><dt>才高八斗</dt><dd>形容人文才高超。</dd></dl></body></html>

5.链接标签

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

◎ <a>:标识超链接

示例5：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>链接标签</title></head><body>1.用a标签定义超链接 <br><!-- 默认是在当前窗口打开 --><a href="http://www.baidu.com">百度</a><br><!-- 用_self设置在当前窗口打开，效果和默认一样 --><a href="http://www.baidu.com" target = "_self">百度</a><br><!-- 用_blank设置在新窗口打开 --><a href="http://www.baidu.com" target="_blank">百度</a><br>2.用a标签定义锚点 <br><!-- 锚点是一类特殊的超链接，可以定位到页面中某个具体位置 --><a href="#btm">跳转到底部</a><div id = "box" style="height:2000px;border:solid 1px red;">撑开浏览器滚动条</div><span id="btm">底部锚点位置</span></body></html>

6.多媒体标签

用于引入外部多媒体文件

◎ <img/>:引入图片

◎ <embed>:引入多媒体

◎ <object>:引入多媒体

7.表格标签

◎ <table>:定义表格结构

◎ <caption>:定义表格标题

◎ <th>:定义表头

◎ <tr>:定义表格行

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

示例7：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>表格标签</title></head><body><!-- 使用表格结构显示5行3列的数据集 --><table summary="随便来个矩阵吧"><caption>一个4*3的矩阵</caption><tr><th>第一列</th><th>第二列</th><th>第三列</th></tr><tr><td>A<sub>11</sub></td><td>A<sub>12</sub></td><td>A<sub>13</sub></td></tr><tr><td>A<sub>21</sub></td><td>A<sub>22</sub></td><td>A<sub>23</sub></td></tr><tr><td>A<sub>31</sub></td><td>A<sub>32</sub></td><td>A<sub>33</sub></td></tr><tr><td>A<sub>41</sub></td><td>A<sub>42</sub></td><td>A<sub>43</sub></td></tr></table></body></html>

效果：

8.表单标签

用来制作交互式表单

◎ <from>:定义表单结构

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

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

◎ <select>:定义下拉列表

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

示例8：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>表单标签</title></head><body><form id = "form1" name = "form1" method="post" action=""><!-- 暂时只是用标签做出一个样子，具体的功能还需要其他设置 --><p>单行文本域：<!-- 单行文本域写单行 --><input type="text" name="textfield" id="passwordfield"/></p><p>密码域：<input type="password" name="passfield" id="passwordfield"/></p><p>多行文本域：<!-- 多行文本域可以写多行 --><textarea name="textareafield" id="textareafield"></textarea></p><p>复选框：<!-- 复选框就是可以多选的 -->复选框1 <input type="checkbox" name="checkbox1" value=""/>复选框2 <input type="checkbox" name="checkbox2" value=""/>复选框3 <input type="checkbox" name="checkbox3" value=""/></p><p>单选按钮：<input type="radio" name="radio1" value=""/>按钮1<input type="radio" name="radio2" value=""/>按钮2<input type="radio" name="radio3" value=""/>按钮3</p><p>下拉菜单：<select name="selectlist"><option value="1">选项 1</option><option value="2">选项 2</option><option value="3">选项 3</option></select></p><p><input type="submit" name="button" id="button" value="提交"/></p></form></body></html>

效果：

2 0