html自行练习测试

自行练习的html

记录一下,使用hbuilder,自动提示代码,写的会非常快,但是很多新的标签,如标签等不会提示,但可以写,一样会显示效果

new_file.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="ytf-8">
		<meta name="keywords" content="java it" />
		<meta name="description" content="this is  a java test" />
		<meta name="author" content="lh" />
		<!-- <meta http-equiv="refresh" contenc="2;ur1=http://www.baidu.com"> -->
		<title>test</title>
		<style type="text/css">
			body {
				color: chocolate;
			}
		</style>
		<!-- <link rel="stylesheet" type="text/css" href="D:\Java workspace\MonkeyShop\WebContent\css\login.css"/> -->
		<!-- 	<script type="text/javascript">
			alert("asdasdasda");
		</script> -->
		<!-- <base href="D:\Java workspace\MonkeyShop\WebContent\css" target="" /> -->

	</head>

	<body bgcolor="aliceblue" text="red">
	
<a href="maito:2928446205@qq.com">contact us</a>
		<a href="https://www.baidu.com">baidu</a>
		<!-- <a href="www.baidu.com" target="_blank">baidu</a>
		<a href="www.baidu.com" target="blank">baidu</a> -->
		<ol>
			<li><a href="#first">jianjie</a></li>
			<li><a href="#second">content</a></li>
		</ol>

		<i>asdas</i>
		<em>
			ssdfsdfsdf
			<input type="password" name="asd" />
		</em>
		welcome to <adddress>中欧班列</adddress>
		<b>qwe</b>
		<strong>wsadfdsf</strong>
		<del>asdas</del>
		<ins>asdasd</ins>
		<sub>asdasd</sub>
		<sup>asdas</sup>
		<bdo dir="rt1">qwe阿斯蒂芬撒地方士大夫qw</bdo>
		<abbr title="Hyper Text Language">HTML</abbr>
		<span title="hdasd">dasd</span>
		<small>daasd</small>
		<big>asdasd</big>

		<h2>
			<form action="" method="get" enctype="application/x-www-form-urlencoded">
				用户名:<input type="text" name="usr_name" id="" value="erha" />
				<br>
				密码:<input type="text" name="usr_password" id="" value="" size="20" maxlength="6" />
				<br>
				年龄:<input type="text" name="age" id="" value="" />

				<hr>
				asdasd
				<br>
				<input type="submit" name="" id="" value="" />
			</form>
			<span>dasdas</span>
			<!-- wweqr qweqwe -->
			&quot;
			&Iota;
			&lt;
			&gt;
			&times;
			&reg;
			&amp;
			<p>https://www.runoob.com/html/html-tutorial.html</p>
		</h2>
		<pre>
			qweqweqweqweqw
		</pre>
		<div id="" style="width:auto; height: 6.25rem;background-color: antiquewhite;">
			导航部分
		</div>
		<div id="" style="width:25rem;height: 6.25rem;background-color: antiquewhite;">
			正文部分
		</div>
		<hr>
		zhiyao 9998 <span style="font-size: initial;color: cadetblue;">998</span>
		<h3>xiaosi</h3>
		<ol type="3">
			<li>chiji</li>
			<li>wanzhe</li>
		</ol>
		<h3>asd</h3>
		<ul type="disc">
			<li>asd</li>
			<li>asdasd</li>
		</ul>
		<ol>
			<p><a href="first">jianjie</a></p>
			<p>this is first</p>
			<p><a href="second">dier</a></p>
			<p>second</p>
		</ol>
		<h3>qs</h3>
		<dl>
			<dt>lol</dt>
			<dd>它是腾讯公司代理的一款网络游戏,中文名称叫英雄联盟</dd>
			<dd>可以分为pc端和移动端</dd>
			<dt>html</dt>
			<dd>是一种用来制作网页额标记语言</dd>
			<dt>java</dt>
			<dd>是一种跨平台的编程语言</dd>
		</dl>
		<hr color="aliceblue">
		<hr size="7" color="aqua">
		<hr color="antiquewhite" width="400px">
		<div id="" style="width:37.5rem;height:3.125rem;background-color:aquamarine;">
			<hr color="red" width="300px" align="right">
		</div>
		<div id="" unselectable="on">
			<img src="C:\Users\29284\Desktop\nk650.png" alt="tupian jia zai shi bai" title="chunfengmotuo">
			<img src="C:\Users\29284\Desktop\nk650.pn" alt="shi bai">
		</div>
		<!-- <div style="width: 80px;height: 80px;background: red;">
			<img src="C:\Users\29284\Desktop\nk650.png" width="auto" height="auto">
		</div> -->
		<div id="first">
			asdasdasdas
		</div>
		<a href="" name="second"></a>
		<p>second</p>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
