概念:Hyper Text Markup Language(超文本标记语言)
结构标签
<html>:根标签 <head>:网页头标签 <title></title>:页面的标题 </head> <body></body>:网页正文 </html>
属性名 | 代码 | 描述 |
---|---|---|
text | < body text="#f00"></ body> | 设置网页正文中所有文字的颜色 |
bgcolor | < body bgcolor="#00f"></ body> | 设置网页的背景色 |
background | < body background=“1.png”></ body> | 设置网页的背景图 |
颜色的表示方式:
排版标签
块标签
使用CSS+DIV是现下流行的一种布局方式
标签 | 代码 | 描述 |
---|---|---|
div | < div></ div> | 行级块标签,独占一行,换行 |
span | < span></ span> | 行内块标签,所有内容都在同一行 |
基本文字标签
font标签处理网页中文字的显示方式
属性名 | 代码 | 描述 |
---|---|---|
size | < font size=“7”></ font> | 用于设置字体的大小,最小1号,最大7号 |
color | < font color="#f00"></ font> | 用于设置字体的颜色 |
face | < font face=“宋体”></ font> | 用于设置字体的样式 |
文本格式化标签
标签 | 代码 | 描述 |
---|---|---|
b | < b></ b> | 粗体标签 |
strong | < strong></ strong> | 加粗 |
em | < em></ em> | 强调字体 |
i | < i></ i> | 斜体 |
small | < small></ small> | 小号字体 |
big | < big></ big> | 大号字体 |
sub | < sub></ sub> | 上标标签 |
sup | < sup></ sup> | 下标标签 |
del | < del></ del> | 删除线 |
标题标签
标签 | 代码 | 描述 |
---|---|---|
h1 | < h1></ h1> | 1号标题,最大字号 |
h2 | < h2></ h2> | 2号标题 |
h3 | < h3></ h3> | 3号标题 |
h4 | < h4></ h4> | 4号标题 |
h5 | < h5></ h5> | 5号标题 |
h6 | < h6></ h6> | 6号标题,最小字号 |
列表标签
无序列表:使用一组无序的符号定义, < ul>< /ul>
<ul type="circle"> <li></li> </ul>
属性值 | 描述 | 用法举例 |
---|---|---|
circle | 空心圆 | < ul type=“circle”>< /ul> |
disc | 实心圆 | < ul type=“disc”>< /ul> |
square | 黑色方块 | < ul type=“square”>< /ul> |
有序列表:使用一组有序的符号定义, < ol>< /ol>
<ol type="a" start="1"> <li></li> </ol>
属性值 | 描述 | 用法举例 |
---|---|---|
1 | 数字类型 | < ul type=“1”>< /ul> |
A | 大写字母类型 | < ul type=“A” >< /ul> |
a | 小写字母类型 | < ul type=“a”>< /ul> |
I | 大写古罗马 | < ul type=“I”>< /ul> |
i | 小写古罗马 | < ul type=“i”>< /ul> |
列表嵌套:无序列表与有序列表相互嵌套使用
代码举例: <ol> <li></li> <li></li> <li> <ul> <li></li> </ul> </li> </ol>
图形标签
在页面指定位置处中引入一幅图片, < img />
属性名 | 描述 |
---|---|
src | 引入图片的地址 |
width | 图片的宽度 |
height | 图片的高度 |
border | 图片的边框 |
align | 与图片对齐显示方式 |
alt | 提示信息 |
hspace | 在图片左右设定空白 |
vspace | 在图片的上下设定空白 |
链接标签
在页面中使用链接标签跳转到另一页面
标签: < a href="">< /a>
属性:href:跳转页面的地址(跳转到外网需要添加协议)
设置跳转页面时的页面打开方式,target属性
- _blank在新窗口中打开
- _self在原空口中打开
- 指向同一页面中指定位置
- 定义位置: < a name=“名称”>< /a>
- 指向: < a href="#名称">< /a>
表格标签
<table> <tr> <td></td> </tr> </table>
表格的列标签(th):内容有加粗和居中效果
<table> <tr> <th></th> </tr> </table>
表格的列合并属性(colspan):在同一行内同时合并多个列
<table> <tr> <td colspan=""></td> </tr> </table>
表格的行合并属性(rowspan):在同一列跨多行合并
<table> <tr rowspan=""> <td></td> </tr> </table>
html表单用于收集不同类型的用户输入数据
form元素常用属性
input元素
作为表单中的重要元素,可根据不同type值呈现为不同状态
属性值 | 描述 | 代码 |
---|---|---|
text | 单行文体框 | < input type=“text”/> |
password | 密码框 | < input type=“password”/> |
radio | 单选按钮 | < input type=“radio”/> |
checkbox | 复选框 | < input type=“checkbox”/> |
date | 日期框 | < input type=“date”/> |
time | 时间框 | < input type=“time”/> |
datetime | 日期和时间框 | < input type=“datetime”/> |
电子邮件输入 | < input type=“email”/> | |
number | 数值输入 | < input type=“number”/> |
file | 文件上传 | < input type=“file”/> |
hidden | 隐藏域 | < input type=“hidden”/> |
range | 取值范围 | < input type=“range”/> |
color | 取色按钮 | < input type=“color”/> |
submit | 表单提交按钮 | < input type=“submit”/> |
button | 普通按钮 | < input type=“button”/> |
reset | 重置按钮 | < input type=“reset”/> |
image | 图片提交按钮 | < input type=“image”/> |
select 元素(下拉列表)
<select> <option selected="selected">内容</option> ... <option></option> </select>
<select multiple="multiple"> <option></option> </select>
textarea元素(文本域)
多行文本框: < textarea cols=“列” rows=“行”>< /textarea>
框架结构标签frameset
框架标签frame
每个frame引入一个html页面
<frameset cols="*,*"> <frame src="info1.html" /> <frame src="info2.html" /> </frameset>
注意事项
其他标签
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <!--该网页的描述--> <meta http-equiv="description" content="this is my page"> <!--该网页的编码--> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- href:引入css文件的地址--> <link rel="stylesheet" type="text/css" href="./styles.css"> <!--src:js的文件地址--> <script type="text/javascript" src=""></script>
语法:选择器{属性:值;属性:值…}
<div style="color:blue;font-size:50px">This is my HTML page. </div>
<style type=“text/css”> //告诉浏览器使用css解析器去解析 div{color:red;font-size:50px} </style>
创建单独文件 div.css 内容示例:div{color:green;font-size:50px} 引用语句写在head标签内部 <link rel="stylesheet" type="text/css" href=“div.css"></link> rel:代表当前页面与href所指定文档的关系 type:文件类型,告诉浏览器使用css解析器去解析 href:css文件地址
<style type="text/css"> @import url("div.css") </style> 该内容放在head标签中
link和@import方式的区别:
基本选择器
<style type="text/css"> span{color: red;font-size: 100px} </style>
创建id选择器: <div id="s1">hello,everyone!</div> <div id="s2">hello,everyone!</div> <div id="s3">hello,everyone!</div> 根据id选择器进行html文件修饰 <style type="text/css"> #s1{color: red;font-size: 100px} #s2{color: green;font-size: 100px} #s3{color: blue;font-size: 100px} </style>
创建class选择器: <div class="s1">hello,everyone!</div> <div class="s2">hello,everyone!</div> <div class="s3">hello,everyone!</div> 根据id选择器进行html文件修饰: <style type="text/css"> .s1{color: purple;font-size: 100px} .s2{color: pink;font-size: 100px} .s3{color: yellow;font-size: 100px} </style>
body内容: <form name="login" action="#" method="get"> <font size="3">用户名:</font> <input type="text" name="username" value="zhangsan"><br> <font size="3">密码:</font> <input type="password" name="password" value="123456"><br/> <input type="submit" value="登录"> </form> head中书写: <style type="text/css"> input[type='text'] { background-color: pink; } input[type='password'] { background-color: yellow; } font[size] { color: green } a[href] { color: blue; } </style>
代码: <a href="https://hao.360.cn/">点我吧</a> 样式: <style type="text/css"> <!--静止状态 --> a:link {color: red;} <!--悬浮状态 -->’ a:hover {color: green;} <!--触发状态 --> a:active {color: yellow;} <!--完成状态 --> a:visited {color: blue;} </style>
<div id="div1"> <div class="div11"> <span>span1-1</span> </div> <div class="div12"> <span>span1-2</span> </div> </div> <div class="div2"> <div id="div22"> <span>span2-1</span> </div> <div id="div23"> <span>span2-2</span> </div> </div>
<style type="text/css"> #div1 .div11{color:red;} #div1 .div12{color:purple;} .div2 #div22{color:green;} .div2 #div23{color:blue;} </style>
文字属性
属性名 | 取值 | 描述 |
---|---|---|
font-size | 数值 | 设置字体大小 |
font-family | 默体、宋体、楷体等 | 设置字体样式 |
font-style | normal正常; italic斜体; | 设置斜体样式 |
font-weight | 100~900数值;bold;bolder; | 粗体样式 |
文本属性
属性名 | 取值 | 描述 |
---|---|---|
color | 十六进制;表示颜色的英文单词; | 设置文本颜色 |
text-indent | 5px缩进5像素;20%缩进父容器宽度的百分之二十; | 缩进元素中文本的首行 |
text-decoration | none;underline;overline;blink; | 文本的装饰线 |
text-align | left;right;center | 文本水平对齐方式 |
word-spacing | normal;固定值; | 单词之间的间隔 |
line-height | normal;固定值; | 设置文本的行高 |
text-shadow | 四个取值依次是: 水平偏移;垂直偏移;模糊值;阴影颜色; | 设置阴影及模糊效果 |
背景属性
属性名 | 取值 | 描述 |
---|---|---|
background-color | 16进制;用于表示颜色的英语单词; | 设置背景色 |
background-image | url(‘图片路径’) | 设置背景图片 |
background-repeat | repeat-y;repeat-x;repeat;no-repeat; | 设置背景图的平铺方向 |
background-position | top;bottom;left;right ; center; | 改变图像在背景中的位置 |
列表属性
属性名 | 取值 | 描述 |
---|---|---|
list-style-type | disc等 | 改变列表的标识类型 |
list-style-image | url(“图片地址”) | 用图像表示标识 |
list-style-position | inside;outside | 标识出现在列表项内容之外还是内部 |
尺寸属性
取值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
定位属性
相对定位(relative):元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
<head> <style type="text/css"> h2.pos_left { position: relative; left: -20px } h2.pos_right { position: relative; left: 20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p> </body>
绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框。
<html> <head> <meta charset="utf-8" /> <style type="text/css"> h2.pos_abs { position: absolute; left: 100px; top: 150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p> </body> </html>
固定定位(fixed):元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #left { width: 200px; height: 200px; background-color: red; position: fixed; left: 0px; bottom: 0px; } #right { width: 200px; height: 200px; background-color: green; position: fixed; right: 0px; bottom: 0px; } #middle{ width: 200px; height: 200px; background-color: blue; position: fixed; left: 0px; bottom: 50%; } </style> </head> <body> <div id="left">左下</div> <div id="right">右下</div> <div id="middle">中间</div> </body> </html>
边框相关属性
属性名 | 取值 | 描述 |
---|---|---|
border-style | solid;double;dashed;dotted等 | 设置边框的样式 |
border-color | 16进制;用于表示颜色的英文; | 设置边框的颜色 |
border-width | 数值 | 设置边框的粗 |
外边距相关属性
margin:外间距,边框和边框外层的元素的距离
属性名 | 取值 | 描述 |
---|---|---|
margin | top;right;bottom;left | 四个方向的距离 |
margin-top | 数值 | 上间距 |
margin-bottom | 数值 | 下间距 |
margin-left | 数值 | 左间距 |
margin-right | 数值 | 右间距 |
内边距相关属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
属性名 | 取值 | 描述 |
---|---|---|
padding | top;right;bottom;left | 四个方向的距离 |
padding-top | 数值 | 上间距 |
padding-bottom | 数值 | 下间距 |
padding-left | 数值 | 左间距 |
padding-right | 数值 | 右间距 |
border-radius创建圆角
box-shadow:用于向方框添加阴影
background-size: 属性规定背景图片的尺寸
background-image:为指定元素使用多个背景图像
text-shadow: 可向文本应用阴影。
概念:
作用
概念:超文本传输协议(HTTP)是互联网上应用最为广泛的一种网络协议,是一个基于请求与响应模式的、无状态的、应用层的协议,运行于TCP协议基础之上
特点:
常用的网络协议包
请求报文
当浏览器向Web服务器发出请求时,它向服务器传递了一个数据块,也就是请求信息,http请求信息由4部分组成
Http响应报文
与请求报文相似
在Servlet体系机构中,除了实现Servlet接口,还可以通过继承GenericServlet(只需重写Service方法)或HttpServlet(需重写doget()、dopost()方法)类,完成编写
在ServletAPI中最重要的是Servlet接口,所有Servlet都会直接或间接的与该接口发生联系,或是直接实现该接口,或间接继承自实现了该接口的类
改接口包括一下五个方法:
GenericServlet 是编写Servlet变得更容易。它提供生命周期方法init和destroy的简单实现,要编写一般的servlet,只需重写抽象service方法即可
HttpServlet是继承GennericServlet的基础上进一步的扩展。提供将要被子类化以创建适用于Web站点的HTTP servlet的抽象类。HttpServlet的子类至少必须重写一个方法,该方法通常是一下这些方法之一:
1.实现接口Servlet
/** * Servlet创建的第一种方式:实现接口Servlet * */ public class HelloServlet2 implements Servlet{ @Override public void destroy() { } @Override public ServletConfig getServletConfig() { return null; } @Override public String getServletInfo() { return null; } @Override public void init(ServletConfig arg0) throws ServletException { } @Override public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException { System.out.println("OK"); response.getWriter().println("welcome use servlet"); } }
2.继承HttpServlet
/** * Servlet implementation class HelloServlet * Servlet的第二种创建方式,继承HttpServlet.也是开发中推荐的 * */ public class HelloServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().print("welcome use servlet"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
1.使用web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <display-name>Web_Day11</display-name> <!--Servlet配置 --> <servlet> <!--名称 --> <servlet-name>hello2</servlet-name> <!--Servlet的全称类名 --> <servlet-class>com.qf.web.servlet.HelloServlet</servlet-class> <!--启动的优先级,数字越小越先起作用 --> <load-on-startup>1</load-on-startup> </servlet> <!--映射配置 --> <servlet-mapping> <!--名称 --> <servlet-name>hello2</servlet-name> <!--资源的匹配规则:精确匹配 --> <url-pattern>/hello2</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>login.html</welcome-file> </welcome-file-list> </web-app>
配置属性
url-pattern定义匹配规则,取值说明: 精确匹配 /具体的名称 只有url路径是具体的名称的时候才会触发Servlet 后缀匹配 *.xxx 只要是以xxx结尾的就匹配触发Servlet 通配符匹配 /* 匹配所有请求,包含服务器的所有资源 通配符匹配 / 匹配所有请求,包含服务器的所有资源,不包括.jsp load-on-startup 1元素标记容器是否应该在web应用程序启动的时候就加载这个servlet。 2它的值必须是一个整数,表示servlet被加载的先后顺序。 3如果该元素的值为负数或者没有设置,则容器会当Servlet被请求时再加载。 4如果值为正整数或者0时,表示容器在应用启动时就加载并初始化这个servlet,值越小,servlet的优先级越高,就越先被加载。值相同时,容器就会自己选择顺序来加载。
2.使用注解(Servlet3.0后支持)
/** * Servlet implementation class HelloServlet * 演示Servlet注解式配置 */ @WebServlet("/hello") public class HelloServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().print("OK"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
@WebServlet注解常用属性
在Servlet中用来处理客户端请求需要用doGet或doPost方法的request对象
get提交方法特点
浏览器以GET方式发送的请求内容在到达http服务器后,会由服务器进行解码,此时如果http服务器是Tomcat的话,会默认使用utf-8来解码,所以在参数有中文的情况下不会乱码
浏览器以POST方式发送的请求内容在到达http服务器后,会由请求对象(request)来进行解码,默认使用【iso-8859-1】来解码,所以在参数有中文的情况会乱码。需要设置编码类型为utf-8(setCharacterEncoding(utf-8))
post方法特点
request主要方法
方法名 | 说明 |
---|---|
String getParameter(String name) | 根据表单组件名称获取提交数据 |
void setCharacterEncoding(String charset) | 指定每个请求的编码 |
setCharacterEncoding(charset) | 进行编码设置 |
response主要方法
方法名称 | 作用 |
---|---|
setHeader(name,value) | 设置响应信息头 |
setContentType(String) | 设置响应文件类型、响应式的编码格式 |
setCharacterEncoding(String) | 设置服务端响应内容编码格式 |
getWriter() | 获取字符输出流 |
转发:作用在服务端,将请求发送给服务器上的其他资源,以共同完成一次请求的处理
语法:request.getRequsetDispatcher(“目标url-pattern”).forward(request,response)
使用forward跳转时,是在服务器内部跳转,地址栏不发生变化,属于同一次请求
数据传递
request作用域:拥有存储数据的空间,作用范围是一次请求有效(一次请求可以经过多次转发)
可以将数据存入request后,在一次请求过程中的任何位置进行获取
可以传递任何类型的数据
存数据:request.setAttribute(key,value)
取数据:request.getAttribute(key,value)
转发特点
重定向:重定向作用在客户端,客户端将请求发送给服务器后,服务器响应给客户端一个新的请求地址,客户端重新发送请求
语法:response.sendRedirect(“目标uri”)
sendRedirect跳转时,地址栏改变,代表客户端重新发送的请求。属于两次请求
重定向特点
当两个Servlet需要传递数据时,选择forward转发。不建议使用sendRedirect进行传递
Servlet在访问之后,会执行实例化操作,创建一个Servlet对象。而我们Tomcat容器可以同时多个线程并发访问同一个Servlet,如果在方法中对成员变量做修改操作,就会有线程安全的问题
如何保证线程安全
现有问题
概念:将浏览器与web服务器之间多次交互当做一个整体来处理,并且将多次交互所涉及的数据(状态)保存下来
状态管理分类