HTML+CSS的简单使用(代码)

本文通过三个示例介绍HTML和CSS的简单使用,包括标签的细节操作、布局方式以及表格和下拉框的应用。每个示例都有对应的浏览器截图,强调了标签的功能性和输入数据在前端工作流程中的重要性。

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

示例1

其中有图片或者视频的地方被我注释掉了,因为你们电脑不存在我这个HTML所需要的视频或者图片文件,但是大家可以添加自己的图片或者视频进去,其实主要还是希望大家看一下里面的细节操作,这都是很简单的对标签的使用,示例的图片我都放在后面展示,相关的CSS文件也附代码

html文件:

<!DOCTYPE html
<html>
<head>
	<title>Heize的个人介绍</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="someCss.css">
	<script type="text/javascript">
		alert("欢迎来到HTML世界!");
	</script>
</head>
<body>
	<a href="#aaaa"><h1 style="background: pink;height:100px;text-align: center;">Heize</h1></a>
	<h2 >个人简介:</h2>
	<h3 style="color: red">张多慧(Heize),199189日出生于韩国,韩国女歌手。</h3>

	<p><b>2014117日,发表单曲《조금만 더 방황하고》正式出道。2015年,参与韩国大型女饶舌歌手比赛《Unpretty Rap Star Vol.2》, 从而得到大众关注 [1]20167月,发布专辑《And July》 [2]1020日,参加春夏首尔时装周 [3]201712月,为水木剧《机智牢房生活》演唱OST《Would Be Better》。2018110日,出席了第32届金唱片数码音源部门颁奖礼</p>
	
<!-- 	<a href="https://baike.baidu.com/item/%E5%BC%A0%E5%A4%9A%E6%85%A7/22420270?fr=aladdin&fromid=22420281&fromtitle=Heize"><img src="1.jpg" style="width: 400px;"></a> -->
	<div style="color: green" id="div1">
		<h2>我听见雨滴落在青青草地</h2>
		<p>那是喜羊羊的声音</p>
	<button style="width:99px; height:99px; background-color:red; " 
			type="button" onclick="document.getElementById('div1').style.color ='red'">
		点我上面字会变色
	</button>
	<button style="width:99px; height:99px; background-color:green;
	type="button" onclick="document.getElementById('div1').style.color ='yellow'">点我上面字也会变色</button>
	</div>
	<ul style="background:lightgray;width: 400px">
		<li>西安</li>
			<ul type="a">
				<li>长安区</li>
				<li>雁塔区</li>
			</ul>
		<li>宝鸡</li>
		<li>咸阳</li>
	</ul>
	<ul style="background:pink;width: 400px">
		<li>heize</li>
		<li>Heize</li>
		<li>HEIZE</li>
	</ul>

	<form style="background:lightblue">
		<fieldset>
			<legend>❤❤❤❤❤❤</legend>
			姓名:<input type="text"/>
			性别:<input type="text"/>
		</fieldset>
	</form>
	<table cellpadding="10px" cellspacing="1px" border="2" style="background:pink;">
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>班级</th>
			<th>总计</th>
		</tr>
		<tr>
			<td>06173021</td>
			<td>zhangsan</td>
			<td>male</td>
			<td>19</td>
			<td>ZN-1701</td>
			<td rowspan="5"></td>
		</tr>
		<tr>
			<td>06173022</td>
			<td>lisi</td>
			<td>female</td>
			<td>20</td>
			<td>ZN-1701</td>
		</tr>
		<tr>
			<td>06173023</td>
			<td>wangwu</td>
			<td>male</td>
			<td>19</td>
			<td>ZN-1701</td>
		</tr>
		<tr>
			<td>06173024</td>
			<td>liliu</td>
			<td>male</td>
			<td>39</td>
			<td>ZN-1701</td>
		</tr>
		<tr>
			<td>06173025</td>
			<td>liuqi</td>
			<td>female</td>
			<td>24</td>
			<td>ZN-1701</td>
		</tr>
		<tr>
			<td>总计</td>
			<td colspan="4"></td>
		</tr>
	</table>
