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>
扫一扫
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
