一、head标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="icon" href="https://www.jd.com/favicon.ico">
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
</head>
<body>
yuan
</body>
</html>
二、基本标签
<!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>
<hr>
<h3>鹅鹅鹅</h3>
鹅鹅鹅,<br>
曲项向天歌,<br>
白毛浮绿水,<br>
红掌拨清波.
<hr>
<h3>鹅鹅鹅</h3>
<p>鹅 鹅鹅,</p>
<p>曲项向天歌,</p>
<p>白毛浮绿水,</p>
<p>红掌拨清波.</p>
<hr>
ALEX <b>ALEX</b> <strong>ALEX</strong> <i>ALEX</i> <strong><i>ALEX</i></strong>
2 <sub>3</sub>
2 <sup>3</sup>
<hr>
π
</body>
</html>
三、div和span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 28px;
font-weight: bolder;
color: red;
background-color: green;
font-style: italic;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
alex
<div>alex</div>
<span>alvin</span>
<span>egon</span>
</body>
</html>
四、常用标签（img和超链接、列表标签、表格标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>img和超链接标签</h3>
<a href="http://127.0.0.1:8800" target="_blank">点击</a>
<a href="http://127.0.0.1:8800" target="_blank"><img src="meinv.jpg" alt="美女" title="美女图片" height="600" width="960"></a>
<h3>列表标签</h3>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<ol>
<li>111</li>
<li>111</li>
<li>111</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>保定</dd>
<dd>石家庄</dd>
<dd>廊坊</dd>
</dl>
<h3>表格标签</h3>
<table border="1" cellspacing="5" cellpadding="3" style="border: 1px solid red">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>薪水</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>23</td>
<td rowspan="2">3000</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">张三 23</td>
<td>3000</td>
</tr>
</tbody>
</table>
</body>
</html>
五、表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>注册页面</h3>
<form action="http://127.0.0.1:8800" method="post">
<p>
<label for="abc">姓名</label>
<input type="text" name="user" id="abc" maxlength="5">
</p>
<p>密码 <input type="password" name="pwd" ></p>
<div>
爱好:
<input type="checkbox" name="hobby" value="lanqiu" checked>篮球
<input type="checkbox" name="hobby" value="zuqiu">足球
<input type="checkbox" name="hobby" value="shuangseqiu">双色球
</div>
<div>
性别:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="qita">其他
</div>
<input type="hidden" name="token" value="123asd2342">
<!--<input type="file">-->
<div>
籍贯:
<select name="pro" size="3" multiple>
<option value="hebei">河北省</option>
<option value="hunan" selected="selected">湖北省</option>
<option value="beijing" selected="selected">北京省</option>
</select>
</div>
<div>
<textarea name="per" cols="50" rows="10" placeholder="个人简介"></textarea>
</div>
<hr>
<div>
<input type="button" value="按钮" onclick="alert(123)">
<input type="reset">
</div>
<input type="submit">
</form>
</body>
</html>
原文地址：https://www.cnblogs.com/youhongliang/p/12233455.html
时间： 2024-08-11 09:56:42