JavaWeb基础知识:Html与Css基础入门

时间:2022-02-16 04:08:41

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网站入口

  • 先来看一下效果图

JavaWeb基础知识:Html与Css基础入门
* 用到的图片如下

JavaWeb基础知识:Html与Css基础入门
JavaWeb基础知识:Html与Css基础入门

  • 代码如下

    <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:世纪佳缘注册页面

  • 先来看一下效果图

JavaWeb基础知识:Html与Css基础入门
* 用到的图片如下

JavaWeb基础知识:Html与Css基础入门
* 代码如下

<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>