HTML

复习

1、写出SQL语句分类
2、写出常用的SQL语句的格式
3、写出SQL的连接方式
4、写出JDBC的使用步骤
5、请写出你对事务的理解和实现

回顾

1、JDBC的批处理
2、数据库事务
3、JDBC实现事务操作

内容

1、html简介
2、html基本标签
3、html基本标签的综合案例
4、html表单标签
5、html的框架标签
6、html的其它标签和特殊字符

目标

1、掌握html的书写规范
2、掌握html的基本标签9个
3、掌握html的表单标签
4、掌握html的框架标签
5、掌握html标签的综合使用
6、了解html的作用

课前简介

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。
通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

第一章 htm简介

1.1 什么是html
   html全称：Hyper Text Markup Language(超文本标记语言)
   备注： 
          a.超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
          b.标记:标签，不同的标签实现不同的功能
          c.语言:人与计算机的交互工具
1.2 html能做什么
 html使用标记标签来描述网页,展示信息给用户
1.3 html书写规范

a.html结构

  <!DOCTYPE html>
            <html>
			<head>
									<!--设置页面的字符集编码 -->
									<meta charset="utf-8" />
									<!--设置页面的标题 -->
									<title></title>
			</head>
	        <body>
								   <!--需要展示的信息-->
			</body>
            </html>

b.html标签是以尖括号包围的关键字 c.html标签通常是成对出现的，有开始就有结束 d.html通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开) e. html标签不区分大小写,建议小写

第二章 html基本标签

2.1 结构标签(文件标签)
    <html><html>:根标签		 
    <head>		 	
    <title></title>:页面的标题		 
    </head>		 
    <body></body>：内容
属性：		
    text:文本的颜色		
    bgcolor:背景色		
    background:背景图片			     
颜色的表示方式：                        
    第一种方式：red green blue	             
    第二种方式：#000000  #ffffff  #325687   #377405
2.2 排版标签
    a.注释标签：<!--注释-->                
    b.换行标签：<br/>           
    c.段落标签：<p>文本文字</p>   
    	  特点：段与段之间有空行	                      
          属性：align对齐方式	(left    center  right)          
    d.水平线标签:<hr/>                      
          属性:   
              width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)                                 size: 水平线的粗细 (像素表示，例如：10px)                                 
              color:水平线的颜色                                  
              align:水平线的对齐方式
2.3 块标签
   <div></div>:行级块标签，独占一行，换行
   <span></span>:行内块标签，所有内容都在同一行
         作用：   <div></div>:主要是结合css页面分块布局
                  <span></span>:进行友好提示信息
2.4 文字标签(标题标签)
2.4.1 基本文字标签
    <font></font> 
       属性： size:设置字体大小
             color:设置蚊子颜色
             face:设置字体
2.4.2 标题标签
 <h1></h1>—-<h6></h6>  
 随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
2.5 列表标签(清单标签)
2.5.1 无序列表ul
   无序列表标签： <ul></ul>
             属性：type :三个值，分别为
                  circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
         列表项：<li></li>
   
   示例如下：  
        <ul type="square">无序列表
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ul>
2.5.2 有序列表ol
      有序列表标签：<ol></ol>
             属性：type：1、A、a、I、i（数字、字母、罗马数字）
             列表项： <li></li>
      示例如下：
 		<ol type="I">有序列表
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ol>
2.5.3 列表嵌套
2.6 图形标签
 <img/>自关闭标签   
  属性: 
  	  src：图形地址
      width:宽度
      height:高度
      border:边框
      align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
      alt:图片的文字说明
      hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
2.7 链接标签

​ 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

 属性： 
 	href:跳转页面的地址(跳转到外网需要添加协议)；            
 	name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值                	 target:_self(自己)  _blank(新页面，之前页面存在)  默认_self
2.8 表格标签

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.8.1 普通表格(table,tr,td)
2.8.2 表格的表头(th)
2.8.3 表格的列合并(colspan)
2.8.4 表格的行合并(rowspan)
2.9 文本格式化标签
    <b> 	定义粗体文本。
    <big> 	定义大号字。
    <em> 	定义着重文字。
    <i> 	定义斜体字。
    <small> 	定义小号字。
    <strong> 	定义加重语气。
    <sub> 	定义下标字。
    <sup> 	定义上标字。
    <ins> 	定义插入字。
    <del> 	定义删除字。

第三章 基本标签的综合案例

3.1 综合案例效果图

3.2 综合案例源代码

第四章 html表单标签

html表单用于搜集不同类型的用户输入

4.1 form元素
常用属性：action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
         method:请求方式：get 和post
         enctype:表示是表单提交的类型
			    默认值：application/x-www-form-urlencoded  普通表单
			           multipart/form-data  多部分表单(一般用于文件上传)
			           
	 get:
	   1.地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"
	   2.不安全
	   3.效率高
	   4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
	 post：
	   1.地址栏：请求参数单独处理。
	   2.安全可靠些
	   3.效率低
	   4.post请求大小理论上无限。
使用情况：一般用于插入删除修改等操作
4.1.1 input元素
type: 以下为type可能要取的值： 
      1.1   text 普通文本
      1.2   password  密码框   密文或者掩码
      1.3   radio 表示是单选，name必须一致，
                  表示同一组中只能选中一个( checked ="checked" 表示选中)
      1.4  checkbox  表示多选 ，name必须一致，
                 表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
      1.5   file ：表示上传控件			    
      以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)	 
	 以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
      1.6 submit   提交
      1.7 reset   重置
      1.9 image   图片按钮
以上所有input的属性： width 设置宽度，height 设置高度  border 设置边框、
     1.10 hidden  表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
4.1.2 select 元素(下拉列表)
4.1.3 textarea元素(文本域)

需要指定输入的区域位置大小

 <textarea cols="100" rows="5">  表示5行100列的区域可以输入内容，该元素没有value属性
4.1.4 示例及效果图如下

效果图代码如下：

第五章 html框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
    开发人员必须同时跟踪更多的HTML文档
    很难打印整张页面
5.1 框架结构标签frameset
框架结构标签（<frameset>）定义如何将窗口分割为框架
        每个 frameset 定义了一系列行或列
        rows/columns 的值规定了每行或每列占据屏幕的面积
5.2 框架标签Frame
Frame 标签定义了放置在每个框架中的 HTML 文档。
5.3 基本的注意事项
1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在   <frame> 标签中加入：noresize="noresize"。
5.4 效果图及源代码示例

源代码示例：

第六章 html的其它标签和特殊字符

6.1 其他标签
6.2 特殊字符
        &lt; 小于号  
        &gt; 大于号
        &amp; 与字符
        &quot; 引号 
        &reg; 己注册
        &copy; 版权
        &trade; 商标
        &nbsp; 空格

效果图如下：

作业题

1、实现一个调查问卷,要求尽可能的使用上所学过的各种标签

面试题

1、DOCTYPE声明的作用是什么？严格模式与混杂模式如何区分？
2、锚点的作用是什么？如何创建锚点？
3、表单向服务器提交数据有几种方式？这些方式有什么区别？