本文介绍了HTML的基础概念，包括标签、元素、属性、树状结构以及如何在实践中使用HTML创建用户注册表单、电子汇款单和展示古诗和电影页面。同时强调了语义化和与CSS、JavaScript的结合。
HTML简介
HTML（Hypertext Markup Language，超文本标记语言）是一种用于创建网页的标记语言。它使用标签（tag）来描述网页的结构和内容，并指定元素的样式和行为。以下是一些HTML的概念：
1. 标签（Tag）：HTML文档中的基本单位，用尖括号包围的关键词。例如，`<h1>`表示标题，`<p>`表示段落。
2. 元素（Element）：由开始标签和结束标签包围的内容。例如，`<h1>Hello, World!</h1>`是一个标题元素。
3. 属性（Attribute）：用于提供有关元素的额外信息。例如，`<img src="image.jpg" alt="Image">`中的`src`和`alt`是属性。
4. 树状结构：HTML文档按照树状结构组织，由一个根元素开始，分为父元素和子元素。父元素可以包含其他元素作为子元素。
5. 块级元素（Block-level Elements）：形成页面中的块，独占一行或一个独立的区域，例如段落、标题等。
6. 内联元素（Inline Elements）：与其他内容在同一行上显示，不会独占一行，例如链接、加粗文本等。
7. CSS样式：HTML可以使用CSS（Cascading Style Sheets）来描述元素的外观和布局。
8. 语义化：使用恰当的HTML标记来描述内容的结构和含义，提高网页的可读性、可访问性和搜索引擎优化。
通过使用HTML，开发者可以创建网页的结构、布局和内容，并与CSS和JavaScript等技术结合，使网页具有丰富的交互性和视觉效果。
一、使用HTML编写用户注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
</head>
<body>
<form action="#" method="get">
<table border="1" width="300px">
<thead>
<tr align="center">
<td bgcolor="#ccc" colspan="2">
用户注册
</td>
</tr>
</thead>
<tbody>
<tr>
<td align="right" bgcolor="#ddd">用户名</td>
<td bgcolor="#ddd"><input type="text"></td>
</tr>
<tr>
<td align="right" bgcolor="#ddd">密码</td>
<td bgcolor="#ddd"><input type="password"></td>
</tr>
<tr>
<td align="right" bgcolor="#ddd">性别</td>
<td bgcolor="#ddd">
<input type="radio" name="sex" value="men">男
<input type="radio" name="sex" value="women">女
</td>
</tr>
<tr>
<td align="right" bgcolor="#ddd">爱好</td>
<td bgcolor="#ddd">
<input type="checkbox" name="write" value="men">写作
<input type="checkbox" name="listensong" value="women">听音乐
<input type="checkbox" name="physical" value="women">体育
</td>
</tr>
<tr>
<td align="right" bgcolor="#ddd">省份</td>
<td bgcolor="#ddd">
<select name="province">
<option>陕西省</option>
</select>
</td>
</tr>
<tr>
<td align="right" bgcolor="#ddd">自我介绍</td>
<td align="center" bgcolor="#ddd">
<textarea cols="25" rows="3"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td bgcolor="#ccc" colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
二、完成电子汇款单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>汇款单</title>
</head>
<body>
<h1>工商银行电子汇款单</h1>
<table border="1" width="1500px" cellspacing="0px" cellpadding="5px">
<tr>
<td width="150px" colspan="2"><b>回单类型</b></td>
<td width="600px">网上转账汇款</td>
<td width="150px" colspan="2"><b>指令序号</b></td>
<td width="600px">HQH0000000000000013878172</td>
</tr>
<tr>
<td width="30px" rowspan="4" align="center"><b>收款人</b></td>
<td>户名</td>
<td>老牟</td>
<td width="30px" rowspan="4" align="center"><b>付款人</b></td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td>000000000001</td>
<td><b>卡号</b></td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td><u>钞票</u></td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>1.00元</td>
<td colspan="2"><b>手续费</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td colspan="4">人民币（大写）：壹圆整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td><i>2017年6月1日</i></td>
<td colspan="2"><b>时间戳</b></td>
<td><i>2017-06-01-13.00.00。00000</i></td>
</tr>
</table>
<br>
<div height="30px">票据打印时间：2017-06-01 15:00:12</div>
<br>
<div height="30px"><del>票据打印单位：江苏徐州业务中心</del></div>
<br>
<div height="30px">操作员：大曾</div>
</body>
</html>
三、古诗页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李白诗词</title>
</head>
<body>
<h1>将进酒 <small>君不见黄河之水天上来</small></h1>
<table>
<tr>
<td>
<img src="李白.webp" alt="李白" height="690" width="540">
</td>
<td>
<pre>
君不见，黄河之水天上来，奔流到海不复回。
君不见，高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不愿醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，
呼儿将出换美酒，与尔同销万古愁。
</pre>
</td>
</tr>
</table>
</body>
</html>
四、豆瓣电影页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热门电影</title>
</head>
<body>
<h1>热门电影板块</h1>
<hr>
<style type="text/css">
.srcImg{width:180px;height:100px;}
</style>
< img src="" class="srcImg"/>
<b>最近热门电影
<a>热门</a>
<a>最新</a>
<a>豆瓣高分</a>
<a>冷门佳片</a>
<a>华语</a>
<a>欧美</a>
<a>韩国</a>
<a>日本</a>
<a>更多>></a>
</b>
<hr>
<table border="0" cellspacing="1px" hspace="3px" vertical="3px">
<tr>
<td><img src="猜火车.webp"></td>
<td><img src="贝尔科实验.webp"></td>
<td><img src="加州公路巡警.webp"></td>
<td><img src="歌声不绝.webp"></td>
</tr>
<tr>
<td><br>猜火车<br><br></td>
<td><br>贝尔科实验<br><br></td>
<td><br>加州公路巡警<br><br></td>
<td><br>歌声不绝<br><br></td>
</tr>
<tr>
<td><img src="明日的我与昨日的我.webp"></td>
<td><img src="速度与激情8.webp"></td>
<td><img src="极速特工.webp"></td>
<td><img src="金刚狼3殊死一战.webp"></td>
</tr>
<tr>
<td><br>明日的我与昨日的我</td>
<td><br>速度与激情8</td>
<td><br>极速特工</td>
<td><br>金刚狼3殊死一战</td>
</tr>
</table>
</body>
</html>
6224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
