你的位置:首页 > 操作系统

[操作系统]JAVA Web day01


HTML

1、HTML的概述

1.1、HTML简介

l HTML(Hyper Text Markup Language):超文本标记语言。

>标记就是标签

>HTML不是一种编程语言,而是一种标记语言

l 作用:

就是用来写网页的

1.2、HTML的书写规范

a).HTML的创建

可以使用文本编辑器来创建,扩展名html或htm

因为windows之前不支持3个以上的拓展名,后来才逐渐完善,所以html和htm本质是一样的

可以被IE(浏览器)解析浏览的。

b).HTML的结构

<html>

<head>

<title></title>

</head>

<body></body>

</html>

c).Html标签的规范

*Html是由一对尖括号包裹着的关键字组成的。例如:<title>

*HTML通常是成对出现的,是由一个开始标签和一个结束标签组成的。例如:<title></title>

特殊情况:

HTML的空标签。例如:<br/>

*HTML标签通常是有属性的。属性格式:属性名=”属性值”   可以用双引号、单引号或者不加引号。建议使用引号的。  例如:<font color="blue" size='22' face=隶书>真晴朗</font>

*HTML是可以嵌套使用的。(只允许包裹嵌套,不允许交叉嵌套)

*HTML是大小写不敏感的。推荐使用小写

2、HTML的基本标签(链接标签、表格标签)

2.1、文件标签

l <html>标签

声明了该文档是一个HTML文档。

包裹了整个HTML 文件

l <head>标签

网页的说明信息。

它里面的内容是不会显示。

l <title>标签

它是网页的标题

l <body>标签

负责显示页面的

它里面的内容是会显示的

*属性:

>text 设置body标签中正文的颜色

>background  设置body背景图片

>bgcolor 设置body的背景颜色

2.2、排版标签

l <br/>标签

*就是一个换行

l

*是一个空格

l HTML注释

*格式:<!--注释内容 -->

l <p>标签

*就是一个段落标签。段前段后各加一行

*属性:

>align  设置段落的对齐方式

l <hr/>标签

*就是一条水平线

*属性:

>color  设置水平线的颜色

>size 设置水平线的粗细

>width 设置水平线的长度

扩展:

1、HTML长度设置(了解)

像素:width =”6”或者width =”6px”

百分比:width =”80%”.它会随着浏览器改变而改变

2.3、块标签

l <div>

在文档中设定一个块区域

块级元素(自动换行)

l <span>

在行内设定一个块区域

内联元素(不自动换行)

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

2.4、字体标签

l <font>标签

*设置字体的大小、颜色、字体类型

*属性:

>color 设置字体颜色

>size 设置字体大小 取值范围 1~7

>face 设置字体类型。

l 标题标签

*h1~h6

*h1最大,h6最小

l 斜体、粗体标签

<i></i>

<b></b>

2.5、列表标签

l 有序列表(ol标签)

*属性

>type 设置有序列表的项目序号。 A,I,1

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

l 无序列表(ul标签)(常用)

*属性:

>type 设置无序列表的项目标号。

l 列表项条目(li标签)

2.6、图片标签

l <img />

*属性:

>src 设置图片引入路径的(常用)

>alt设置替代图片的文字(常用)

>width 设置图片的宽度 

>height 设置图片的高度

>border 设置图片的相框宽度

>align 设置图片的对齐方式(不建议使用)

2.7、链接标签(重点)

l <a>

*如果要实现跳转链接,那么必须有内容。例如:<a>内容</a>

*属性:

>href 设置链接路径(常用)

  访问内网:相对路径或者绝对路径

访问外网:需要加上http协议。 例如:http://www.baidu.com

>name 设置锚点(常用)

  配合herf使用

  设置锚点,a标签可以没有内容

>target 定位资源打开位置。

一般可以配合框架使用。

例如:<a href=”xx.html” target=”top”>打开</a>

  <frame name=”top”/>

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

2.8、表格标签(重点)

l 表格标签

*table,用来定义一个表格

l 行标签

*tr,用来定义一个表格内的行

l 单元格标签

*td,用来定义一个单元格。

*th,用来定义一个表头单元格。默认居中加粗

*td及th属性:

>colspan 列合并

>rowspan 行合并

l 表格标题标签

*caption,用来定义一个表格标题

*必须紧跟在table标签之后

