JavaWeb快速入门--HTML
HTML
- Web概述
-
- 1、什么是Web
- 2、软件架构
- 3、浏览器资源分类
- 一、HTML简介
-
- 1、HTML概念
- 2、HTML快速入门
- 二、HTML基本标签
-
- 1、文件标签：构成html最基本的标签
- 2、文本标签：和文本有关的标签
- 3、图片标签
- 4、列表标签
- 5、链接标签
- 6、div和span
- 7、语义化标签:html5中为了提高程序的可读性，提供了一些标签。
- 8、表格标签
- 9、表单标签
Web概述
1、什么是Web
Web是一种分布式的应用框架，基于Web的应用是典型的浏览器/服务器（B/S）架构。目前Web已经是网络上运行最广泛的分布式应用框架，它可以共享分布在网络上的各个Web服务器上所有互相连接的信息。Web采用客户机/服务器（C/S）通信模式，客户机与服务器之间使用超文本传输协议（HTTP）通信，Web使用超文本标记语言（HTML）连接网络中各个Web服务器的信息资源，任何一台联网的计算机通过浏览器就可以查看网络中Web服务器的丰富资源。
2、软件架构
C/S（Client/Server 客户端/服务器端）在用户本地有一个客户端程序，在远程有一个服务器端程序，就像我们平时用到的QQ，微信…毫无疑问这些程序的用户体验是非常好的，但是相对来说，在开发、安装，部署，维护部分都非常麻烦。
B/S:(Browser/Server 浏览器/服务器端)我们只需要一个浏览器，就可以通过不同的网址(URL)访问不同的服务器端程序，我们不再需要一个一个的下载软件，只需要访问浏览器就可以浏览到海量的资源，同时这种方式在开发、安装，部署，维护都相对简单，但是如果应用过大，对硬件要求就会变得很高，用户的体验可能会直线下降，想一下自己在一个浏览器上玩一个大型游戏，可能只是加载时间就让人等不下去了。
3、浏览器资源分类
- 静态资源：使用静态网页开发技术发布的资源。所有用户访问时，得到的结果是一样的。如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，就可以对静态资源进行展示。就像浏览器中的文本、图片、音频、视频等，
Web中一般通过HTML、CSS、JavaScript控制静态资源。HTML：用于搭建基础网页，展示页面的内容CSS：用于美化页面，布局页面JavaScript：控制页面的元素，让页面有一些动态的效果
- 动态资源： 使用动态网页及时发布的资源。所有用户访问，得到的结果可能不一样。如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
Web中一般通过jsp/servlet,php,asp等控制动态资源。 - 当然我们要学习动态资源，必须先学习静态资源！
一、HTML简介
1、HTML概念
HTML（Hyper Text Markup Language）即超文本标记语言，是最基础的网页开发语言。
超文本（Hyper Text）：一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息可以用交互方式搜索，是超级文本的简称。超文本传输协议（HyperText Transfer Protocol，HTTP）：超文本在互联网上的传输协议，HTTP协议规定Web的基本运作过程以及浏览器与Web服务器之间的通信细节。标记语言：由标签构成的语言，<标签名称> 如 html，xml。标记语言不是编程语言
2、HTML快速入门
html包含两部分内容： 设置相关信息， 显示在页面上的内容都写在body里面，另外html的代码不区分大小写的。
- 基本语法：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>入门代码title>
head>
<body>
<FONT color='red'>Hello Worldfont><br/>
<font color='green'>Hello Worldfont>
body>
html>
二、HTML基本标签
1、文件标签：构成html最基本的标签
html：html文档的根标签
head：头标签，在浏览器窗口中，头标签是不被显示在正文中的，在此处可以指定一些html文档的公共属性或引入外部的资源
title：标题标签，用来说明文件的标题
body：体标签，放置页面中所有的内容，如图片、文字、表格、表单等元素。
：DOCTYPE用来声明网页使用什么样的风格，使浏览器知道怎么处理文档。html5中定义该文档是html文档，
2、文本标签：和文本有关的标签
* 空格：
* 注释：
* <h1> to <h6>：标题标签
* h1~h6:字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：展示一条水平线
* 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
* <blockquote>：段落缩进
* <b>、<strong>：字体加粗
* <i>、<em>：字体斜体
* <sup>：上标
* <sub>：下标
* <font>:字体标签
* <center>:文本居中
* 属性：
* color：颜色
* size：大小
* face：字体
* 属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3、图片标签
* img：展示图片
* 属性：
* src：指定图片的位置
* 代码：
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
4、列表标签
- 基本语法
<ul type=" ">
<li>项目名称li>
<li>项目名称li>
<li>项目名称li>
...
ul>
- 列表类型
* 有序列表：
* <ol>:
* <li>:
* 无序列表：
* <ul>:
* <li>:
* 定义列表：
* <dl>:
* <dt>:
* <dd>:
* 菜单列表：
* <menu>:
* <li>:
* 目录列表：
* <dir>:
* <li>:
5、链接标签
* <a>:定义一个超链接
* 属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式
* _self:默认值，在当前页面打开
* _blank：在空白页面打开
* 代码：
<a href="http://www.itcast.cn">点我a>
<a href="http://www.itcast.cn" target="_self">点我a>
<a href="http://www.itcast.cn" target="_blank">点我a>
<a href="./5_列表标签.html">列表标签a><br>
<a href="mailto:[email protected]">联系我们a>
<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg">a>
6、div和span
* <div>:每一个div占满一整行。块级标签
* <span>：文本信息在一行展示，行内标签 内联标签
在编写HTML文件时，若要定义区间的不同样式，可以使用 表单概念：标签一般用于组合文档中的行内元素。这两个标签默认都没有对元素内的对象进行任何样式的定义，方便样式控制。
7、语义化标签:html5中为了提高程序的可读性，提供了一些标签。
<header>：页眉
<footer>：页脚
8、表格标签
<table>
<th>
<td>...td>
<td>...td>
...
th>
<tr>
<td>...td>
<td>...td>
...
tr>
...
table>
* <table>：定义表格
* width：宽度
* height：高度
* border：边框
* bordercolor：边框颜色
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式
* frame: 边框样式
* <tr>：定义行
* bgcolor：背景色
* align：对齐方式
* <td>：定义单元格
* colspan：合并列
* rowspan：合并行
* <th>：定义表头单元格
* <caption>：表格标题
* <thead>：表示表格的头部分
* <tbody>：表示表格的体部分
* <tfoot>：表示表格的脚部分
9、表单标签
用于采集用户输入的数据的。用于和服务器进行交互。form：用于定义表单的，可以定义一个范围（代表采集用户数据的范围）
属性：
表单项中的数据要想被提交：必须指定其name属性* 表单项标签：
* <input>：可以通过type属性值，改变元素展示的样式
* type属性：
* text：文本输入框，默认值
* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
* password：密码输入框
* radio:单选框
* 注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
* checkbox：复选框
* 注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
* file：文件选择框
* hidden：隐藏域，用于提交一些信息。
* 按钮：
* submit：提交按钮。可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径
* label：指定输入项的文字描述信息
* 注意：
* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
* select: 下拉列表
* 子元素：option，指定列表项
* textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。