HTML整理

HTML常用标签

<h1>标题标签</h1>   h1-h6

<hr/>水平线标签

• size属性:设置水平线的高度,单位是像素(px)
• noshade属性:没有阴影,表示纯色,取值:noshade
• color属性:用于设置颜色
• width属性:设置标签的宽度,属性值可以是像素,也可以是百分比
• align属性:设置标签的对齐方式，属性值:left rigth center(默认)

<font>字体标签</font>

• size:设置字体的大小,范围1(小)--7(大),不写默认3号字体
• color:设置字体的颜色,不写默认黑色
• face:设置字体
   

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<p>分段</p>
<br/> 换行

<img/> 图片标签

• src:设置图片的路径
• title:设置图片的标题,鼠标移动到图片上,会显示标题
• alt:图片丢失,显示文字
• height:设置图片的高度,单位是像素px
• width:设置图片的宽度,单位是像素px

列表标签:

• 有序列表:使用ol标签
  • <ol>
    <li>列表项</li>
    ...
    <li>列表项</li>
    </ol>
    type:用于设置列表显示的文字(1,I,A,a...),不写默认是阿拉伯数字
• 无序列表:使用ul标签
  • <ul>
    <li>列表项</li>
    ...
    <li>列表项</li>
    </ul>
    type:用于设置列表显示的形状,disc实心圆(不写默认) square方块 circle空心圆

超链接标签:用于页面的跳转
<a>文字|图片</a>
href:设置跳转的路径
target:设置跳转的方式

• _self:默认属性,在当前页面打开新的链接
• _blank:在新的页面打开新的链接

<table></table>表格标签

• border:表格边框的宽度。单位像素px
• width:表格的宽度。单位像素px
• cellpadding:单元边沿与其内容之间的空白。单位像素px
• cellspacing:单元格之间的空白。 单位像素px
• bgcolor:表格的背景颜色。
• align:单元格内容的水平对齐方式,left、right、center。

<tr></tr>标签用于定义行
<th>标签用于定义表头,单元格内的内容默认居中、加粗。
<td>标签用于定义列

• colspan:单元格可横跨的列数。
• rowspan:单元格可横跨的行数。
• nowrap:设置单元格中的内容是否折行(内容不换行)

转义字符

• 半个英语字母英文空格&nbsp;
• 一个汉字中文空格&emsp;
• 小于号&lt;
• 大于号&gt;
• &符号&amp;
• ×叉号&times;
• ￥人民币符号&yen;
• $美元符号

<div>行间标签,会占用html中的一行</div>
<span>行内标签,会占用一行中的一部分</span>

注意:div标签和span标签一般都是和css一起使用,否则没有意义

表单相关标签

form表单标签

• action:用于设置表单提交的路径,没有写#
• method:设置表单的提交方式(get,post),不写默认get

form子标签:<input>用于获得用户输入信息

type属性

• text:普通文本
• password:密码输入框
• radio:单选框
  • name:给标签起一个名字,同名互斥,只能选择一个
  • checked:设置默认选中的值
• label:配合单选和复选框使用,点击文本可以选中
  • for:指向input标签的id属性
• checkbox:复选框
• file:上传文件
• date:日期选择框
• image:上传图片使用
  • src:设置要上传图片的路径
  • height:设置图片的高度,单位像素
  • width:设置图片的宽度,单位像素
• hidden:隐藏域,存储数据使用,不会在浏览器页面显示
• botton:普通按钮,配合js使用
• reset:重置按钮,把表单的恢复到默认状态(清空表单)
• submit:提交按钮,把表单的数据,提交到服务器(form表属性的action的路径)
  • value:
    按钮标签(button,reset,submit)用于给按钮起名字
    其他标签:给标签设置默认值

form子标签:select下拉选标签,配合子标签option(下拉选的列表项)一起使用

• name属性：发送给服务器的名称
• multiple属性：不写默认单选，取值为“multiple”表示多选。
• size属性：多选时，可见选项的数目。
• <option> 子标签：下拉列表中的一个选项
  • selected ：勾选当前列表项
  • value ：发送给服务器的选项值。不写默认发送标签体

form子标签:textarea多行文本域

• cols:设置文本域默认显示的列数
• rows:设置文本域默认显示的行数

标签的通用属性:

