html与css基础入门
1.html的常见标签和实战
1.1 a标签
<a href="https://www.baidu.com" target="_blank">点我送福利哦！</a>
// target属性值_blank表示另取空白页打开网页，用new有同样的效果
1.2 img标签
<img src="plmm.jpg" width="100px" height="200px" alt="图片信息丢失！"/>
// alt属性的值表示当图片找不到时显示的文字信息
1.3 列表标签
<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）：自定义内容
*/
1.4 表格标签
<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表示合并的列数
*/
1.5 表单标签
<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>
实战1：1024网站入口
- 先来看一下效果图
* 用到的图片如下
-
代码如下
<p align="center">
<img src="img/logo6.png" />
</p>
<p align="center"><font color="red" size="5"><b>警告 / WRANNING</b></font></p>
<p align="center">
本物品內容可能看不明白；不可將本物品內容派發，傳閱，出售，出租，交給 或出借予年齡非程序猿的人士出示，播放或播映。
</p>
<p align="center">
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.
<p align="center">
<a href="http://www.baidu.com" target="_blank"><img src="img/click.png" alt="图片已经丢失!" /></a>
</p>实战2：世纪佳缘注册页面
- 先来看一下效果图
* 用到的图片如下
* 代码如下
<form action="http://www.pinger.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>
2.css的使用
2.1 盒子模型
<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>
2.2 css的三种选择器
- css获取html中的div有三种方式：类选择器，元素选择器，名称选择器。第一种是在div属性中定义一个class属性，然后在css中通过#来引用定义的值，同理第二种是通过.来引用，第三种是通过div名称来引用。
- 导入css样式到html中也有三种方式，如@import url(“css/style.css”);获取@import url(css/style.css);都可以
-
代码如下
<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>
2.3 流式布局
<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>