html基本标签

时间:2023-01-13
本文章向大家介绍html基本标签，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF-8">
	<meta name="description" content="爱Zyn的一切">
	<!-- 搜索内容描述 -->
	<meta name="keywords" content="亲亲，抱抱，摸摸">
	<!-- 搜索关键字 -->
	<title>Zzh -Web</title>
	<!-- 标题 -->
	<link rel="icon" href="/first/img/logo.jpg">
	<!-- 图标 -->
</head>

<body>
	<span>Hello</span>
	<span>World</span>
	<!-- 行 -->
	<div>Hellow</div>
	<div>World</div>
	<!-- 块 -->
	<h1>Hellow World</h1>
	<h2>Hellow World</h2>
	<h3>Hellow World</h3>
	<h4>Hellow World</h4>
	<h5>Hellow World</h5>
	<h6>Hellow World</h6>
	<!-- 标题 -->
	<p>在这之前，我从来不曾如此渴望拥有什么东西。 &nbsp;
		就像遇见你之前，我不懂什么是喜欢，什么是心动。</p>
	<p>在这之前，我从来不曾如此渴望拥有什么东西。<br>
		就像遇见你之前，我不懂什么是喜欢，什么是心动。</p>
	<hr>
	<i>斜体</i>
	<ins>下划线</ins>
	<del>删除线</del>
	<b>加粗</b>
	<strong>加粗</strong>
	<mark>标记</mark>
	<hr>
	<pre>
#include &lt;bits/stdc++.h&gt;
using namespace std;
signed main()
{
    cout << "我爱你，zyn";
    retrun 0;
}
</pre>

	<!-- 多个照片一行存不下，就会自动换行 -->
	<img src="/first/img/first.png" alt="图片被删除" width="300">
	<img src="/first/img/first.png" alt="图片被删除" width="300">
	<img src="/first/img/first.png" alt="图片被删除" width="300">

	<audio controls src="/first/videos/踏山河5.mp3">Con't Begin</audio>
	<hr>
	<audio controls>
		<source src="/first/videos/踏山河5.mp3" type="atdio/mpeg">
		<source src="/first/videos/踏山河5.mp3" type="atdio/mpeg">
	</audio>
	<video controls src="/first/videos/亲嘴.mp4" width="300">Con't Begin</video>
	<hr>
	<a href="https://www.cnblogs.com/zzh1206/p/16739548.html" target="_blank">爱诺</a>
	<a href="/about.html">about</a>
	<a href="https://www.cnblogs.com/zzh1206/p/16739548.html" target="_blank">
		<img src="/first/img/first.png" alt="图片被删除" width="100">
	</a>
	<hr>
	<h1>Form</h1>
	<form action="/about.html">
		<label for="username">用户名</label>
		<input type="text" name="username" id="username" maxlength="4" minlength="3" placeholder="用户名">
		<br>
		<label for="password">密码</label>
		<input type="password" name="password" id="password">
		<br>
		<label for="age">年龄</label>
		<input type="number" name="age" id="age">
		<br>
		<label for="email">邮箱</label>
		<input type="email" name="eamil" id="email" required>
		<br>
		<label for="C++">C++</label>
		<input type="radio" name="lang" id="C++" value="C++">
		<label for="Python">Python</label>
		<input type="radio" name="lang" id="Python" value="Python">
		<label for="Jave">Java</label>
		<input type="radio" name="lang1" id="Java" value="Java">
		<br>
		<label for="open">打开文件</label>
		<input type="file" name="open" id="open">
		<br>
		<label for="resume">个人简介</label>
		<textarea name="resume" id="resume" cols="30" rows="10"></textarea>
		<br>
		<select name="language" id="language">
			<option value="">请选择</option>
			<!-- 保证默认为空 -->
			<option selected value="C++">C++</option>
			<option value="Java">Java</option>
			<option value="Python">Python</option>

		</select>

		<button type="submit">提交</button>
	</form>
	<hr>
	<h1>List</h1>
	<ul>
		<li>first</li>
		<ol>
			<li>心动打破原则</li>
			<li>喜欢没有标准</li>
		</ol>
		<li>second</li>
		<li>thrid</li>
	</ul>
	<hr>
	<h1>Table</h1>

	<table>
		<caption>经历</caption>
		<thead>
			<tr>
				<th>Name</th>
				<th>Picture</th>
				<th>Video</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>zzh</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>zyn</td>
				<td>2</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>
	<hr>

	<h1>语义标签</h1>
	<header>
		<h1>我的收藏夹</h1>
		<nav>
			<ul>
				<li><a href="first.html">初识</a></li>
				<li><a href="second.html">熟悉</a></li>
				<li><a href="third.html">相爱</a></li>
			</ul>
		</nav>
	</header>
	<hr>
	<section>
		<figure>
			<img src="/first/img/first.png" alt="图片被删除" width="100">
			<figcaption>logo</figcaption>
			<img src="/first/img/logo.jpg" alt="图片被删除" width="100">
			<figcaption>合照</figcaption>
		</figure>
	</section>
	<hr>
	<h1>文章</h1>
	<section>
		<article>
			<h3>喜欢</h3>
			<p>喜欢喜欢喜欢喜欢喜欢喜欢喜欢喜欢</p>
			<p>喜欢喜欢喜欢喜欢喜欢喜欢喜欢喜欢</p>
		</article>
		<article>
			<h3>爱</h3>
			<p> 爱爱爱爱爱爱爱爱爱爱爱爱爱爱爱 </p>
			<p> 爱爱爱爱爱爱爱爱爱爱爱爱爱爱爱 </p>
		</article>
	</section>

	<hr />
	<footer>
		&copy;2100-01-13
	</footer>
	<hr>
	&lt; &gt; &amp; &quot; &reg; &copy; &trade; &nbsp;
</body>

</html>

原文地址：https://www.cnblogs.com/zzh1206/p/17049197.html

随机文章
WEB前端知识点必读
最近更新