l 分组标签

*对表格中的行进行分组

*thead 定义表格的页眉。仅有一个

*tbody 定义表格的主体。一个或多个

*tfoot 定义表格的页脚。仅有一个

*如果在分组标签外定义了行,那么行默认属于TBODY

*分组标签如果使用必须三个一起使用,否则无效果。

分行下载:

可以控制表格分行下载,从而提高下载速度。

在需要分行下载处加上<tbody>和</tbody>。

 

3、HTML的表单标签(重点)

作用:表单用来提交用户输入的数据

3.1、表单标签

*<form>,就定义了一个表单

*常用属性:

>action  规定当提交表单时,向何处发送表单数据。(默认向本页提交)

向外网提交:需要加http协议,

例如:http://www.baidu.com

向内网提交:相对路径和绝对路径

>method  规定如何发送表单数据

HTML中分为两种:

post  和  get

默认是get

面试题:

表单提交 post和get的区别?

1、get方式提交会把参数显示在地址栏

post方式提交不会把参数显示在地址栏上。(请求体中)

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

post方式敏感信息安全

3、get方式提交,官方限制提交大小仅1KB(但多数浏览器可以提交2KB)

post方式提交,提交大数据

get方式发送表单数据:

地址栏上:?参数名1=参数值1&参数名2=参数值2

Post方式发送表单数据:

请求体中

3.2、输入标签

*input,定义了一个输入表单项,用来接收用户输入的信息。

*属性:

>type 指定输入标签的类型

文本框 text。输入的文本信息直接显示在框中。

密码框 password。输入的文本以原点或者星号的形式显示。非明文

单选框 radio 如:性别选择。

复选框 checkbox 如:兴趣选择。

提交按钮 submit 用于提交表单中的内容。

重置按钮 reset 将表单中填写的内容设置为初始值

附件框 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。例如:照片

隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。例如:用户编号

按钮   button 可以为其自定义事件。

图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时,会将鼠标点击图片的坐标一起封装。较少使用

>name 用来指定输入项的名称。即参数名称

>value 用来指定输入项的值。即参数值

>checked 用来设置单选框或者多选框的默认勾选。值为checked为默认选中

>src 当type=”image”时,该属性用来引入图片

3.3、选择框标签

*select,定义了一个选择框

*属性:

>name 用来指定选择项的名称。即参数名称

> multiple 用来设置选择框为多选形式

*option,定义了一个选择框条目

*属性:

>value 用来指定选择项的值。即参数值

如果未设置value属性,那么默认提交的是<option>标签的内容体

>selected 用来设置选择框的默认选中。值为selected为默认选中

3.4、文本域标签

*textarea,定义一个文本域输入框

*属性:

>name 用来指定文本域的名称,即参数名

>cols 定义文本域显示几列

>rows 定义文本域显示几行

和<input type=“text”/>区别:

1、文本域可以换行,而文本框不可以

2、文本域的值是写在内容体中的,文本框的值是在value中

 

作业 : 用table和form组合在一起写一个注册表单。(用form嵌套table)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用户注册</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body>  <form action="">    <table>      <tr>        <td>用户名</td>        <td><input type="text" name="username"></td>      </tr>      <tr>        <td>密码</td>        <td><input type="password" name="password"></td>      </tr>      <tr>        <td>性别</td>        <td><input type="radio" name="sex" value="man"          checked="checked">男 <input type="radio" name="sex"          value="woman">女</td>      </tr>      <tr>        <td>爱好</td>        <td><input type="checkbox" name="hobby" value="lol">英雄联盟          <input type="checkbox" name="hobby" value="lushi">炉石传说 <input          type="checkbox" name="hobby" value="dota2">dota2</td>      <tr>        <td>所在城市</td>        <td><select name="city">            <option value="beijing" selected="selected">北京</option>            <option value="shanghai">上海</option>            <option value="guangzhou">广州</option>            <option value="shenhzhen">深圳</option>        </select></td>      </tr>      </tr>      <tr>        <td>照片</td>        <td><input type="file" name="photo"></td>      </tr>      <tr>        <td>简介</td>        <td><textarea rows="10" cols="20"></textarea></td>      </tr>      <tr>        <td><input type="submit" value="提交"></td>        <td><input type="reset" value="重置"></td>      </tr>    </table>  </form></body></html>