• name:表单数据提交到服务器必须提供name属性值，服务器通过属性值获得提交的数据。
• value:设置input标签的默认值。submit和reset和button为按钮显示数据
• 注意:除了文本输入域(text,password,textarea)其他标签需要设置value属性值
• checked属性：单选框或复选框被选中。
• readonly：是否只读
• disabled：是否可用
• placeholder:html5的新属性,给标签添加默认显示的值,输入数据隐藏默认值

CSS样式规则

格式:
<style type="text/css">
选择器{
属性名:属性值;
...
}
</style>

选择器:选择要添加html标签的,可以根据标签的名称,id属性值,class属性值来选择

引入css样式的方式

1.行内样式:
<标签 style="属性名:属性值;..;"></标签>
2.内部样式:
<style type="text/css">
选择器{
属性名:属性值;
...
}
</style>
3.外部样式:把css的样式规则,写在一个以.css结尾的文件中
需要在html中使用link标签引入外部的css文件使用
<link href="外部css文件的路径" type="text/css" rel="stylesheet" />
样式的优先级:
行内样式>内部样式|外部样式(内部和外部谁写在后边,后边的样式会覆盖前边的样式)

CSS的选择器:

1.基本选择器

• 1.元素选择器:根据元素的名称,选择对应的元素
  • <h1></h1> 选择器: h1{属性名:属性值;...}
• 2.id选择器:给元素添加一个id属性,通过id的属性值选择到元素
  • <h1 id="d001"></h1>
  • 选择器:#d001{属性名:属性值;...}
  • 注意:如果多个元素的id属性值是相同的,只能获取到第一个
• 3.class(类)选择器:给元素添加一个class属性,通过class的属性值选择到元素
  • <h1 class="c001"></h1>
  • 选择器:.c001{属性名:属性值;...}

2.扩展选择器

• 1.属性选择器:对元素选择器进行扩展,在继续通过标签的属性选择到对应的标签
  • 格式:标签名[属性名='属性值']{属性名:属性值;...}
    input{
    background-color: pink;
    }
    input[type='text']{
    background-color: pink;
    }
• 2.包含选择器(子父类选择器):对元素选择器进行扩展,通过后代选择对应的标签
  • 格式:父标签 子标签{属性名:属性值;...}
    div h2{
    color: green;
    }
    #d002 h2{
    color: green;
    }
