前端页面编写-----前端

旧约Alatus

已于 2023-11-10 14:32:34 修改

阅读量322

点赞数 1

分类专栏：前端文章标签： html5 chrome css html 前端

于 2023-05-14 14:54:01 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/130668866

版权

前端专栏收录该内容

329 篇文章 2 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<title>014</title>
		<meta charset="GBK">
		<link rel="stylesheet" type="text/css" href="rs.css"/>
		<style type="text/css">
			#mydiv
			{
				width:200px;
				height:200px;
				background-color:green;
			}
			input
			{
				width:500px;
				height:30px;
				border-color:blue;
				border-style:soiled;
				border-width:1px;
			}
			#em
			{
				width:500px;
				height:30px;
				border-color:red;
				border-style:soiled;
				border-width:1px;
			}
			.student
			{
				width:500px;
				height:30px;
				background-color:red;
			}
			.citys
			{
				display:inline-block;
			}
			#test:hover
			{
				cursor:pointer;
				color:red;
			}
			.baidu
			{
				text-decoration:none;
			}
			#coutry
			{
				list-style-type:none;
			}
			.mydiv1
			{
				width:300px;
				height:300px;
				background-color:blue;
				border:4px red solid;
				margin-top:100px;
				margin-left:100px;
				padding-right:100px;
			}
			#outdiv
			{
				width:300px;
				height:300px;
				background-color:red;
				float:left;
			}
			#innerdiv
			{
				width:100px;
				height:100px;
				background-color:blue;
				float:right;
			}
			#mydiv2
			{
				width:100px;
				height:100px;
				background-color:red;
				position:absolute;
				top:100px;
				right:0px;
			}
		</style>
	</head>
	<body>
		<div style="width:200px;height:200px;color:green">
			我是一个DIV
		</div>
		<div id="mydiv">
			
		</div>
		</br>
		用户名<input type="text" name="name"></br>
		</br>
		密码<input type="password" name="password"></br>
		</br></br></br>
		密码<input type="password" name="password" id="em"></br>
		</br></br></br></br>
		<span class="student">1</span>
		<span class="student">2</span>
		<div class="student">3</div>
		<div id="div1">
		</div>
		<div id="div2">
		</div>
		<ul id="coutry">
			<li>中国
				<ul class="citys">
					<li>北京</li>
					<li>上海</li>
					<li>深圳</li>
				</ul>
			</li>
			<li>美国
				<ul class="citys">
					<li>华盛顿</li>
					<li>旧金山</li>
					<li>芝加哥</li>
				</ul>
			</li>
			<li>日本
				<ul class="citys">
					<li>京都</li>
					<li>伊豆</li>
					<li>北海道</li>
				</ul>
			</li>
		</ul>
		<span id="test">
			不能为空
		</span>
		<a class="baidu" href="http://www.baidu.com">百度</a>
		<div class="mydiv1">
			
		</div>
		</br></br></br></br></br>
		<hr>
		<div id="outdiv">
			<div id="innerdiv">
				
			</div>
		</div>
		<div id="mydiv2">
			
		</div>
	</body>
</html>

