标签:
<a href="https://www.baidu.com" target="_blank">点我送福利哦!</a>
// target属性值_blank表示另取空白页打开网页,用new有同样的效果
<img src="plmm.jpg" width="100px" height="200px" alt="图片信息丢失!"/>
// alt属性的值表示当图片找不到时显示的文字信息
<ol type="I" start="1">
<li>我是天才1号</li>
<li>我是天才2号</li>
<li>我是天才3号</li>
<li>我是天才4号</li>
</ol>
<ul type="circle">
<li>我是逗逼1号</li>
<li>我是逗逼1号</li>
<li>我是逗逼1号</li>
<li>我是逗逼1号</li>
</ul>
<dl>
<dt>日记第一天</dt>
<dd>好兴奋啊要上课了</dd>
<dt>日记第二天</dt>
<dd>晚上要早点睡觉</dd>
<dt>日记第三天</dt>
<dd>真的心累啊热啊</dd>
</dl>
/* ol(ordered list):有序
li(list item):列表项
ul(unordered list):无序
dl(defined list):自定义
dt(defined title):自定义标题
dd(defined document):自定义内容
*/
<table align="center" border="1" cellspacing="0" width="80%">
<h3 align="center">考试信息登记表</h3>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>小二</td>
<td>17</td>
<td>男</td>
<td>99</td>
</tr>
<tr align="center">
<td>小三</td>
<td>19</td>
<td>女</td>
<td>86</td>
</tr><tr align="center">
<td>小四</td>
<td>17</td>
<td>男</td>
<td>100</td>
</tr><tr align="center">
<td>小五</td>
<td>20</td>
<td>男</td>
<td>59</td>
</tr>
</table>
/*
table属性:border表示边框,cellpadding表示表格内边距,spacepadding表示表格外边距
td属性:rowspan表示合并的行数,colspan表示合并的列数
*/
<form action="#" method="get">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password" /><br>
<input type="submit" value="登录" />
<br/>
<input type="radio" name="gender" value="nan" />男
<input type="radio" name="gender" value="nv" />女
<br>
<input type="checkbox" name="play" value="lanqiu" />篮球
<input type="checkbox" name="play" value="zuqiu" />足球
<input type="checkbox" name="play" value="paiqiu" />排球
<input type="checkbox" name="play" value="qiu" />乒乓球
<br>
<select name="city">
<option>深圳</option>
<option>北京</option>
<option>上海</option>
</select>
</form>
* 用到的图片如下
代码如下
警告 / WRANNING
本物品內容可能看不明白;不可將本物品內容派發,傳閱,出售,出租,交給 或出借予年齡非程序猿的人士出示,播放或播映。
This article contains material which may offernd and may not be distributed, circulated, sold, hired, given, lent, shown, played or projected to a person under the age of 18 years. All models are 18 or older.
* 用到的图片如下
* 代码如下
<form action="http://www.itheima.com/register" method="GET">
<h4 align="center">世纪佳缘征婚注册表</h4>
<table align="center" background="img/plmm.jpg">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="man" />男
<input type="radio" name="gender" value="wuman" />女</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="happy" value="lanqiu" />篮球
<input type="checkbox" name="happy" value="zuqiu" />足球
<input type="checkbox" name="happy" value="paiqiu" />排球
<input type="checkbox" name="happy" value="wmx" />玩毛线</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city">
<option>深圳</option>
<option>江西</option>
<option>贵州</option>
<option>湖南</option>
<option>吉林</option>
<option>湖北</option>
</select>
</td>
</tr>
<tr>
<td>个人宣言:</td>
<td>
<textarea>
</textarea>
</td>
</tr>
<th></th>
<tr>
<th colspan="2">
<input type="submit" value="注册" />
</th>
</tr>
</table>
</form>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width:200px;
height:200px;
background-color: red;
padding: 50px;
border: 5px;
}
.div2{
background-color: blue;
width:100px;
height:100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="div1">
我是个天才
<div class="div2">
我是个小天才
</div>
</div>
</body>
</html>
代码如下
<head>
<meta charset="utf-8" />
<title></title>
<style>
@import url("css/style.css");
div{
background-color: red;
}
</style>
</head>
<body>
<div class="div1">这是第一块DIV区域</div>
<div class="div2">这是第二块DIV区域</div>
<span id="span1">这是第一块span区域</span>
<span id="span2">这是第二块span区域</span>
<div>我是个天才</div>
</body>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background-color:aliceblue;
margin-top: 30px; /* 外边距 */
margin-left: 50px;
padding: 30px; /* 内边距 */
border-style: ridge;
border-color: coral;
border-width: 2px;
position: relative;
float: left;
}
#div2{
width: 200px;
height: 200px;
background-color:aliceblue;
margin-top: 30px; /* 外边距 */
margin-left:10px;
padding: 30px; /* 内边距 */
border-style: ridge;
border-color: coral;
border-width: 2px;
position: relative;
float: left;
}
#div3{
width: 200px;
height: 200px;
background-color:aliceblue;
margin-top: 30px; /* 外边距 */
margin-left:10px;
padding: 30px; /* 内边距 */
border-style: ridge;
border-color: coral;
border-width: 2px;
position: relative;
float: left;
}
</style>
</head>
<body>
<div id="div1">div1中的内容</div>
<div id="div2">div2中的内容</div>
<div id="div3">div3中的内容</div>
</body>
</html>
Android之Web篇:Day01Html与Css基础入门
标签:
原文地址:http://blog.csdn.net/u013443865/article/details/52001786