(1人评价)
HTML编程原理与实践

从零开始构建商业化Web前端页面

价格 99拼币
承诺服务
该课程属于 100天晋升Web安全工程师 请加入后再学习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	   <!-- 网页头部 -->
	<title>全职猎人</title>
	<style>

	</style>
</head>
<body>
		<!-- post不显示账号密码*** -->
	<form action="login.php" method="post">
	<div>
		<!-- 标题超链接 -->
		<a href="https://baike.baidu.com/item/%E5%85%A8%E8%81%8C%E7%8C%8E%E4%BA%BA/27763?fr=aladdin"
		target="_black">
			<!-- 图片相对路径    宽  高  图片文字-->
			<img src="../lieren/css/标题.jpg" alt="全职猎人" width="200px" height="90px" 
			title="全职猎人百度百科" id="top">
		</a>
	</div>

	<div>
		<!-- 表单元素 账号密码  默认内容 -->
		账号:<input type="text" value="qiya">
		密码:<input	type="password">
			<!--    单选框        默认加文字-->
			 <input type="button" value="普通按钮">
			 <input type="submit" value="登录">
			 <!-- 文本域 -->
			 <textarea>幻影旅团</textarea>
			 <p>
			 	<!-- 下拉表单 -->
				<select>
					<option>杰诺·揍敌客</option>
					<option>席巴·揍敌客</option>
					<option>库洛洛·鲁西鲁</option>
					<option>奇犽·揍敌客</option>
					<input type="submit" valoe="提交">
				</select>
	</div>

	<div>
		<!-- 单选按钮 单一选项   默认选中奇犽-->
		伊路米·揍敌客:<input type="radio" name="shouxin" checked="checked">
		糜稽·揍敌客:<input type="radio" name="shouxin">
		亚路嘉·揍敌客:<input type="radio" name="shouxin">
	</div>

	<hr>

	<div>
		<!-- h3单标签 -->
		<h2>人物</h2>
		<!-- 无序列表 -->
		<ul>
			<!-- 超链接 嵌套li标签 字体样式 -->
			<a href="https://baike.baidu.com/item/%E5%A5%87%E7%8A%BD%C2%B7%E6%8F%8D%E6%95%8C%E5%AE%A2" target=_black><li style="color: pink">奇犽</li></a>
			<a href="https://baike.baidu.com/item/%E6%9D%B0%C2%B7%E5%AF%8C%E5%8A%9B%E5%A3%AB/5975035" target="_black"><li style="color: green">小杰</li></a>
			<a href="https://baike.baidu.com/item/%E8%A5%BF%E7%B4%A2" target="_black"><li style="color: purple">西索</li></a>
		</ul>

	</div>

	<div>
		<!-- h4单标签 -->
		<h3>人物介绍</h3>
			<!-- 定义列表 -->
			<dl>
				<!-- 超链接 -->
				<a href=https://baike.baidu.com/item/%E5%A5%87%E7%8A%BD%C2%B7%E6%8F%8D%E6%95%8C%E5%AE%A2 target="_black" title="奇犽百科">
					<!-- 图片绝对路径 -->
					<img src="https://bkimg.cdn.bcebos.com/pic/8cb1cb1349540923b9016d2d9058d109b3de497c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto" alt="奇犽" width="80px" height="60">
				</a>
						<!-- 主体 -->
						<dt style="color: pink">奇犽</dt>
							<!-- 主体内容介绍 -->
							<dd>杀手世家揍敌客家族的三少爷。12岁那年,打伤了母亲及二哥后离家出走,并参加猎人试验。在第287期猎人试验中一路过关斩将,但在最终试验却失去资格。
							</dd>
			</dl>
			<dl>
				<a href="https://baike.baidu.com/item/%E9%85%B7%E6%8B%89%E7%9A%AE%E5%8D%A1/1072842">
					<img src="https://bkimg.cdn.bcebos.com/pic/adaf2edda3cc7cd9b1f53a8a3b01213fb90e918c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto" alt="酷拉皮卡" width="80px" height="60px" title="酷拉皮卡百度百科"></a>
					<dt style="color: skyblue">酷拉皮卡</dt>
						<dd>
							为了夺回同伴们的眼球(火红眼)及打倒灭族凶手幻影旅团,参加了第287期猎人试验并成为职业猎人,在猎人试验中与小杰、奇犽、雷欧力成为好友。
						</dd>
			</dl>
			<dl>
				<a href="https://baike.baidu.com/item/%E8%89%BE%E8%90%A8%E5%85%8B%C2%B7%E5%B0%BC%E7%89%B9%E7%BD%97"><img src="https://bkimg.cdn.bcebos.com/pic/d01373f082025aafa02fa2d0f8edab64034f1a8f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="艾萨克·尼特罗" width="80px" height="60px" title="艾萨克·尼特罗百科"></a>
					<dt style="color: orange">艾萨克·尼特罗</dt>
						<dd>
						猎人协会及审查委员会会长。主要负责猎人的管理。拥有极长的寿命,最强的念能力使用者。在蚂蚁篇中为了消灭嵌合蚁而牺牲
						</dd>
					</dl>
	</div>
		<hr>
	<div>
		<h5 style="text-align: center">
			<img src="C:\Users\ShouXin\Desktop\案例网页\lieren\css/头像.jpg" width="1%px" height="1%">全职猎人
		</h5>
		<a href="#top">回到顶部</a>
	</div>
	</form>
</body> 
</html>

 

[展开全文]

加内容之前,先排版

html项目流程:

1、先通过DIV进行排版,将不同内容隔离在不同的DIV块中。

2、在每个独立的DIV模块里面,填充HTML内容

3、为了让页面更好看,引入CSS样式表;

4、为了让页面更酷炫,引入JavaScript脚本。

[展开全文]

授课教师

拼客学院院长
拼客学院-老王

课程特色

视频(12)
下载资料(1)