- 博客(0)
- 资源 (5)
- 收藏
- 关注
RSS订阅HTML知识体系小结
HTML
常识
Web三要素：浏览器 / 服务器 / HTTP协议
主流浏览器：IE、Firefox、Chrome、safari、Edge
html：部署在服务器上，运行在浏览器上
HTML:用来描绘网页的结构和内容
CSS:用来美化网页
JavaScript(JS):让网页呈现动态的数据和效果
XML与HTML对比
XML:可扩展标记语言：标签、属性、嵌套关系可以自定义,用来存储或传输数据
HTML:超文本标记语言：标签、属性、嵌套关系固定(w3c),用来显示数据
可以将HTML理解为标签固定的XML
创建WEB项目
选择war项目
选择JAVAEE开发视图(点右上角加号)
右键Deployment，点击Generate
网页构架
<!-- 声明网页的版本 -->
<!doctype html>
<!-- 唯一的根元素 -->
<html>
<!-- 第1个孩子：网页基本的声明 -->
<head>
<!-- 设置网页内容的编码 -->
<meta charset="utf-8">
<!-- 网页的标题 -->
<title>第1个HTML</title>
</head>
<!-- 第2个孩子：网页的内容 -->
<body>
HTML真牛
</body>
</html>
常用标签
文本元素
标题元素
<hn>标题</hn>
段落元素
<p>段落</p>
列表元素
<ol>
<li>
河北省
<ul>
<li>石家庄</li>
<li>廊坊</li>
<li>保定</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>德州</li>
</ul>
</li>
</ol>
分区元素
块分区：<div></div>
行内分区：<span></span>
行内元素
<span>
<i>斜体字
<em>着重文字
<b>粗体
<strong>加重文字
<del>删除线
<u>下划线
<br/>换行
实体引用
图像
<img src=” ”/>
超链接
普通用法
<a href=” ” target=” ”>文本</a>--------_blank _self
锚点用法
链接到本页面指定的位置(锚点)
<a name="flag">锚点</a>
<a href=” #flag” target=” ”>回到锚点</a>
页面的顶部默认是一个锚点，没名字
<a href="#">回到顶部</a>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本处理</title>
</head>
<body>
<!-- 1.标题 -->
<h1>苍老师</h1>
<h2>范传奇</h2>
<h3>王克晶</h3>
<!-- 2.段落 -->
<p>范传奇暗恋王克晶</p>
<!-- 7.2.2增加超链接并链到锚点 -->
<p><a href="#cang">苍老师</a>吃醋</p>
<!-- 3.列表 -->
<!-- 3.1有序列表 -->
<ol>
<li>河北省</li>
<li>山东省</li>
<li>江苏省</li>
</ol>
<!-- 3.2无序列表 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<!-- 3.3列表嵌套 -->
<ol>
<li>
河北省
<ul>
<li>石家庄</li>
<li>廊坊</li>
<li>保定</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>德州</li>
</ul>
</li>
</ol>
<!-- 4.行内元素 -->
<p>
<u>北京市</u>海淀区<b>北三环</b>西路甲18号<span style="color:red;">中鼎大厦</span>B座8层
</p>
<!-- 5.空格折叠 -->
<p>
那是一个 秋天，<br>
看着传奇 跑偏。<br>
奔着克晶 而去，<br>
误入老苍 心间。<br>
</p>
<!-- 6.图片 -->
<!-- 6.1绝对路径
从盘符开始写出图片的完整目录和名称。
例子：D:/day01/images/1.jpg
例子：/home/soft01/day01/1.jpg
当开发完成并上线时，网页交给客户使用，
若他改变图片的目录，就会导致报错。 -->
<!-- 6.2相对路径
写出图片相对于HTML的路径，而不必
写出它存储的完整目录。
a.将图片和网页放在一处
1.jpg
b.将图片放在网页的下级目录内
a/1.jpg
c.将图片放在网页的上级目录内
../1.jpg -->
<p>
<img src="01.jpg"/>
<img src="a/02.jpg"/>
<img src="../03.jpg"/>
<!-- 一般是这样用的 -->
<img src="../images/04.jpg"/>
</p>
<!-- 7.超链接 -->
<!-- 7.1普通的用法 -->
<p>
<a href="http://www.tmooc.cn" target="_blank">达内</a>
</p>
<!-- 7.2特殊的用法：锚
链接到本页面指定的位置(锚点)。 -->
<!-- 7.2.1将指定位置做成锚并命名 -->
<p>
<a name="cang">苍老师</a>呀苍老师，不但会讲课，还会拍片子。
</p>
<!-- 页面的顶部默认是一个锚点，没名字 -->
<p><a href="#">回到顶部</a></p>
<!-- 8.表格 -->
<!-- 8.1表格的语法 -->
<table border="1px" cellspacing="0" width="30%">
<tr>
<td>苍老师</td>
<td>范传奇</td>
</tr>
<tr>
<td>王克晶</td>
<td>程祖红</td>
</tr>
</table>
<!-- 8.2跨行 -->
<table border="1px" cellspacing="0" width="30%">
<tr>
<td rowspan="2">苍老师</td>
<td>范传奇</td>
</tr>
<tr>
<!-- <td>王克晶</td> -->
<td>程祖红</td>
</tr>
</table>
<!-- 8.3跨列 -->
<table border="1px" cellspacing="0" width="30%">
<tr>
<td colspan="2">苍老师</td>
<!-- <td>范传奇</td> -->
</tr>
<tr>
<td>王克晶</td>
<td>程祖红</td>
</tr>
</table>
<!-- 8.4行分组：
对行进行分区，为了便于设置样式。 -->
<table border="1px" width="30%" cellspacing="0">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color:red;">
<tr>
<td>001</td>
<td>鼠标</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>键盘</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<td>150</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单
表单元素
<form></form>
属性：action 表单提交的URL
Method 表单数据提交的方式
Enctype 表单数据进行编码的方式
表单控件
文本框 <input type=”text” /> value maxlength readonly
密码框 <input type=”pasword” /> value maxlength readonly
单选框 <input type=”radio” /> value name checked
复选框 <input type=”checkbox” /> value name checked
按钮：提交 <input type=”submit” /> value
重置 <input type=”reset” /> value
普通 <input type=”button” /> value
隐藏域 <input type=”hidden” />
文件选择框 <input type=”file” />
标签 <label for=”控件ID”>文本</label>
文本域 <textarea>文本</textarea> cols rows readonly
下拉选 <select>
<option value=”1”>java</option>
<option value=”2”>pho</option>
<option value=”3”>c#</option>
</select>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 1.表单元素：
action：声明表单提交的目标。
method/enctype：将来再讲。 -->
<form action="http://www.tmooc.cn">
<!-- 2.表单控件： -->
<!-- 2.1 input元素：通过type属性区分 -->
<!-- 文本框
value：设置默认值。
maxlength：设置最大长度。
readonly：设置只读。 -->
<p>
账号:<input type="text"
value="请输入账号"
maxlength="10" readonly/>
</p>
<!-- 密码框：属性同上。 -->
<p>
密码:<input type="password"/>
</p>
<!-- 单选框
name：设置分组，同一组的radio互斥。
checked：设置默认选中。
value：将来再讲。 -->
<p>
性别:
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女
</p>
<!-- 多选框
checked：设置默认选中。
name/value：将来再讲。 -->
<p>
兴趣：
<input type="checkbox" checked/>听音乐
<input type="checkbox" checked/>打游戏
<input type="checkbox"/>做运动
</p>
<!-- 文件框 -->
<p>
头像:<input type="file"/>
</p>
<!-- 隐藏框：
用来向服务器传递秘密的数据，
该数据是程序员写入的，不需要用户输入。 -->
<p>
<input type="hidden" value="123"/>
</p>
<!-- 按钮：提交、重置、普通。
三种按钮通过type区分，即type只能
表示按钮的功能，而按钮的名称通过
value设置。 -->
<p>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="删除"/>
</p>
<!-- 2.2 其他元素 -->
<!-- label：管理表单内的文本，
可以将文本与框绑定在一起，从而
增加框的受力(可点击的)面积。
id：任何元素都有id，是元素的唯一标识。 -->
<p>
<label for="c1">我已阅读并自愿遵守此协议！</label>
<input type="checkbox" id="c1"/>
</p>
<!-- 下拉选
selected：设置默认选中。
value：将来再讲。 -->
<p>
家乡:
<select>
<option>请选择</option>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</p>
<!-- 文本域 -->
<p>
简介:
<textarea rows="8" cols="30">abc</textarea>
</p>
</form>
</body>
</html>
2017-09-11
二进制图文详解
二进制图文详解
二进制Binary
2进制
逢二进一的计数规则。
在计算机内部，一切数据都是2进制的！！
2进制的数字
补码
补码本质是一种解决负数问题的算法。
1. 将数据的一半当做负数使用。
2. 补码在内存中是2进制的，显示的时候为10进制。
- Java利用算法支持了补码计算：
- Integer.parseInt()
- Integer.toString()
3. 补码的缺点：
- 不支持超范围计算
- 超范围计算自动溢出
4. 解决补码的缺点：采用更大范围(更多位数)的补码
Java是如何计算 -2-1 的
补码的规律
1. 最大值的规律：最高位0 剩下全是1
- int类型：一个0，31个1
- long类型：一个0，63个1
2. 最小值的规律：最高位1 剩下全是0
- int类型：一个1，31个0
- long类型：一个1，63个0
3. 负数的最高位是1， 正数最高位是0
- 最高位做为识别正数和负数的标志位：称为符号位
- 注意：符号位不是用来表示正负号的！！！
4. -1 的规律：所有位都是1！！
5. 溢出是有规律的！ 是一个周期性计算结果。
- 最大值+1 = 最小值
6. 补码的对称现象：-n = ~n + 1
案例：
int max = Integer.MAX_VALUE;
System.out.println(Integer.toBinaryString(max));
int min = Integer.MIN_VALUE;
System.out.println(Integer.toBinaryString(min));
long lmax = Long.MAX_VALUE;
System.out.println(Long.toBinaryString(lmax));
long lmin = Long.MIN_VALUE;
System.out.println(Long.toBinaryString(lmin));
//-1的规律
int n = -1;
System.out.println(Integer.toBinaryString(n));
long l = -1L;
System.out.println(Long.toBinaryString(l));
//最大值+1溢出得到最小值
// 推论：Java中的int数字是按照补码圆环排列的
int m = Integer.MAX_VALUE+1;
System.out.println(m);//最小值
//一个数的溢出测试：
n = 345;
m = n + Integer.MAX_VALUE+1;
System.out.println(m);//负数
m = n + Integer.MAX_VALUE+1+
Integer.MAX_VALUE;
System.out.println(m);//344 正数
m = n - (Integer.MAX_VALUE+1+
Integer.MAX_VALUE+1);
System.out.println(m);//345 正数
经典面试题1
正数的溢出结果是负数（错误！！！）
经典面试题2
int i = Integer.MAX_VALUE+1;
System.out.println( Integer.toBinaryString(i));
选择运行结果(D)：
A. 11111111111111111111111111111111
B. 1111111111111111111111111111111
C. 01111111111111111111111111111111
D. 10000000000000000000000000000000
经典面试题3
System.out.println(~-55);
如上代码的运算结果： （ 54 ）
System.out.println(~-230);
如上代码的运算结果： （ 229 ）
System.out.println(~55);
如上代码的运算结果： （ -56 ）
16进制
16进制是2进制的简写形式
2进制运算
1. ~ 取反运算
2. & 与运算（逻辑乘法）
运算规则：
1 & 1 = 1
1 & 0 = 0
0 & 1 = 0
0 & 0 = 0
与运算用途：
n： 00010100 11010111 01010001 11101010
m： 00000000 00000000 00000000 11111111
2017-09-11
ajax异步请求小结
具体描述ajax的获取，ajax属性，参数设置，编程步骤，缓存问题，get/post乱码问题，以及应用场景的阐述
onreadystatechange
绑订事件处理函数(处理readystatechange事件)。
注：当readyState属性值发生了任何的改变，比如从0变成了1，就会产生readystatechange事件。
readyState
有五个值(0,1,2,3,4),表示ajax对象与服务器通信的状态。其中，4表示ajax对象已经获得了服务器返回的所有的数据。
responseText
获得服务器返回的文本。
responseXML
获得服务器返回的xml文档。
status
获得服务器返回的状态码。
2017-08-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人