HTML总结

最新推荐文章于 2025-06-04 22:36:18 发布

CathyDuangDuang

最新推荐文章于 2025-06-04 22:36:18 发布

阅读量488

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wyj19950908/article/details/77771464

本文介绍了HTML的基本概念及其常用标签，包括文本格式化、列表、表格和表单等，并通过实例展示了如何利用这些标签构建简单的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前言】之前在C#中就简单接触了一下HTML，当时觉得非常好玩，解开了网页的神秘面纱，通过新闻发布系统的学习了解到了一个漂亮的网页不仅仅是靠HTML标签来实现还有CSS、JavaScript等辅助实现的，这一次对于HTML中的各种常用的标签有了更近一步的了解。

一、HTML是什么

HTML是超文本标记语言，标准通用标记语言的下一个应用。所谓超文本就是指页面内可以包含图片、链接，甚至是音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

二、常用标记

1.基本结构

2.其他常用标签

1. 换行
2. …使文本粗体
3. …使文本斜体
4. …size设置字体大小，Color设置字体颜色
5. <center>…</center>使文本居中
6. <ol>和<li>创建带数字编号的列表

<ol>标签中使用start属性，设置起始的序号

<li>标签中使用value属性，改变列表内的编号顺序

使用效果如下：

	<html>
			<ol start="1">
				<li>《思维导图》
				<li>《时间管理》
				<li>《快速阅读》
				<li>《六顶思维帽》
				<li>《你的知识需要管理》
				<li>《七年就是一辈子》
			</ol>
			
			<ol type="I">
				<li>《思维导图》
				<li>《时间管理》
				<li>《快速阅读》
				<li>《六顶思维帽》
				<li>《你的知识需要管理》
				<li>《七年就是一辈子》
			</ol>
			
			<ul type="a">
				<li>《思维导图》
				<li>《时间管理》
				<li>《快速阅读》
				<li>《六顶思维帽》
				<li>《你的知识需要管理》
				<li>《七年就是一辈子》
			</ul>
			<ul type="cicle">
				<li>《思维导图》
				<li>《时间管理》
				<li>《快速阅读》
				<li>《六顶思维帽》
				<li>《你的知识需要管理》
				<li>《七年就是一辈子》
			</ul>
			
			<dl>
				<dt>《思维导图》
				<dt>《时间管理》
				<dt>《快速阅读》
				<dt>《六顶思维帽》
				<dt>《你的知识需要管理》
				<dt>《七年就是一辈子》
			</dl>
			
			<dl>
				<dd>《思维导图》
				<dd>《时间管理》
				<dd>《快速阅读》
				<dd>《六顶思维帽》
				<dd>《你的知识需要管理》
				<dd>《七年就是一辈子》
			</dl>
			
			<dl>
				<dt>《思维导图》
				<dd>《时间管理》
				<dt>《快速阅读》
				<dd>《六顶思维帽》
				<dt>《你的知识需要管理》
				<dd>《七年就是一辈子》
			</dl>
	</html>

7)表格

<html>
		<head><title>表格的例子</title></head>
		<body>
				<table border="1" align="center" bgcolor="#ffdddd">
						<caption>2004年度期末考试成绩单</caption>
						<tr align="center" valign="middle">
								<th>姓名</th>
								<th>语文</th>
								<th>数学</th>
								<th>英语</th>
						</tr>
						<tr align="center" valign="middle">
								<td>张三</td>
								<td>00</td>
								<td>48</td>
								<td>59</td>
						</tr>
						<tr align="center" valign="middle">
								<td>琪琪</td>
								<td>98</td>
								<td>67</td>
								<td>90</td>
						</tr>
						<tr align="center" valign="middle">
								<td>尜尜</td>
								<td>88</td>
								<td>47</td>
								<td>79</td>
						</tr>
				</table>
		</body>
</html>

效果：

8)表单和表格结合

<html>
		<head><title>表单的例子</title></head>
		<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="1" checked> 男</td>
									<td><input type="radio" name="sex" value="0">女</td>
								</tr>

								<tr>
									<td>兴趣爱好：</td>
									<td>
											<input type="checkbox" name="interest" value="football">足球
											<input type="checkbox" name="interest" value="basketball">篮球
											<input type="checkbox" name="interest" value="volleyball">排球
											<input type="checkbox" name="interest" value="swim">游泳
									</td>
								</tr>

								<tr>
									<td>最高学历：</td>
									<td>
											<select size="1" name="education">
											<option value="" selected>...</option>
											<option value="高中" selected>高中</option>
											<option value="大学" selected>大学</option>
											<option value="硕士" selected>硕士</option>
											<option value="博士" selected>博士</option>
									</select>
									</td>
								</tr>
								<tr>
									<td>
										<input type="hidden" name="id" value="001">
										<input type="reset" value="重写">
									  <input type="submit" value="注册">
								  </td>
								</tr>
						 </table>
					</form>
			</table>
		</body>
</html>

效果：