HTML
*** div span
1、div和span都可以被称为图层 （保证灵活布局）
2、图层就是一个一个的盒子 div嵌套就是一个套一个的盒子、
3、只要定下div的x y 坐标即可
1、表格
1）、<table></table> 表示 一个表格
2）、<tr></tr> 表示一行
3）、<td></td> 表示一个格子
<!--三行的表格-->
<!--colspan:属性设置为跨列-->
<!--rowspan:属性设置为跨行-->
<!--align="center"居中 width宽度 border像素 height 高度-->
<table align="center" width=100% border="1px" height=150>
<tr>
<td colspan="2">1.1</td><!--这里的1.1跨列了-->
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td colspan="2" rowspan="2">1.4</td>
<td>1.5</td>
</tr>
</table>4）、<th></th> 自动居中加粗
<!--<th></th> 格子内的内容自动居中加粗-->
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>5</th>
</tr>5）、表格可分为 <thead></thead> <tbody></body><tfoot></foot>
2、图片
<!-- ..:表示当前目录上一级目录-->
<!--背景颜色： bgcolor="#9acd32" -->
<!--1、设置图片宽度时 高度会等比例缩放-->
<!--2、悬停文本：title="神龟" 图片加载失败时显示文本alt="图片加载失败"-->
<body>
<h1>背景颜色及背景图片</h1>
<img src="../img/jpg01.jpg" width="100%" title="神龟" alt="图片加载失败"/>
</body>3、超链接
1）基本超链接：
<body>
<!--href 后面可以是 1、联网中一个路径
2、本地资源一个路径-->
<a href="http://www.baidu.com" target="_blank">baidu</a>
<a href="table02.html">表格02</a>
<!--通过图片跳转页面-->
<a href="http://www.baidu.com" target="_blank">
<img src="../img/jpg01.jpg" width="100">
</a>
<!--target属性：1、_blank 新窗口
2、_self 当前窗口
3、_top 顶级窗口
4、_parent 父窗口-->
<a href="http://www.baidu.com" target="_blank">baidu</a>
</body>2）超链接的作用：
1、通过超链接可以从游览器向服务器发送请求 2、游览器向服务器发送数据 请求 (request) 3、服务器向游览器发送数据 响应 (response)
B/S 结构的系统 每个请求对应一个响应 B --请求--> S S --响应--> B
前端调试代码 F12
4、列表
<!--无序列表--> <ul type="circle"> <li>大熊 <ul type="circle"> <li>熊花</li> <li>熊草 <ul type="circle"> <li>小明</li> <li>小强</li> <li>小花</li> </ul> </li> <li>熊树</li> </ul> </li> <li>二熊 <ul type="square"> <li>猫一</li> <li>猫二</li> <li>猫三</li> </ul> </li> <li>小熊</li> </ul> <!--有序列表--> <ol> <li>mangosteen</li> <li>durian</li> <li>grapes</li> <li>cherries</li> </ol>
<!--无序列表-->
<ul type="circle">
<li>大熊
<ul type="circle">
<li>熊花</li>
<li>熊草
<ul type="circle">
<li>小明</li>
<li>小强</li>
<li>小花</li>
</ul>
</li>
<li>熊树</li>
</ul>
</li>
<li>二熊
<ul type="square">
<li>猫一</li>
<li>猫二</li>
<li>猫三</li>
</ul>
</li>
<li>小熊</li>
</ul>
<!--有序列表-->
<ol>
<li>mangosteen</li>
<li>durian</li>
<li>grapes</li>
<li>cherries</li>
</ol>
<!--下拉列表-->
<select multiple="multiple">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
<option>444</option>
<option>444</option>
</select>*5、表单
1）作用：收集用户信息
2）细节：
1、表单最后需要将信息提交给服务器 action属性用来指定数据提交的服务器地址
2、action 和 href一样 都可以向服务器发送请求(request)
3、http://192.168.111.8080/oa/save 这是请求路径 表单提交的数据最终提交给 192.168.111.8080 机器上的8080端口对应的软件
3）按钮：
<form action="http://192.168.111.8080/oa/save">
<!--1、画一个提交按钮 这个按钮可以提交表单的作用
2、画按钮的时候 使用input输入域 type="submit"的时候表示这个按钮是一个提交按钮 具有提交表单的能力-->
<input type="submit" value="submit"/>
<input type="text"/>
<input type="password"/>
<input type="checkbox"/>
<input type="radio"/>
<input type="button" value="这是一个普通的按钮"/>
</form>*4）内容提交：
1、表单提交数据给服务器的格式：
http://localhost:8080/as/sa?username=wqew&password=123123
格式： action?name=value&name=value&name=value&name=value&name=value............
HTTP协议规定 必须以这种方式提交给服务器
2、需要手动填写值的 就不需要搞value了 需要自己进行选择或点击的 就需要编写相对应的value值
3、 采用get方式提交 用户提交的信息会显示在游览器地址栏上
采用post方式提交 用户提交的信息不会i西安市在游览器地址栏上
4、超链接是get请求
<body>
<form action="http://localhost:8080/sad/dasd" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<select name="interest">
<option value="1">抽烟</option>
<option value="2">喝酒</option>
<option value="3">摇色子</option>
<option value="4" selected>旅行</option>
</select>
</td>
</tr>
<tr>
<!--文本域 只有name 没有value 用户填写的内容自动为value-->
<td>简介</td>
<td><textarea rows="8" cols="30" name="introduce"></textarea></td>
</tr>
<tr>
<td>注册</td>
<td><input type="submit" value="注册"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>6、file
<input type="file" name="file">
7、maxlength
<!--设置文本框中可输入的字符串数量--> <input type="text" maxlength="4"/>
**8、id
1、在任何文档中 任何/节点元素都有id属性 id属性的值 是节点的唯一标识 且不能重复
2、表单提交数据的时候只与name有关
3、作用：id 是为了让我们更方便的获取这个元素
4、javascript 对DOM树的节点进行 增删改
CSS
1、引入样式的第一种方式
<body>
<!--宽度 高度 背景颜色 display布局样式(none表示隐藏 block表示显示)
border 1px solid white 中间用空格隔开
-->
<div style="width:300px;height:300px;background-color:yellowgreen;display: block;
border:1px solid red;"></div>
</body>2、id选择器：
<head>
<meta charset="UTF-8">
<title>引入样式的第二种方式</title>
<style type="text/css">
/*这是css的注释*/
/* id选择器
语法格式：
#id{
样式名：样式值；
样式名：样式值；
样式名：样式值；
样式名：样式值；
}
*/
#usernameErrorMsg{
color:red;
font-size:15px;
}
</style>
</head>
<body>
<!--设置样式字体大小为12px 颜色为红色-->
<span id="usernameErrorMsg">对不起 用户名不能为口</span>
</body>3、标签选择器
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
div {
background-color: black;
border: 1px solid red;
width: 120px;
height: 100px;
}
</style>
</head>
<body>
<span id="usernameErrorMsg">对不起 用户名不能为口</span>
<div></div>
<div></div>
<div></div>
<div></div>
</body>1）、标签选择器针对所有标签 id选择器必须对应指定的id
4、类选择器
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.student{
border:10px solid red;
width:400px;
height:100px;
}
</style>
</head>
<body>
<div class="student"></div>
<div></div>
<div></div>
<div class="student"></div>
<br><br><br>
<input type="text"/>
<br><br><br>
<select>
<option>张三</option>
<option class="student">张四</option>
<option>张五</option>
</select>
</body>5、外部引入css文件
a{
text-decoration:none;
}
#baidu{
text-decoration:underline;
/*cursor 鼠标停在此处的鼠标样式
cursor:hand; 小手*/
cursor:pointer;
}
<head>
<meta charset="UTF-8">
<title>外部引入css文件</title>
<link rel="stylesheet" href="text1.css"/>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" id="baidu">balalalalallalala</a>
</body>6、定位
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
#div1{
background-color:red;
border:1px solid black;
width:300px;
position:absolute;//绝对定位
height:200px;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
