笔记二(JavaWeb)

上一个笔记写的好累，这次换Markdown试试

缺省适配器设计模式:父类不实现该方法，让子类去实现(抽象方法)

模板方法设计模式：定义一个操作中的方法骨架，而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个方法的结构即可重定义该算法的某些特定步骤。如：在父类中有参方法调用无参方法，子类可以重写无参方法而不会影响到有参方法

(html)

1.基本规则

html书写规则：

​ 1.双标签 你好宋伟 开始标记 结束标记 中间可以包裹内容或其他标签

​ 2.单标签（自结束标签） charset="utf-8" 没有结束标记 通常要搭配属性使用

乱码：文本本身编码格式 跟读取的程序编码格式不统一
统一编码格式

html解析文本格式

​ 1.回车换行 需要使用html中特殊的方式（使用br标签）

​ 2.空格需要使用html特殊的格式（转义符） &xxx;

​ 3.编写文本时 注意不要跟html标签格式产生冲突

2.常用标签

2.1.标题标签

加粗 改字号 换行（自己占满一行） 上下边距

		<h1>测试标题</h1>
		<h2 id="myaim">测试标题</h2>
		<h3>测试标题</h3>
		<h4>测试标题</h4>
		<h5>测试标题</h5>
		<h6>测试标题</h6>
		普通文本
		<p>这是一个段落</p>

2.2.转义标签

源代码	显示结果	描述
&lt；	<
&gt；	>
&amp；	&
&quot；	"
&reg；		注册商标
&copy；		版权符号
&trade；		tm符号
&ensp；		半个空白位
&emsp；		一个空白位
&nbsp；		b不断行的空白

2.3.列表标签

	定义列表
		<dl>
			<dt>标题1</dt>
			<dd>列表项1</dd>
			<dd>列表项2</dd>
			<dt>标题2</dt>
			<dd>列表项1</dd>
			<dd>列表项2</dd>
		</dl>
	有序列表
		<ol type="a">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ol>

	无序列表
		<ul type="square">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>

2.4.文本标签

<u>测试</u><strong>文</strong><em>本</em>

2.5.超链接

<a href="1html基本规则.html">这是超链接</a>

图片超链接
<a href="#">
			<img src="https://www.baidu.com/img/bd_logo1.png" width="50px" height="50px" alt="美女图片" />
		</a>

2.5.1.锚点

使用id与name声明锚点的区别

在老版本浏览器中最初都是使用name作为锚点位置的声明方式。

网页中name属性的取值不唯一，因此造成锚点定位不准，所以后期浏览器都支持使用id作为锚点声明位置。

Html5规范中已经声明取消name的锚点声明方式，建议使用id。

超链接中经常嵌套图片标签

<a href="#jump">点我看看</a>
---<p id="jump">我是该区域的相应内容</p>
    ---<p name="jump">我是该区域的相应内容</p>

2.6图片

Src 图片路径

Width 图片宽度

Height 图片高度

Alt 图片说明(当图片失效时显示)

1.src与href的区别：实际效果类似 内部处理方式不同 主要区别如下

2.src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。

3.href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用）。一般用作文本引入方式

注意：Link、a标签使用href，其余使用src

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>

2.7表格

常见标签

Table 表格

Tr 行

Td 单元格（列）

Th 列头

Thead 表区域（头）

Tbody 表区域（体）

Tfoot 表区域（脚）

Caption 表名

Rowspan 跨行

Cellspan 跨列

2.8.表单

Input标签
<input  type=”xxxx”/>  常用表单元素
type的属性值：
	Text  文本框
	Password  密码框
	Radio  单选按钮
	Checkbox  多选按钮
	File    文件框
	Color   颜色框
	Date   日期框
	Button  空白按钮
	Submit  提交按钮
	Reset   重置按钮

Select标签  下拉菜单
<select>
<option>选项1</option>
<option>选项1</option>
</select>

Textarea标签 多行文本框
<textarea></textarea>  

Form表单（用户填写的数据需要通过表单标签提交）
<form action=“http://www.sohu.com” method=“post”>  </form>
Action属性 代表提交的地址
Method属性 代表提交的方式get post

