欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html标签练习

程序员文章站 2022-03-07 19:40:43
...
<!DOCTYPE html>
<html>
<head>
<title>第一节课作业</title>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5;url=https://www.ailaiyun.com" />
<meta http-equiv="refresh" content="5" />
<meta http-equiv="keywords" content="html学习,html标签练习" />
<meta http-equiv="description" content="大前端第一节课作业练习">
<link rel="icon" href="./img/unknown.jpg">
<link rel="stylesheet" type="text/css" href="./*.css">
<script src="./*.js"></script>
</head>
<body>
<h1>作业内容</h1>
<h2>文本标签</h2>
<p>这是段落标签</p>
<b>这是加粗标签</b>
<strong>强调某段文本</strong>
<em>同样是强调某段文本</em>
<i>斜体标签</i>
<br/>
<hr>
<u>下划线标签</u>
<del>删除线标签</del>
<sub>下标标签</sub>
<sup>上标标签</sup>
<dialog>交互式空间、可见的或者隐藏的补充细节</dialog>
<pre>原格式输出</pre>
<figure>用于对元素进行组合。多用于图片与图片描述组合</figure>
<mark>标记文本</mark>
<figure>
<img src="img.gif" alt="figure标签"  title="figure标签" />
<figcaption>figure的标题</figcaption>
</figure>
<h2>列表标签</h2>
<ul>
<li>ul第一行</li>
<li>ul第二行</li>
</ul>
<ol>
<li>ol第一行</li>
<li>ol第二行</li>
</ol>
<dl>
<dt>开头1</dt>
<dd>正文1</dd>
<dt>开头2</dt>
<dd>正文2</dd>
</dl>
<h2>超链接标签</h2>
<a href="http://www.ailaiyun.com" target="_blank">新窗口打开链接</a>
<a href="http://www.ailaiyun.com" target="_self">当前窗口打开链接</a>
<h2>多媒体标签</h2>
<img src="" alt="图片标签">
<audio src="">音频标签</audio>
<video src="">视频标签</video>
<progress>进度条</progress>
<h2>表格标签</h2>
<table border="1">
<caption>标题</caption>
<tr>
<th>第一行</th>
<td>第一行1</td>
<td>第一行2</td>
</tr>
<tr>
<th>第二行</th>
<td>第二行1</td>
<td>第二行2</td>
</tr>
</table>
<h2>表单相关标签</h2>
<form>
<input type="text" placeholder="文本输入框">
<br>
<input type="password" placeholder="密码输入框">
<br>
<input type="checkbox" />多选框
<br>
<input type="radio" />单选框
<br>
<input type="file" />
<br>
<button type="submit">提交按钮</button>
<button type="button">按钮</button>
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<select>
<option value="下拉列表1">下拉列表1</option>
<option value="下拉列表2">下拉列表2</option>
<option value="下拉列表3">下拉列表3</option>
</select>
<h3>h5新增的类型</h3>
<input type="email" name="" value="" placeholder="邮箱"/>
<input type="url" name="" value="" placeholder="地址"/>
<input type="number" name="" value="" placeholder="数字"/>
<input type="range" name="" value="" />
<input type="search" name="" value="" placeholder="搜索框"/>
<input type="color" name="" value="" />
<input type="tel" name="" value="" placeholder="电话"/>
<input type="date" name="" value="" />
<input type="time" name="" value="" />
<input type="week" name="" value="" />
<input type="month" name="" value="" />
<input type="datetime-local" name="" value="" />
</form>
</body>
<footer>

</footer>
</html>


上一篇： 云南最好吃的云腿月饼是哪家（去昆明这3家月饼一定要去吃）

下一篇： PHP正则获取页面所有图片地址

推荐阅读