<!doctype html>
<html>
	<head>
		<title>我的第一个页面</title>
		<meta charset="GBK">
	</head>
	<body bgcolor="silver" background="2.jpg">
		<p>西尽伊吾，东接灵武，得地四千余里，户口百万之家。六郡山河，宛然而旧。</p>
		<h1>1</h1>
		<h2>2</h2>
		<hr>
		呵呵</br>haha
		<hr color="red" width="300px">
		<hr color="blue" width="50%">
		<pre>
			for(int i = 0;i< 50;i++)
			{
				System.out.println(i);
				<!doctype html>
			}
		</pre>
		<b>粗体字</b>
		<i>斜体字<i>
		<ins>插入字</ins>
		<del>删除字</del>
		10<sup>2</sup>
		100<sub>n</sub>
		<font color="red",size="50px">字体标签</font>
		斗折蛇行&nbsp;&nbsp;-&nbsp;&nbsp;明灭可见</br>
		&lt;a&gt;
		100 &gt; 10;
		10 &lt; 1000;
		<table border="1px" width="300px" height="200px" align="center">
			<thead>
				<tr>
					<th>单元格</th>
					<th>单元格</th>
					<th>单元格</th>
				</tr>
			</thead>

			<tbody>
				<tr align="center">
					<td>单元格</td>
					<td>单元格</td>
					<td rowspan="2">单元格</td>
				</tr>
				<tr>
					<td>单元格</td>
					<td>单元格</td>
				</tr>
			</tbody>
			<tfoot>
				<tr align="center">
					<td colspan="2">单元格</td>
					<td>单元格</td>
				</tr></br>
			</tfoot>
		</table>
		<hr>
		<img src="3.jpg" width="300px" title="美女" alt="图片找不到了"></img>
		<hr>
		<a href="https://www.baidu.com/home">百度一下你就知道</a>
		</br>
		<a href="https://www.jd.com/" target="_blank">京东</a>
		</br>
		<a href="https://www.taobao.com/?spm=a21bo.jianhua.201857.1.23b111d9RnPWfN" target="_self">淘宝</a>
		</br>
		<iframe src="014.html" width="30%" height="800px"></iframe>
		</br>
		<iframe src="https://www.baidu.com/home" width="500px"></iframe>
		</br>
		<ul type="square">
			<li>中国
				<ul type="disc">
					<li>北京</li>
					<li>上海</li>
					<li>天津</li>
				</ul>
			</li>
			<li>美国
				<ul type="circle">
					<li>华盛顿</li>
					<li>旧金山</li>
					<li>纽约</li>
				</ul>
			</li>
			<li>欧洲</li>
		</ul>
		<ol type="a">
			<li>蔬菜
				<ol type="A">
					<li>西红柿</li>
					<li>西红柿</li>
					<li>西红柿</li>
				</ol>
			<li>
			<li>水果
				<ol type="I">
					<li>西红柿</li>
					<li>西红柿</li>
					<li>西红柿</li>
				</ol>
			</li>
		</ol>
		<form action="http://www.baidu.com" method="post">
			<input type="submit" value="百度"/>
			
		</form>
		<input type="button" value="百度一下"/>
		<form action="http://www.jd.com" method="post"/>
			<input type="submit" value="京东"/>
		</form>
		<hr>
		<form action="http://127.0.0.1:8080/oa/login" method="get">
			<h1>userLogin</h1>
			<hr>
			username:&nbsp;&nbsp;<input type="text" name="user"/></br>
			password:&nbsp;&nbsp;<input type="password" name="mm"/></br>
			<input type="submit" value="login"/>
			<input type="checkbox"/>
			<input type="radio"/>
		</form>
		<form method="get" action="http://127.0.0.1:8080/oa/login" align="center">
			<hr>
			<h1>注册表单</h1>
			<hr>
			用户名:&nbsp;&nbsp;&nbsp;<input type="text" name="username"/>
			密码:&nbsp;&nbsp;&nbsp;<input type="password" name="password"/></br>
			性别:&nbsp;&nbsp;&nbsp;
			男:<input type="radio" name="gender" value="male" checked="checked"/>
			女:<input type="radio" name="gender" value="female"/>
			</br>
			<select name="grade">
				<option value="">--请选择学历--</option>
				<option value="1">--高中--</option>
				<option value="2" selected="selected">--专科--</option>
				<option value="3">--本科--</option>
				<option value="4">--硕士--</option>
			</select>
			</br>
			兴趣:&nbsp;&nbsp;&nbsp;
				唱<input type="checkbox" name="hobby" value="sing"/>
				跳<input type="checkbox" name="hobby" value="jump"/>
				rap<input type="checkbox" name="hobby" value="rap" checked="checked"/>
				篮球<input type="checkbox" name="hobby" value="basketball"/>
			</br>
			简介:<textarea rows="10" cols="60" name="details"></textarea>
			</br>
			<input type="submit" value="注册"/>
			<input type="reset" value="重置"/>
		</form>
		<hr>
		<form method="post" action="http://127.0.0.1:8080/oa/login">
			姓名<input type="text" name="name"/>
			密码<input type="password" name="password/"></br>
			省:<select name="province" size="7" multiple>
					<option value="">请选择省份</option>
					<option value="1">河南</option>
					<option value="2">山东</option>
					<option value="3">河北</option>
					<option value="4">陕西</option>
					<option value="5">山西</option>
				</select>
			请上传文件:<input type="file"/>
				<input type="submit" value="保存"/>
				<input type="hidden" name="usercode" value="123"/>
				<input type="text" name="usercode" value="123" readonly/>
				<input type="text" name="usercode" value="123" disabled/>
				<input type="text" name="usercode" maxlength="4"/>
		</form>
	</body>
</html>

<html>
	<head>
		<script language="javascript">
			var str = "Hello world";
			alert(typeof str);
		</script>
	</head>
	<body>

	</body>
</html>

<html>
	<head>
		<link rel="stylesheet" href="css.css">
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<table id="tbl_fruit">
					<tr>
						<th>品种</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>3</td>
						<td>20</td>
						<td>60</td>
						<td><img src="1.jpg" class="delImg"></td>
					</tr>
					<tr>
						<td>西瓜</td>
						<td>6</td>
						<td>20</td>
						<td>120</td>
						<td><img src="1.jpg" class="delImg"></td>
					</tr>
					<tr>
						<td>菠萝</td>
						<td>8</td>
						<td>100</td>
						<td>800</td>
						<td><img src="1.jpg" class="delImg"></td>
					</tr>
					<tr>
						<td>榴莲</td>
						<td>20</td>
						<td>10</td>
						<td>200</td>
						<td><img src="1.jpg" class="delImg"></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">999</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

body
{
   margin:0;
   padding:0;
   background-color:silver;
}
div
{
   position:relative;
   float:left
}
#div_container
{
   width:80%;
   height:100%;
   border:0px solid blue;
   margin-left:10%;
   float:left;
   background-color:gray;
   border-radius:10px;
}
#tbl_fruit
{
   width:60%;
   line-height:28px;
   margin-top:120px;
   margin-left:20%;
}
#div_fruit_list
{
   width:100%;
   border:1px solid purple;
   border-radius:10px;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td
{
   border:1px solid red;
   border-collapse:collapse;
   text-align:center;
   font-size:16px;
   font-family:"黑体";
   font-weight:lighter;
   color:green;
}
.delImg
{
   width:24px;
   height:24px;
}

alert(1111)
alert(123456)
alert("hello world")

#div1
{
   width:100px;
   height:100px;
   background-color:green;
   border:1px solid black;
   position:absolute;
   top:100px;
   left:300px;
}
#div2
{
   width:100px;
   height:100px;
   background-color:red;
   border:1px solid black;
   position:absolute;
   top:120px;
   left:320px;
}