B/S软件的结构
前端开发流程
网页的组成部分
HTML简介
HTML文件书写规范
HTML标签介绍
基本属性
<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始 lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签,css样式,js代码-->
<meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
<title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
onclick表示单击事件
alert()是JavaScript提供的一个警告框函数
它可以接收任意参数,参数就是警告框的提示信息
-->
<body bgcolor="#f0f8ff" )><!--body标签是整个html页面显示的主体内容-->
<p>hello world</p>
</body>
</html>
事件属性
<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始 lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签,css样式,js代码-->
<meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
<title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
onclick表示单击事件
alert()是JavaScript提供的一个警告框函数
它可以接收任意参数,参数就是警告框的提示信息
-->
<body onclick="alert('hello world!')"><!--body标签是整个html页面显示的主体内容-->
<p>hello world</p>
</body>
</html>
单双标签
br是换行 hr是水平线。
<!DOCTYPE html><!--约束-->
<html lang="zh_CN"><!--html标签表示html的开始 lang="zh_CN"表示中文
html标签中一般分为两部分 分别是head和body-->
<head><!--head 表示头部信息 一般包含三部分内容 title标签,css样式,js代码-->
<meta charset="UTF-8"><!--表示当前页面使用utf-8字符集-->
<title>Title</title><!--标题-->
</head>
<!--bgcolor是背景颜色 就是body标签的基本属性
onclick表示单击事件
alert()是JavaScript提供的一个警告框函数
它可以接收任意参数,参数就是警告框的提示信息
-->
<body><!--body标签是整个html页面显示的主体内容-->
<button onclick="alert('Hello World!')">按钮</button>
<br/>
hello
<br/>
world
<hr/>
Hello World!
</body>
</html>
标签的语法
标签不能够交叉嵌套
标签必须正确关闭
没有文本内容的标签
属性必须有值 属性值必须加引号
注释不能嵌套
常用标签
font字体标签
font标签用来修改文本的字体(face)颜色(color)和大小(size)。
特殊字符
标题标签
标题标签是h1到h6
对齐:
超链接
self是默认值。
列表标签
无序列表:unordered list
每一项是 list item
有序列表:ordered list
可以用type属性修改前面的符号
img标签
src属性可以设置图片的路径
可以用width和height属性修改图片的宽度和高度
表格标签
- table标签是表格标签
- tr是行标签(table row)
- th是表头标签(table head)
- td是单元格标签
- border设置表格边框 width和height设置宽度和高度
- align设置文本对齐方式 也可以设置表格对齐
- b设置为文本加粗
th标签完成了居中加粗的效果
用cellspacing设置单元格之间的距离
跨行跨列表格
注意使用rowspan属性和colspan属性来跨行跨列,里面的参数是要跨的行数和列数。
注意跨行跨列后要把某些单元格删掉,不然会被挤出来,不是想要的效果。
iframe标签
点击超链接会让iframe跳转到这个页面。注意使用iframe的name属性和a标签的target属性结合。
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
用户名:<input type="text" value="默认值"><br><br>
密码:<input type="password"><br><br>
确认密码:<input type="password"><br><br>
性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br><br>
兴趣爱好:<input type="checkbox" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++<br><br>
国籍:<select>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select><br><br>
自我评价:<textarea rows="10" cols="20">默认值</textarea><br><br>
<input type="reset" value="重置为默认值"><br><br>
<input type="submit" value="提交表单"><br><br>
</form>
</body>
</html>
表单格式化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<table align="center">
<h1 align="center">用户注册</h1>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" value="默认值">
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td>
兴趣爱好:
</td>
<td>
<input type="checkbox" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++
</td>
</tr>
<tr>
<td>
国籍:
</td>
<td>
<select>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select><br><br>
</td>
</tr>
<tr>
<td>
自我评价:
</td>
<td>
<textarea rows="10" cols="20">默认值</textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重置为默认值">
</td>
<td align="center">
<input type="submit"value="提交表单">
</td>
</tr>
</table>
</form>
</body>
</html>
表单提交的细节
增加如下细节
提交后的网址
http://localhost:63342/test/127.0.0.1 action的属性值 也就是服务器地址
? 分隔符
action=login&sex=on 请求参数(表单信息)
表单提交的时候 数据没有发送给服务器的三种情况:
- 表单没有name属性
- 单选 复选 下拉列表中的option标签 都需要添加value属性 以便发送给服务器
- 表单项不在提交的form标签中
get请求的特点 - 浏览器地址栏中的地址是 action属性[+?+请求参数]
- 请求参数的格式是name=value&name=value
- 不安全(密码能被看到)
- 它有数据长度的限制
post请求的特点 - 浏览器地址栏中的地址只有action属性 也就是服务器地址
- 相对于get请求要安全
- 理论上没有数据长度的限制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="127.0.0.1" method="get">
<input type="hidden" name="action" value="login">
<table align="center">
<h1 align="center">用户注册</h1>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="username" value="默认值">
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" name="confirmedpassword">
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td>
兴趣爱好:
</td>
<td>
<input type="checkbox" name="habbit" checked="checked">Java<input type="checkbox">Python<input type="checkbox">C++
</td>
</tr>
<tr>
<td>
国籍:
</td>
<td>
<select name="country">
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select><br><br>
</td>
</tr>
<tr>
<td>
自我评价:
</td>
<td>
<textarea name="desc" rows="10" cols="20">默认值</textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重置为默认值">
</td>
<td align="center">
<input type="submit"value="提交表单">
</td>
</tr>
</table>
</form>
</body>
</html>
提交后:
此时我们的单选和复选发送的是on 不是我们想要的有效信息
再次提交
其他标签:div span和p
- div标签默认独占一行
- span标签 它的长度是封装数据的长度
- p标签 段落标签 默认会在段落的上方或下方各空出一行来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<p>p1</p>
<p>p2</p>
</body>
</html>