HTML学习小结之HTML标签
2016-09-13 21:15
441 查看
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>”的字样要怎么办呢? <p>--> <p><p>标签标识段落文本</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>效果:
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- HTML5 语音波形显示,编辑,上传,下载
- 原生js结合html5制作小飞龙的简易跳球