HTML常用元素小结

最新推荐文章于 2024-01-03 14:06:52 发布

疯了！贵宝

最新推荐文章于 2024-01-03 14:06:52 发布

阅读量2.3k

点赞数 2

分类专栏： ♦ 进阶之路 ……【Web前端】 ……【总结&小结】 ♦ 项目实战文章标签： html 标签

本文链接：https://blog.csdn.net/haovip123/article/details/40654319

版权

♦ 进阶之路同时被 3 个专栏收录

37 篇文章 1 订阅

订阅专栏

♦ 项目实战

29 篇文章 0 订阅

订阅专栏

……【总结&小结】

8 篇文章 0 订阅

订阅专栏

HTML（Hypertext Markup Language）超文本标记语言，常用于描述网页文档。我们比较常用的www万维网即是由HTML编写，学习完HTML这一部分后，对HTML中的常用元素做一下小结，用来理清思绪。

HTML的元素由一对或多对标签组成，标签的出现大大提高了HTML的编译效率，结合表格和表单进行排版布局，整个web页面就大致行程了。先来看一副导图大致了解一下，然后在配合实例来介绍一下。（点击图片查看大图）

标签

HTML 标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，结束标签是被括号包围的斜杠和元素名，某些 HTML 元素没有结束标签，比如 <br /> 。

段落控制标签

		<html>
			<head><title>静夜思</title></head>
		   <body>
			<P align="center">
			静夜思<br>
				作者李白
			<hr color="blue">
			<P align="center">
			床前明月光，疑是地上霜。<br>
			举头望明月，低头思故乡。
		   </body>
                </html>

注意：
浏览器在解析HTML文档中时，把连续多个空白字符（空格、制表符、回车、换行等），只解析为一个空格字符。

与文本相关标签

			<html>
				<head><title>静夜思</title></head>
				<body>
				<center>
					<h2><font color="red">静夜思</font></h2>
						<b>作者:李白</b>
					<hr color="blue">
					<p>
					<b><i><font color="green" size="3">床前明月光，疑是地上霜。<br>
					举头望明月，低头思故乡。</font><i></b>
				</center>
				</body>
			</html>

表格

<html>
	<head><title>表格的例子</title></head>
	<body>
		<table border="1" align="center" bgcolor="#ffdddd"
			<center><caption>2004年度期末考试成绩单</caption></center>
			<tr align="center" valign="middle">
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
			<tr align="center" valign="middle">
				<td>张三</td>
				<td>45</td>
				<td>56</td>
				<td>48</td>					
			</tr>
			<tr align="center" valign="middle">
				<td>李四</td>
				<td>89</td>
				<td>88</td>
				<td>99</td>					
			</tr>
		</table>
	</body>
</html>

效果图如下：

表单

	<body>
		<form method="get" action="reg.jsp">
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="user" value="游客" size="30"><td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd"><td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>	
						<input type="radio" name="sex" value="0" checked>男
						<input type="radio" name="sex" value="1" checked>女
					</td>
				</tr>
				<tr>
					<td>兴趣爱好</td>
					<td>	
					<input type="checkbox" name="interset" value="football">足球
					<input type="checkbox" name="interset" value="basketball">篮球
					<input type="checkbox" name="interset" value="volleyball">排球
					<input type="checkbox" name="interset" value="swim">游泳
					</td>
				<tr>
					<td>最高学历</td>
					<td>	
					<select size="1" name="education">
			
					</td>
				</tr>
				<tr>			
					<td valign="top">个人简介：</td>
					<td><textarea name="personal" rows="5" cols="30">个人简介</textarea></td>
				</tr>
				<tr>			
					<td><input type="reset" value="重新"></td>
					<td><input type="submit" value="注册"></td>
				</tr>
			</table>
		</form>
	</body>		
</html>

效果图如下：