一、HTML结构标签
标签名称 |
标签用途 |
!DOCTYPE |
文档类型 |
html |
HTML标识 |
head |
网页头部 |
title |
网页标题 |
body |
网页主体 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二、块级标签(特点:独占一行)
标签名称 |
标签用途 |
h1 |
一级标题 |
h2 |
二级标题 |
h3 |
三级标题 |
h4 |
四级标题 |
h5 |
五级标题 |
h6 |
六级标题 |
p |
定义段落 |
ul 括 li |
无序列表 |
ol 括 li |
有序列表 |
dl 括 dt 括 dd |
目录定义 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
<ul>
<li>齐国</li>
<li>楚国</li>
<li>秦国</li>
<li>燕国</li>
<li>赵国</li>
<li>魏国</li>
<li>韩国</li>
</ul>
<ol>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙僧</li>
</ol>
<dl>
<dt>
第一单元
<dd>
第一课
</dd>
<dd>
第二课
</dd>
<dd>
第三课
</dd>
</dt>
<dt>
第二单元
<dd>
第一课
</dd>
<dd>
第二课
</dd>
<dd>
第三课
</dd>
</dt>
<dt>
第三单元
<dd>
第一课
</dd>
<dd>
第二课
</dd>
<dd>
第三课
</dd>
</dt>
</dl>
</body>
</html>
运行效果:(内容各占一)
三、行内标签
标签名称 |
标签用途 |
a |
超链接 |
img |
图片标签 |
span |
少量文本 |
i |
少量文本 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--target 是打开窗口的方式,默认的值是self 当前窗口打开页面, blank是新窗口打开页面 -->
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<img src="图片路径"/>
<img src="图片路径"/>
<span>新浪</span>
<span>百度</span>
<span>网易</span>
<i>酷狗</i>
<i>搜狐</i>
<i>麦麦</i>
</body>
</html>
运行效果:(内容同行显示,满屏则自动换行)
四、表格
标签 |
标签解释 |
table |
表格 |
tr |
行 |
th |
表头列 |
td |
表身列 |
thead |
表头 |
tbody |
表身 |
tfoot |
表尾 |
常用属性:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="4" width="500">
<thead>
<tr>
<th>尺码/服装</th>
<th>已售</th>
<th>库存</th>
<th>破损</th>
<th>所属单位</th>
</tr>
</thead>
<tBody>
<tr>
<th>XS</th>
<td>34</td>
<td>45</td>
<td>3</td>
<td rowspan="7">昆明麦麦科技</td>
</tr>
<tr>
<th>S</th>
<td>65</td>
<td>45</td>
<td>0</td>
</tr>
<tr>
<th>M</th>
<td>45</td>
<td>65</td>
<td>2</td>
</tr>
<tr>
<th>L</th>
<td>65</td>
<td>45</td>
<td>4</td>
</tr>
<tr>
<th>XL</th>
<td>67</td>
<td>45</td>
<td>0</td>
</tr>
<tr>
<th>XXL</th>
<td>65</td>
<td>45</td>
<td>1</td>
</tr>
<tr>
<th>合计</th>
<td colspan="3">504(件)</td>
</tr>
</tBody>
</table>
</body>
</html>
运行效果:
五、form表单
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="表单请求地址http://sfcae.top/LOGIN" method="请求方式post或者get">
<input type="radio">
<input type="text" name="name1">
<input type="button" value="name2">
<input type="checkbox" name="name3">
<input type="color" name="name4">
<input type="date" name="name5">
<input type="datetime" name="name6">
<input type="email" name="name7">
<input type="password" name="name8">
<input type="submit">
<input type="reset">
</form>
</body>
</html>
运行效果: