博客列表 >HTML基本术语、文档结构、常用标签总结——2019年7月1日22时01分

HTML基本术语、文档结构、常用标签总结——2019年7月1日22时01分

嘿哈的博客
嘿哈的博客原创
2019年07月03日 19:34:39633浏览


默写HTML的文档结构

实例

<!DOCTYPE HTML> 
<!-- HTML声明 -->
<html lang="en"> 
    <head>
        <meta charset="UTF-8"> <!-- 规定HTML文档的字符编码 -->
        <title>网页标题</title>
    </head>
    <body>
    <!-- 此处为网站的内容 -->
    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例演示无序列表的基本使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无序列表</title>
</head>
<body>
	<ul>
		<li>这里是一</li>
		<li>这里是二</li>
		<li>这里是三</li>
		<li>这里是四</li>
		<li>这里是五</li>
	</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例演示表格的用法以及行列合并的应用

实例演示表格的用法以及行列合并的应用

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无序列表</title>
</head>
<body>
	<table border="1" width="500">
	<caption>购物清单</caption>
	<!-- <thead> -->
		<tr><!-- 第一行  -->
			<td rowspan="3">购物车</td>
			<td>名称</td>
			<td>数量</td>
			<td>单价</td>
			<td>小计</td>
		</tr>
	<!-- </thead> -->
<!-- 	<tbody> -->
		<tr><!-- 第二行  -->
			<td>鸡蛋</td>
			<td>10</td>
			<td>¥1.0</td>
			<td>¥10元</td>
		</tr>
		<tr><!-- 第三行  -->
			<td>火腿肠</td>
			<td>5</td>
			<td>¥1.0</td>
			<td>¥5元</td>
		</tr>
<!-- 	</tbody> -->
<!-- 	<tfoot> -->
		<tr><!-- 第四行  -->
			<td colspan="4" align="center">总计</td>
			<td>¥15元</td>
		</tr>
<!-- 	</tfoot> -->
	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例演示表单以及常用控件元素的

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
    <h3>用户注册</h3>
    <form action="" method="GET" name="registered">
    	<P>
    		<label for="username">账号:</label>
    		<input type="text" name="username" id="username">
    	</P>
    	<p>
    		<label for="password">密码:</label>
    		<input type="password" name="password" id="password">
    	</p>
    	<p>
    		<label for="email">邮箱:</label>
    		<input type="email" name="email" id="email" placeholder="examlp@mail.com" >
    	</p>
    	<p>
    		<label for="age">年龄:</label>
    		<input type="number" name="age" id="name" >
    	</p>
    	<p>
    		<label for="birthday">生日:</label>
    		<input type="date" name="birthday" id="birthday">
    	</p>
    	<p>
    		<label for="lanqiu">爱好:</label>
    		<input type="checkbox" name="hobby[]" value="lanqiu" id="lanqiu" checked>
    		<label for="lanqiu">打篮球</label>
    		<input type="checkbox" name="hobby[]" value="read" id="read" >
    		<label for="read">看书</label>
    		<input type="checkbox" name="hobby[]" value="football" id="football" >
    		<label for="football">踢足球</label>
    	</p>
    	<p>
    		<label for="man">性别:</label>
    		
    		<input type="radio" name="xingbie" id="man" value="man">
    		<label for="man">男</label>
    		
    		<input type="radio" name="xingbie" id="woman" value="woman">
    		<label for="woman">女</label>

    	</p>
    	<p>
    		<label for="beizhu">备注:</label>
    		<textarea name="beizhu" id="beizhu" cols="30" rows="10" maxlength="50" placeholder="不超过五十个字符" ></textarea>
    	</p>
    	<p>
    		<input type="submit" name="tijiao" value="提交注册">
    		<input type="reset" name="reset" value="重置">
    	</p>

    </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议