JavaWeb学习记录之html

HTML
一、HTML的概述
1、 HTML简介
 HTML(Hyper Text Markup Language)：超文本标记语言。

标记就是标签
HTML不是一种编程语言，而是一种标记语言
 作用：
*就是用来写网页的

2、 HTML的书写规范。
a).HTML的创建
可以使用文本编辑器来创建，扩展名html或htm
可以被IE（浏览器）解析浏览的。
b).HTML的结构

 html
包裹了整个HTML 文件
 head
网页的说明信息。
它里面的内容是不会显示。
 body
负责显示页面的
它里面的内容是会显示的
 title
它是网页的标题

	c).Html标签的规范			
	*Html是由一对尖括号包裹着的关键字组成的。例如：
	特殊情况：
	HTML的空标签。例如：

	*HTML标签通常是有属性的。属性格式：属性名=”属性值”   可以用双引号、单引号或者不加引号。建议使用引号的。  例如：真晴朗
	*HTML是可以嵌套使用的。（只允许包裹嵌套，不允许交叉嵌套）
	*HTML是大小写不敏感的。推荐使用小写

二、HTML的基本标签（链接标签、表格标签）
排版标签
 Br标签
*就是一个换行

  
*是一个空格

 HTML注释
*格式：

 P标签
*就是一个段落标签。段前段后各加一行
*属性：
>align 设置段落的对齐方式
 Hr标签（使用较少）
*就是一条水平线
*属性：
>color 设置水平线的颜色
>size 设置水平线的粗细
>width 设置水平线的长度

小知识：
1、HTML长度设置（了解）
像素：width =”6”或者width =”6px”
百分比：width =”80%”.它会随着浏览器改变而改变

2、 HTML的颜色设置（了解）
*颜色关键字 例如：red,blue,pink
*颜色代码。 例如：#000000。 每一位都是16进制。红色、绿色、蓝色
*三原色。 例如：rgb(0,0,0) 每一位取值0~255
块标签
 Div
在文档中设定一个块区域
块级元素（自动换行）
 Span
在行内设定一个块区域
内联元素（不自动换行）

HTML绝大多数都属于块级元素或者内联元素

字体标签（少）
 Font标签(少)
*设置字体的大小、颜色、字体类型
*属性：
>color 设置字体颜色

size 设置字体大小
face 设置字体类型。

 标题标签（一般）
*h1~h6
*h1最大，h6最小

 斜体、粗体标签（比较）

 滚动字幕（不建议）
(marquee标签)
*只兼容IE，所以不建议使用

列表标签
 有序列表(ol标签)
*属性
>type 设置有序列表的项目序号。 A,I,1

start 设置有序列表的项目序号起始值。

 无序列表(ul标签)（常用）
*属性：
>type 设置无序列表的项目标号。 （了解）

 列表项条目（li标签）

图片标签(常用)

*属性：
>src 设置图片引入路径的（常用）

alt设置替代图片的文字（常用）
width 设置图片的宽度
height 设置图片的高度
border 设置图片的相框宽度
align 设置图片的对齐方式（不建议使用）
小知识：
1、绝对路径和相对路径（重要）
绝对路径：文件在硬盘上的具体位置。
相对路径：文件相对于引入者的位置。

链接标签（重点）

*如果要实现跳转链接，那么必须有内容。例如：内容
*属性：
>href 设置链接路径（最常用）
访问内网：相对路径，绝对路径
访问外网：需要加上http协议。 例如：http://www.baidu.com

name 设置锚点（次常用）
相当于（书签）
配合herf使用
设置锚点，a标签可以没有内容
target 定位资源打开位置。（了解会用）
一般可以配合框架使用。
例如：打开

那么就是在名字为top的框架中打开。

表格标签（重点）
年度统计
第一季度 第二季度 总共
100 100 400
100 100

平均100

 表格标签
*table,用来定义一个表格
 行标签
*tr，用来定义一个表格内的行
 单元格标签
*td，用来定义一个单元格。
*th，用来定义一个表头单元格。默认居中加粗
*td及th属性：
>colspan 列合并
>rowspan 行合并
 表格标题标签
*caption，用来定义一个表格标题
*必须紧跟在table标签之后
*一个表格只有一个标题

 分组标签（了解会用）
*对表格中的行进行分组
*thead 定义表格的页眉。仅有一个
*tbody 定义表格的主体。一个或多个
*tfoot 定义表格的页脚。仅有一个
*如果在分组标签外定义了行，那么行默认属于TBODY
*分组标签如果使用必须三个一起使用，否则无效果。
分行下载：
可以控制表格分行下载，从而提高下载速度。
在需要分行下载处加上和。

公司年度报告
第一季度 第二季度 平均
100 100 100
100 100
400

三、HTML的表单标签（重点）
作用：表单用来提交用户输入的数据

 表单标签：
*,就定义了一个表单
*常用属性：
>action 规定当提交表单时，向何处发送表单数据
内网提交：绝对路径和相对路径
向外网提交：http://www.baidu.com
>method 规定如何发送表单数据(发送表单数据的方式)
post 和 get
默认是get

			面试题：
			表单提交 post和get的区别？
			1、get方式提交会把参数显示在地址栏
			post方式提交不会把参数显示在地址栏上

2、get方式敏感信息不安全
post方式敏感信息安全

			3、get方式提交，官方限制提交大小仅1KB（但多数浏览器可以提交2KB）
			post方式提交，提交大数据（提交附件用POST）

 输入标签：
*input，定义了一个输入表单项，用来接收用户输入的信息。
*属性：
>type 指定输入标签的类型
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。非明文
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值
附件框 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。例如：照片
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。例如：用户编号
按钮 button 可以为其自定义事件。
图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时，会将鼠标点击图片的坐标一起封装。较少使用
>name 用来指定输入项的名称。即参数名称
>value 用来指定输入项的值。即参数值
>checked 用来设置单选框或者多选框的默认勾选。值为checked或true为默认选中
 选择框标签
*select，定义了一个选择框
*属性：
>name 用来指定选择项的名称。即参数名称
*option，定义了一个选择框条目
*属性：
>value 用来指定选择项的值。即参数值
>selected 用来设置选择框的默认选中。值为selected为默认选中
 文本域标签（常用）
*textarea，定义一个文本域输入框
*属性：
>name 用来指定文本域的名称，即参数名
>cols 定义文本域显示几列
>rows 定义文本域显示几行
和区别：
1、文本域可以换行，而文本框不可以
2、文本域的值是写在内容体中的，文本框的值是在value中

注意：input select textarea 统称为表单项（表单输入项）

四、HTML的框架标签及特殊符号（了解）
其他标签（了解）
定义了页面信息
*存在于标签中

定义了文档和外部资源的关系 *存在于标签中 *用来引入CSS文件 特殊符号（了解）   不断行的空白符 < < 小于号 > > 大于号 & & &符号（经常用于传参） " “ 引号 ® ® 已注册 © © 版权 框架标签（了解会用） 作用：将网页分割成几个部分，在每个部分分别显示不同内容。 注：框架标签不可以放到里，一般为了代码的可读性，会到和之间。或者不要body也可以。  frameset 表示框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。 *常用属性： >cols 垂直切割。接收整数值或百分比。*代表占用剩余空间 >rows 横向切割。接收整数值或百分比。*代表占用剩余空间 吗  frame 表示框架页面，用来承载页面，并修改参数属性值 *常用属性： >src 表示资源的路径 >name 设置框架的名称 例如 top中打开。那么xx.html是在top框架中打开

框架已经逐渐被DIV+CSS形式取代