new_file2.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>document</title>
	</head>
	<body>
		<ol>
			<li><a href="new_file.html">new_file.html</a></li>
			<li><a href="new_file.html#first">this is first</a></li>
		</ol>
		<table border="1" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc"
			background="C:\Users\29284\Desktop\nk650.png" cellspacing="0" cellpadding="20px">
			<tr align="right" valign="top">
				<th>Header</th>
				<th>asdas</th>
				<th>'dasdasda'</th>
			</tr>
			<tr align="center" valign="middle" bgcolor="aqua">
				<td>Data</td>
				<td valign="bottom" bgcolor="aquamarine">hello</td>
				<td>hellp</td>
			</tr>
			<tr valign="bottom">
				<td>hrrr</td>
				<td>asd</td>
				<td>asdasdasda</td>
			</tr>
		</table>
		<table border="1" width="500px" height="300px" cellspacing="" cellpadding="">
			<tr>
				<td colspan="4" align="center">hello</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>hello</td>
				<td>jeee</td>
				<td>asdaas</td>
			</tr>
			<tr>
				<td rowspan="2" colspan="3">asdaasd</td>
				<td>heelo</td>
			</tr>
			<tr>
				<td>sdfssdf</td>
			</tr>
		</table>
		<table border="5" width="600" height="300px" align="center" cellpadding="">
			<caption>
				<h2>students base information</h2>
			</caption>
			<thead bgcolor="aquamarine">
				<th>id</th>
				<th>name</th>
				<th>age</th>
				<th>sex</th>
			</thead>
			<tbody bgcolor="bisque">
				<tr>
					<td>13</td>
					<td>rtr</td>
					<td>43</td>
					<td>woman</td>
				</tr>
				<tr>
					<td>13</td>
					<td>rtr</td>
					<td>43</td>
					<td>woman</td>
				</tr>
				<tr>
					<th>12</th>
					<th>qwe</th>
					<th>12</th>
					<th>man</th>
				</tr>
			</tbody>
			<tfoot bgcolor="brown" align="center">
				<tr>
					<td width="25%">zongji renshu </td>
					<td colspan="1"></td>
				</tr>
			</tfoot>
		</table>
		<h1 align="center">yonghu zhuce</h1>
		<form action="" method="post">
			yonghuming:<input type="text" name="usrname" id="name" value="erhga" />
			<br>
			mima:<input type="text" name="usrpassword" id="password" value="123456" size="20" maxlength="6" />
			<br>
			age:<input type="text" name="usrage" id="age" value="18" />
			<br>
			sex:
			<input type="radio" name="usrsex" id="sex" value="male" />
			<input type="radio" name="usrsex" id="sex" value="female" />
			<br>
			aihao:
			<input type="checkbox" name="hobby" id="hobby1" value="eat" />chifan
			<input type="checkbox" name="hobby" id="hobby2" value="sleep" />shuijiao
			<input type="checkbox" name="hobby" id="hobby3" value="doudou" />dadoudou
			<br>
			touxiang:
			<input type="file" name="usrhead" accept="image/gif" accept="image/jpeg" accept="image/x-png" id="head"
				value="" />
			<input type="hidden" name="userid" id="" value="1234" />
			<br>
			<input type="submit" value="tijiao" />
			<input type="reset" name="" id="" value="chonzhi" />
			<br>
			<input type="datetime" name="" id="" value="123" />
			<input type="email" name="" id="" value="email" />
			<!-- <input type="image" name="" id="" value="image" /> -->
		</form>
		<h1 align="center">
			xuele xuanzhe
		</h1>
		<form action="" method="get">
			xueli:
			<select name="degree">
				<optgroup>
					<option value="0">xuanzhe xueli</option>
					<option value="dazhuan ">dazhuan</option>
					<option value="gaozhong">gaozhong</option>
					<option value="daxue" selected="selected">daxue</option>
				</optgroup>
			</select>
			<br>
			city:
			<select name="city">
				<optgroup label="sahnxi province">
					<option value="taiyuan">taiyuan</option>
					<option value="datong">datong</option>
					<option value="chanzhi">chanzhi</option>
				</optgroup>
				<optgroup label="sichuang province">
					<option value="cdu">cdu</option>
					<option value="nanc">nanc</option>
					<option value="leshang">leshang</option>
				</optgroup>
			</select>

			<hr>
			gerenjianjie:
			<textarea rows="" cols="" name="intrduce"></textarea>
			<hr>
			fuwuxieyi:
			<textarea rows="10" cols="20" name="introduce" readonly="">
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			</textarea>
			<hr>
			<input type="submit" value="tijiao" />
		</form>

		<fieldset id="">
			<legend>individual information</legend>
			<label for="name">yonghuming:</label>
			<input type="text" name="name" id="" value="input usr name" />
			<br>
			<label for="email">email:</label>
			<input type="email" name="" id=" " value="" />
		</fieldset>
		<input type="button" name="" id="" value="anniu" />
		<button type="button"><img width="20" height="20" src="C:\Users\29284\Desktop\nk650.png"></button>
		<fieldset id="">
			<legend>xueyuan:</legend>
			number:<input type="text" name="" id="" value="" />
			<br>
			profession:<input type="text" name="" id="" value="" />
			<br>
			university:<input type="text" name="" id="" value="" />
		</fieldset>
		<iframe src="new_file.html" width="200" height="200" frameborder="1" scrolling="yes">
			<h2>zhuti</h2>
			<hr>
			<a href="new_file.html" target="_top">new file first</a>
			<!-- <a href="new_file.html#second" target="_top">new file <second></second></a> -->
		</iframe>
		<iframe src="new_file2.html" width="600" height="600" frameborder="1" name="hello"></iframe>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
new_file3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file3</title>
	</head>
	<body>
		<articel>
			<header>标题</header>
			<section>
				第一段
			</section>
			<section>
				第二段
			</section>
			<footer>脚注</footer>
		</articel>

		<aside>广告</aside>
		<br>

		<figure>
			<figcaption>log标题</figcaption>
			<img src="../../image/google.png" alt="">
			<img src="../../image/facebook.png" alt="">
		</figure>
		<nav>
			<ul>
				<li><a href="new_file.html">file1</a></li>
				<li><a href="new_file2.html">file2</a></li>
				<li>视频</li>
				<li>图片</li>
				<li>知道</li>
				<li>文库</li>
				<li>贴吧</li>
			</ul>
		</nav>
		welcome <mark>to asd </mark> html!
		<form action="" autocomplete="on" method="post" id="myform">
			<label for="email">youxiang:</label>
			<input type="text" name="email" id="email" value="email" />
			<br>
			<label for="home">gerenzhuye</label>
			<input type="url" name="home" id="home" value="home" />
			<br>
			<label for="dianhua">dianhua:</label>
			<input type="tel" name="phone" id="phone" />
			<br>
			<label for="keyword">关键字</label>
			<input type="search" name="keyword" id="keyword">
			<br>
			<label for="num">数字</label>
			<input type="number" name="num" id="num" min="1" max="10" step="2">
			<br>
			<label for="birthday">出生日期:</label>
			<input type="month" name="birthday" id="birthday">
			<br>
			<label for="color">颜色:</label>
			<input type="color" name="color" id="color">
			<br>
			<label for="usrname">用户名:</label>
			<input type="text" name="name" id="usrname" placeholder="请输入用户名" required="" autocomplete="off">
			<br>
			<label for="age">年龄:</label>
			<input type="text" name="age" id="age" pattern="\d{1,2}">
			<!-- 年龄只能是两位 -->
			<br>
			<label for="city">chengshi</label>
			<input type="text" name="city" id="city" value="" list="citylist" />
			<br>
			<datalist id="citylist">
				<option value="beijing">北京</option>
				<option value="nanjing">南京</option>
				<option value="shanghai">上海</option>
				<option value="tianjin">天津</option>
			</datalist>
			<input type="submit" value="myform" />
		</form>
		<audio controls>
			<source src="../../audio/earth.ogg">
			<source src="../../audio/water.mp3">
			您的浏览器不支持audio标签,请更换浏览器
		</audio>
		<hr>
		<video src="C:\Users\29284\Documents\oCam\录制_2021_12_21_00_14_14_820.mp4" controls width="600px"
			poster="C:\Users\29284\Desktop\nk650.png"></video>

	</body>
</html>

在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟程序员李老板专业码代码三十年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值