2.8.get和post

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

2.9.Frameset frame

通过frameset 可以把页面拆分成多份

通过frame在每一份引入一个单独的页面

<FRAMESET  rows="20%,*"   frameborder="0">  //设置成无边框
      <FRAME src="top.html" name="topframe" scrolling="no" noresize="noresize">  //scrolling="no" 不显示滚动条
      <FRAMESET cols="20%,*">
      <FRAME src="left.html"  noresize="noresize" scrolling="no" name="leftframe" > //noresize="noresize"禁止调整框架大小
      <FRAME src="right.html" name="rightframe">  // name="rightframe"框架名称，便于超文本链接锚标签
</FRAMESET>

可以通过超链接的target属性 指定到跳转哪个frame

<frame src="xxxx" name="窗口名">　　 

<a href="xxx" target="窗口名">

(css)

1.css引入方式

1.通过style标签 编写css代码 调试代码时使用

2.通过style属性 不推荐使用（调试较麻烦）（优先级高）

3.通过link标签引入css文件 最终格式 使页面整洁

2.css常用选择器

​

.元素选择器         元素名（标签名）
2.class选择器   .class值     使用较灵活
	class属性允许多个值
3.id选择器           #id值             尽量不用

4.并集选择器         选择器,选择器
5.交集选择器         (元素)选择器选择器
6.后代选择器          选择器 选择器          可以跨代
7.子代选择器          选择器>选择器         不可以跨带
8.属性选择器         [属性] [属性="属性值"] 一般要搭配交集选择器使用
9.全局选择器         *

2.1.伪类选择器

：active 点击动作

：hover 鼠标悬停

			a:hover{
				color: greenyellow;
			}
			a:active{
				color: lightblue;
			}
			div{
				border: 1px solid black;
				height: 100px;
				width: 100px;

			}
			div:hover{
				background-color: lightseagreen;
				cursor: pointer;
			}
			div:active{
				background-color: lightpink;
			}
			<a href="###">超链接</a>

3.常用属性

html元素中 有几个通用属性使用

id 在页面中尽量不要重复

name 表单元素的提交

class 跟样式配合使用 值部分允许多个值

style 直接编辑样式属性 尽量不用

color 文字颜色

font-size 文字大小

font-family 字体类型

text-align 文本对齐方式

line-hight 行高

text-decoration 文本修饰（下划线等）

Background 背景图片

background-repeat 背景图片重复方式

background-color 背景颜色

Widht 宽

Height 高

List-style 列表标签的列表样式

3.1.元素排布规则相关属性display

默认文档流

block 块状元素 从上到下

inline行内元素从左到右 不可以设置宽高 大小由内容大小决定

inline-block行内块状元素 从左到右 可以设置宽高

none不显示

3.2盒子相关属性

border 边框

margin 外边距

padding 内部填充

margin: 10px;上下左右

margin: 10px 20px;上下 左右

margin: 10px 20px 30px; 上 左右 下

margin: 10px 20px 30px 40px; 上 右 下 左

margin: 10px auto; 做块左右居中

margin-left: 100px; 四边可以单独设置

padding 填充 用法和margin相似

3.2.1盒子嵌套的问题

当盒子模型嵌套使用时 会遇到超过边界的问题（内容大小 大于父元素的大小）

可以使用overflow属性处理 隐藏超过的内容

改变在父元素中的排列属性 可以使用float浮动属性 让元素水平排列

通过div加浮动 可以使用css制作类似frameset的页面布局

overflow例：
.mainD{
				border: 1px solid black;
				width: 700px;
				height: 500px;
				overflow: hidden;/*处理内部超过边界*/
			}

3.3.position定位

relative 相对定位 元素本身位置保留（不脱离文档流） 根据元素本身的位置进行偏移

absolute 绝对定位 元素本身位置不保留（脱离文档流） 根据页面位置进行偏移 不推荐使用

fixed 固定定位 元素本身位置不保留（脱离文档流）根据浏览器主体部分进行偏移 并固定在主偏移位置上(小广告)

z-index 层叠顺序 需要使用在有定位属性的元素上，值大的覆盖值小的