• 3.伪类选择器:专用于超链接标签
  • 格式:必须是lvha顺序
    a:link {color: #FF0000} /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */

CSS常用样式

1.边框和尺寸

• 边框:给元素添加边框
• border:可以同时给元素设置4个边框(上下左右)
  border-top:上边框
  border-right:右边框
  border-bottom:下边框
  border-left:左边框
  属性值:同时设置边框的颜色,尺寸,格式
  格式: solid实线 double双线 none无边
• 尺寸:设置元素的高度和宽度
• width:设置元素的宽度,单位像素
  height:设置元素的高度,单位像素

2.转换属性
display:可以把行间元素和行内元素相互转换,还可以隐藏元素

• inline:设置元素为行内元素
• block:设置元素为行间元素
• none:设置隐藏元素(不在html页面中显示,也不会占用空间)

3.字体属性

• color:设置字体颜色
• font-size:设置字体大小,单位像素px
• font-weight:bold 设置字体加粗
• font-style:italic 设置斜体
• font-family:字体
• text-decoreation:none 取消文字上的下划线

4.背景色和背景图片

• background-color:设置背景色
• background-image:url设置背景图片
• background-repeat: no-repeat;背景图片不平铺
• background-position: top 0px right 0px;背景图片位置 右上角

5.浮动属性

• float属性:可以使用浮动属性让div漂浮起来,不在占用一行
  • left:左浮动
  • right:右浮动
  • none:不浮动
• clear属性:取消之前设置的浮动属性
  • left:取消左浮动
  • right:取消右浮动
  • both:同时取消左右浮动

6.CSS的盒子模型

• 1.盒子的外边距:设置这个盒子到其他盒子之间的距离
  • margin,设置外边距
    • margin:同时设置4个外边距
    • margin-top:上外边距
    • margin-right:右外边距
    • margin-bottom:下外边距
    • margin-left:左外边距
• 2.盒子的内边距:设置盒子边框到盒子中内容的距离
  • padding,设置内边距
    • padding:同时设置4个内边距
    • padding-top:上内边距
    • padding-right:右内边距
    • padding-bottom:下内边距
    • padding-left:左内边距

 JavaScript

1.JS两种引入方式:

• 1.内嵌式(内部脚本):在html中创建一个script标签,在标签中写js代码
  • 格式:
    <script type="text/javascript">
    js代码;
    </script>
• 2.外联式(外部脚本):新建一个以.js结尾的文件,在文件中写js代码,在html页面中使用script标签引入外部的js文件
  • 格式:
    <script type="text/javascript" src="外部js文件的路径"></script>

2.JS三种输出方式

• 1.把数据输出到浏览器的控制台
  • console.log();
• 2.输出到html页面的body中
  • document.writeln();
• 3.浏览器弹出对话框输出
  • alert()

3.js的基本语法_变量

• var 变量名 = 数据值;
  • 作用域在这个script标签中都有效,可以先使用变量,再定义变量
• let 变量名 = 数据值;
  • 局部变量,必须先定义后使用
• 变量没有赋值,有默认值undefined
• const 常量名 = 数据值;

4.JS基本数据类型

• undefined 类型:只有一个值undefined,变量定义未赋值默认值
• null 类型:只有一个值null,undefined类型就是使用null演化而来
• number 类型:所有的整数和小数
• string 类型:所有被单引号和双引号包裹的字符串
• boolean 类型:只有两个值true和false
• 关键字 typeof:可以查看变量的数据类型

5.JS引用数据类型所有的对象都是object对象

注：

• js会把字符串的整数,转换为整数参与计算,加法是字符串连接，
• ==:比较的是值是否相等
• ===:比较的是值与数据类型是否相等

6.js中遍历数组,js中没有集合

格式:for-in==>获取到的是数组的索引

• for(var|let 索引 in 数组名){
  console.log(数组名[索引]);
  }

格式:for-of==>获取到的是数组的元素

• for(var|let 变量名 of 数组名){
  console.log(变量名);
  }

7.js中的函数

• function 函数名(参数列表){
  函数体;
  return 返回值;
  }

注:写return就有返回值,不写return就没有返回值
调用函数:

• 有返回值的函数:var|let 变量名 = 函数名(参数);
• 没有返回值的函数:函数名(参数);

8.js中的事件

• onload 某个页面或图像被完成加载
• onsubmit 当表单提交时触发该事件---注意事件源是表单form
• onclick 鼠标点击某个对象
• ondblclick 鼠标双击某个对象
• onblur 元素失去焦点
• onfocus 元素获得焦点
• onchange 用户改变域的内容
• onkeydown 某个键盘的键被按下
• onkeypress 某个键盘的键被按下或按住
• onkeyup 某个键盘的键被松开
• onmousedown 某个鼠标按键被按下
• onmouseup 某个鼠标按键被松开
• onmouseover 鼠标被移到某元素之上
• onmouseout 鼠标从某元素移开
• onmousemove 鼠标被移动

9.window 对象
        window对象中的属性和方法,都可以省略对象名直接使用
弹框的方法

• 1. 提示框：alert(提示信息);
• 2. 确认框：confirm(提示信息);
• 3. 输入框：prompt(提示信息);

10.location对象

• 1. 获取当前浏览器地址--location.href
• 2. 刷新当前页面--location.reload();
• 3. 跳转页面:--location.href = "地址" ;

jsp

1.注解

• <!-- 出现在浏览器的源代码中 --> 
• <%-- 不会出现在浏览器的源代码中 --%> 

2.脚本

• <% Java代码 %> 方法里
• <%! java代码 %> 方法外
• <%= java代码 %>向浏览器输出数据

3.指令

 <%@ 指令名称 属性名=属性值...%>
page： 用于配置JSP页面

• <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  language 语言，目前仅支持java
  contentType 相当于response.setContentType(); 设置响应体MIME类型和编码方式
  import 导入jar包
  errorPage 当前页面报错后，跳转到错误提示页面
  isErrorPage 声明当前jsp页面，是一个异常处理页面

include： 用于实现JSP页面的包含

• <%@ include file="gg.jsp" %>
  * 用于在JSP页面中静态包含一个文件，编译之后会将引入的jsp代码合入本jsp

taglib： 用于导入标签库

•  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  uri 标签文件的URI地址
  prefix 标签组的命名空间前缀