<!-- 	<video id="aaaa" src="2.mp4" controls="controls" width="1000px"></video><br> -->
	<span class="astyle">这是外部定义的样式</span>
	<ul>
		<li id="somethings">写了一些东西1</li>
		<li>写了一些东西2</li>
		<li>写了一些东西3</li>
	</ul>
	<article>
		hahhahahah
	</article>
	<script type="text/javascript">
		document.write("使用script的write方法");
	</script>
	<p id="p1">通过getElementByid()实现</p>
	<p id="p2">通过getElementByid()实现</p>
	<script type="text/javascript">
		document.getElementById("p1").style.color = "blue";
	</script>
	<h1 onclick="this.innerHTML = '被你发现了'">点我会发现一个东西</h1>
	<h1 style="font-size: 30px" onmouseover="style.color = 'pink'" onmouseout="style.color = 'blue'">鼠标放在我这里 有东西!</h1>
	<button style="width: 100px;height: 100px;color: red" type="button" 
	onclick="alert('welcome come to script world!')"> 请点击这个按钮
	</button>
	<script type="text/javascript">
		function reb(){
  			var name=prompt("❤❤❤❤❤❤","告诉我你是谁怎么这么可爱")
 		 if (name!=null && name!="")
   			 {
    		alert(name + "   我也喜欢你" + "❤");
   		 }
   		 else
   		 	alert("沙雕快滚!");
			}

		function rec(){
			var message1 = confirm("你喜欢我吗?");
				if (message1 == true) {
					var message2 = confirm("你在放你妈的彩虹屁?");
						if (message2 == true) {
							var message3 = confirm("为了喜欢我你真是不择手段");
							if (message3 == true) {
								reb();
							}
							else{
								alert("沙雕快滚!");
							}
							
						}
						else
							alert("沙雕快滚!");
				}
				else{
					alert("沙雕快滚!");
				}

		}
	</script>
	<button type="button" onclick="rec()" style="width: 300px;height: 300px;background: pink;font-family: 楷书;font-size:30px;" >如果你喜欢我的话,点击这个按钮吧!</button>
	</body>
</html>

所用到的css文件:
名字:someCss.css


.astyle{
	background: red;
	color: yellow;
	font-family: 楷体;
	font-size: 30px;
	border: 2px solid black;
	border-radius: 5px;
}
#somethings{
	color: yellow;
	background: blue;
}
article{
	font-size:40px;
	color: blue
}

示例2

这个里面有关于布局方式的使用,大家可以参考一下

<!DOCTYPE html>
<html>
<head>
	<title>关于布局的尝试</title>
	<meta charset="utf-8">
	<style>
		#a{
			width: 50%;
			height: 400px;
			float: left;

		}
		#b{
			width: 752px;
			height: 500px;
			background:blue;
			text-align: center;
			float: left;
		}
		#c{
			width: 752px;
			height: 500px;
			background: green;
			float: left;
			text-align: center;
		}
	/*	#d{
			width: 504px;
			height: 500px;
			background: lightblue;
			float: left;
		}*/
		#e{
			width: 60%;
			height: 400px;
			background:pink;
			float: left;

		}
		#f{
			width: 100%;
			height: 200px;
			background: pink;
			text-align: center;
			line-height: 160px;
			float: left;
		}
	</style>
</head>
<body>
	<div id="a" style="width:40%" >
		<a href="https://baike.baidu.com/item/脸红的思春期/19937535?fr=aladdin"><img src="3.jpg" style="width: 100%;height: 100%"></a>
	</div>
	<div id="e">
		<h1>个人简介:<br></h1>
		<p><b>2014年,参加选秀节目《Super Star K》,最终止步10强。20164月,凭借首张迷你专辑《Half Album RED ICKLE》,正式出道 [1]8月,推出首张正规专辑《Full Album RED PLANET[1]  ;同年,获得Melon Music Awards的独立音乐奖 [2]20175月,为MBC水木剧《君主-假面的主人》演唱OST《从一开始的你和我》 [3]9月,发行第二张迷你专辑《Red Diary Page.1[4]20185月,推出第三张迷你专辑《Red Diary Page.2[5]</p>
		<p style="color: green"><KKK style="color: blue">歌曲欣赏:</KKK>脸红的思春期-说爱我</p>	
		<embed height="50px" width="500px" src="4.mp3"></embed>
		<p><sd style="color:green;font-family:楷体,sans-serif;color:red;font-size: 100px;text-align: center;">你真可爱!</sd></p>	
	</div>
	<div id="b">
		<h1 style="font-family: 楷体;">给你宇宙</h1>
		<video src="5.mp4" controls="controls" style="height: 400px;width: 752px"></video>
	</div>
	<div id="c">
		<h1 style="font-family: 楷体;">玩暧昧</h1>
		<video src="6.mp4" controls="controls" style="height: 400px;width: 752px"></video>
	</div>
	<div id="f">
		<h1>❤❤❤❤❤❤❤❤❤❤❤❤❤❤</h1>
	</div>

</body>
</html>	

示例3

