Java Web(二）--HTML

基本介绍

    官网文档地址:     HTML 教程

    HTML（HyperText Mark-up Language）即超文本标签语言；HTML 文本是由 HTML 标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等；HTML 的结构包括头部（Head）、主体（Body）两大部分。

•         头部描述浏览器所需的信息
•         主体则包含所要说明的具体内容。

注意：HTML  文件不需要编译，直接由浏览器进行解析执行；

网页的结构图

---

html 基本结构

说明：

    HTML 标签：

• 用两个尖括号”<>”括起来
• 一般是双标签； 如和  前一个标签是起始标签,  后一个标签为结束标签；
• 两个标签之间的文本是html 元素的内容；

    某些标签称为"单标签",因为它只需单独使用就能完整地表达意思：

•         
   ：表示换行
•         

  ---

  ：表示线条

    HTML 元素指的是从开始标签到结束标签的所有代码；

    html命名规范 xx.yy.html  ， xx-yy.html ， xx_yy.html  根据公司规范要求即可

    

    
    

    
    





hello,Java教育

    
    





tom


jack




张飞
关羽

---

HTML 标签/元素

1、font字体标签

它可以用来修改文本的字体,颜色,大小(尺寸)。

语法 

•     北京

属性

•     color  属性修改颜色
•     face  属性修改字体
•     size  属性修改文本大小

注意：对应标签的属性，顺序不做要求；

---

2、字符实体

在网页上显示一些特殊的符号， 称为字符实体(也叫符号实体)。

1. HTML ISO-8859-1 参考手册
2. HTML 符号实体参考手册

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

jack


<hr/>
smith smith2        hsp

smith smith2           hsp

---

3、标题标签

标题使用

-

 标签进行定义：   

 定义最大的标题；

 定义最小的标题。

语法：    

标签1

标签1
标签2
标签3
标签4
标签5
标签6

---

 4、超链接

超链接是指从一个网页指向一个目标的链接关系；

目标：另一个网页；相同网页上的不同位置；一个图片；一个电子邮件地址；一个文件；一个应用程序等等。

语法：    搜狐2

属性：

•         a 标签是超链接
•         href 属性设置连接的地址
•         target 属性设置哪个目标进行跳转：  _self : 表示当前页面(默认值)； _blank :    表示打开新页面来进行跳转

搜狐

搜狐2

联系管理员

---

5、列表

无序列表 ul/li：

有序列表 ol/li：

五虎将


    
jack
    
tom
    
smith
    
mary
    
milan

---

 6、图像标签

可以在 html  页面上显示图片。

语法：    

属性：

•         img:    标签是图片标签,用来显示图片
•         src:    属性可以设置图片的路径
•         width:    属性设置图片的宽度
•         height: 属性设置图片的高度
•         border:    属性设置图片边框大小
•         alt:    属性设置当指定路径找不到图片时,用来代替显示的文本内容

图片标签的演示





 

---

7、表格标签

基本语法：

 

   
       
       
       
   
   
       
       
       
   

名字	住址	邮件
第1行第1列	第1行第2列	第1行第3列

跨行跨列

•     合并列: colspan="列数"
•     合并行: rowspan="行数"
•     bordercolor:  指定表格边框的颜色

    
    






    

        
        
第1行第1列
    

    

        
        
第2行第1列
        
第2行第2列
        
第2行第3列
    

    

        
第3行第2列
        
第3行第3列
    

    

        
        
第4行第1列
        
第4行第2列
        
第4行第3列
    

    

        
第5行第2列
        
第5行第3列
    

---

7、表单标签

语法格式：

1. form 表示表单

2. action 表示提交到哪个页面

•     表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)；    

3. method 表示提交方式

    1）常用提交方式 --get

•             默认方式；
•             请求不安全的，而且数据是有长度限制的, 建议有重要信息，不要使用Get
•             浏览器地址栏中的地址是：action 属性[+?+请求参数]；
•              请求参数的格式：http://localhost:63342/html/ok.html?username=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender=male&city=bj

    2）常用提交方式 --getpost

•             请求数据是和http传输的，在http体中，相对安全；
•             传输的数据长度理论上没有限制，但是在实际的应用中，也不能太大 , 即合理即可；
•             浏览器地址栏中只有 action 属性值, 提交的数据是携带在 http 请求中, 不会展示在地址栏；

注意：

一定要给 input 元素设置 name 属性，否则，数据提交不到服务器；

在 checkbox、select、radio 提交数据的时候是 value 属性的值；

对应checkbox 复选框，可以提交多个字，但是name是统一的，都是sport：sprot=xx&sport=yy

提交的数据，一定要放在 form标签内，否则数据不会提交； 一定使用 form 标签将 input 元素包起来。

input标签

序号	常用标签	说明	备注
1	input type=text	文件输入框 ；value 设置默认显示内容
2	input type=password	密码输入框； value 设置默认显示内容
3	input type=radio	单选框 name ；name属性可以对其进行分组
4	input type=reset	重置按钮 ；value 属性修改按钮上的文本
5	input type=submit	提交按钮 ；value 属性修改按钮上的文本
6	input type=button	按钮 ；value 属性修改按钮上的文本
7	input type=file	文件上传域；
8	input type=hidden 是隐藏域	（信息无需用户参与，但提交时候发送给服务器）
9	input type=checkbox	复选框  ；如果希望是同一组 保证 name 属性一致；checked="checked"表示默认选中

select/option/textarea标签

说明：
    select 标签是下拉列表框；

•         selected="selected"设置默认选中

    option 标签是下拉列表框中的选项；

    textarea 表示多行文本输入框 ；（起始标签和结束标签中的内容是默认值）

•         rows 属性设置可以显示几行的高度
•         cols 属性设置每行可以显示几个字符宽度

---

8、其他标签

块级元素（block level element）

在浏览器显示时，它的内容通常会自动以新行来开始（和结束），无需写
；

div标签：

• div的全称就是division，有时候我们也习惯叫图层；
•  标签可以把文档分割为独立的、不同的部分，是可用于组合其他 HTML 元素的容器；
•  
  元素经常与 CSS 一起使用，用来进行文档布局

p标签：

•     

   标签定义段落

•     p  元素会自动在其前后创建一些空白。

hello,world

  
this is a h3
  goto 百度

段落1
段落2
段落3
段落

段落

---

内联元素（inner element)

内联元素在显示时通常不会以新行开始；如果不对span 应用样式，span 标签没有任何的显示效果。

span标签

•     语法：内容
•     往往单独的去控制某个关键的内容，可用作文本的容器

您的购物车有10个商品