上一个笔记写的好累,这次换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 层叠顺序 需要使用在有定位属性的元素上,值大的覆盖值小的

笔记二(JavaWeb)的更多相关文章

  1. 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  2. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  3. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  4. Python 学习笔记二

    笔记二 :print 以及基本文件操作 笔记一已取消置顶链接地址 http://www.cnblogs.com/dzzy/p/5140899.html 暑假只是快速过了一遍python ,现在起开始仔 ...

  5. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  6. webpy使用笔记(二) session/sessionid的使用

    webpy使用笔记(二) session的使用 webpy使用系列之session的使用,虽然工作中使用的是django,但是自己并不喜欢那种大而全的东西~什么都给你准备好了,自己好像一个机器人一样赶 ...

  7. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  8. 《MFC游戏开发》笔记二 建立工程、调整窗口

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9300383 作者:七十一雾央 新浪微博:http:/ ...

  9. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  10. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

随机推荐

  1. POJ 2251 Dungeon Master(3D迷宫 bfs)

    传送门 Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28416   Accepted: 11 ...

  2. Silverlight及WPF中实现自定义BusyIndicator

    在开发Silverlight或者WPF项目时,当我们调用Web服务来加载一些数据时,由于数据量比较大需要较长的时间,需要用户等待,为了给用户友好的提示和避免用户在加载数据过程中进行重复操作,我们通常使 ...

  3. 常用API——字符串String型函数

    上图: 声明 var myString = new String(“Every good boy does fine.”); var myString = “Every good boy does f ...

  4. js/jquery 回调函数的定义方法

    基本写法: 带参数的回调函数 以上回调函数,直接传入function作为参数,同样,还可以传入json对象作为参数...如下. 该方法的优势是可以定义多个回调函数....类似$.ajax回调函数中的s ...

  5. iOS - OC 术语表

    1.术语表

  6. 用HTML5构建一个流程图绘制工具

    在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(Graph Theroy).利用图我们可以做很多工具,比如思维导图,流程图,状态机,组 ...

  7. PostMessage与SendMessage各自的问题

     深入解析SendMessage.PostMessage 本文将使用C++语言,在MFC框架的配合下给出PostMessage.SendMessage等的使用方式与使用不当造成的后果(讨论均针对自定义 ...

  8. myeclipse2015不能启动tomcat,提示: Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at local

    myeclipse2015不能启动tomcat,提示: Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at local ...

  9. 纯代码实现wordpress文章隐藏内容评论可见

    在很多网站上都看过这个效果,比如说知己知彼网站,他的部分资源是需要我们评论后才能下载的,那么这个到底有什么用呢,对我而言,除了拿来装逼,还可以增加我的评论数量,不多说,先看看效果: 其实WordPre ...

  10. pipelinedb Continuous transforms 操作

    Continuous transforms 可以进行数据的转换,数据是不进行存储,主要是可以加入到其他的stream pipeline 中,或者写到其他外部 存储中,和存储过程结合使用,当前默认内置一 ...