这个示例中加入了关于利用表格做一个类似注册窗口的东西,然后还有关于用下拉框做出生年月日的示例,而且大家注意一下控件标签的使用,每一个都是有道理的,比如标签,具体的标签功能依然是我之前的话‘见过就好,用过才算’,自己尝试都明白了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>somgthings</title>
	</head>
	<body>
		<form method="get">
			<table class="blockCenter">
				<tr id="registryTopic" class="bkPink">
					<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;用户注册&nbsp;&nbsp;&nbsp;&nbsp;</td>
				</tr>
				<tr class="bkPink">
					<td colspan="2">请认真填写注册信息,红色星号为必填内容</td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">&nbsp;&nbsp;&nbsp;&nbsp;</td>
					<td class="leftAlign"><input type="text" name="name" placeholder="姓名由2到7个汉字组成" size="25">
					*</td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">&nbsp;&nbsp;&nbsp;&nbsp;</td>
					<td class="leftAlign"><input type="password" name="password" placeholder="密码由6-12个字符组成" size="25">
					*</td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">密码确认</td>
					<td class="leftAlign"><input type="password" placeholder="请务必与密码保持一致" size="25">
					*</td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">性别</td>
					<td class="leftAlign">
						<input id="sexMale" type="radio" value="true" name="sex">
							<label for="sexMale"></label>
						<input id="sexFemale" type="radio" value="false" name="sex">
							<label for="sexFemale"></label>
					</td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">爱好</td>
					<td class="leftAlign" >
						<input id="hobbySleep" type="checkbox" name="hobby" value="0">
							<label for="hobbySleep">睡觉</label>
						<input id="hobbySpeach" type="checkbox" name="hobby" value="1">
							<label for="hobbySpeach">吹牛</label>
						<input id="hobbyLove" type="checkbox" name="hobby" value="2">
							<label for="hobbyLove">泡妞</label><br>
						<input id="hobbyStudy" type="checkbox" name="hobby" value="3">
							<label for="hobbyStudy">装逼</label>
						<input id="hobbyGame" type="checkbox" name="hobby" value="4">
							<label for="hobbyGame">燃烧青春</label>
						<input id="hobbyCool" type="checkbox" name="hobby" value="5">
							<label for="hobbyCool">装酷</label><br>
						<span>&nbsp;</span><br>

						<div class="blockCenter">
							<button id="hobbyAll">全选</button>
							<button id="hobbyRev">反选</button>
							<button id="hobbyClear">清空</button>
						</div>
					</td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">出生日期</td>
					<td class="leftAlign">
						<select id="birthYear" name="year"></select><select id="birthMonth" name="month"></select><select id="birthDate" name="date"></select></td>
				</tr>
				<tr class="bkPink">
					<td class="centerAlign">自我介绍</td>
					<td class="leftAlign">
						<textarea cols="35" rows="6" name="introduce"></textarea>
					</td>
				</tr>
				<tr class="bkPink">
					<td colspan="2">
						<input id="submit" type="submit">
						<input id="reset" type="reset">
					</td>
				</tr>
			</table>
		</form>
	</body>
	<link href="index.css" rel="stylesheet" type="text/css">

	<script type="text/javascript">
		console.log("window:", window);
		var birthYear = document.getElementById("birthYear");
		for (var year = 1990; year < 2020; year++) {
			birthYear.innerHTML += "<option value='" + year +  "'>" + year + "</option>";
		}

		var birthMonth = document.getElementById("birthMonth");
		for (var month = 1; month <= 12; month++) {
			var newOption = document.createElement("option");
			newOption.value = month;
			newOption.innerText = month;
			birthMonth.appendChild(newOption);
		}
		var birthDate = document.getElementById("birthDate");
		for (var date = 1; date < 32; date++) {
			birthDate.innerHTML += "<option value='" + date +  "'>" + date + "</option>";
		}
	</script>
</html>
截图3(火狐)

在这里插入图片描述注意下面这张图,在我点击提交查询按钮的时候是这样,主要看地址栏:
在这里插入图片描述在我点击提交之后,地址栏变成了这样:
在这里插入图片描述

大家注意一个很重要的东西,这最后一个例子,就是我对于在文本框的输入以及上面爱好,性别的选择,它是可以被发送出去的,也就是这样讲,如果这是我做好的客web户端的话,用户点击提交查询,它的操作信息是会被传到web服务器端进行相应的处理的,从这以后就正式开始对于javascript的使用,所以之后的操作是针对处理用户的请求的,这才算是拉开了前端的帷幕!!

截图2(microsoft edge):

截图1(火狐):

在这里插入图片描述在这里插入图片描述在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值