web前端知识（一）

web应用程序的组成

HTTP 协议

HTTP协议(HyperText Transfer Protocol)：叫超文本传输协议,使用在web服务器和web浏览器上，在计算机能够通过web交换信息的一套规则和过程。

web浏览器

web浏览器是一个连接到web服务器上，向web服务器请求信息，然后解析返回来的HTML标记，并将其显示在浏览器窗口内的应用程序。

常用的的web浏览器有：

Microsoft Internet Explorer(IE)
MoZilla系列的FireFox
goole的chrome

对web标准的支持不同，会造成跨浏览器网页编程的困难

W3C 标准

由国际万维网联盟制定的一系列标准，包括：

结构化标准语言（HTML和XML）
- 内容、文字、图片等
表现标准语言（CSS）
- 样式（层叠样式表css）、颜色，字体大小。
行为标准语言
- 行为标准语言（JavaScript）。
倡导结果、样式、行为分离

HTML 结构

基本结构示例：

<!DOCTYPE>
<html><!--html标签：html文档正式开始-->
<head><!--html头部区域开始，主要是用来说明html文档的相关属性和设置，说个浏览器程序听-->
	<meta charset="utf-8"><!--meta标签：元信息标签，charset：字符集，指定编码格式-->
	<title></title><!--设定网页的标题-->
	<meta name="keywords" content="你真是个人才"><!--设置文档的关键字-->
</head><!--头部结束-->
<boby><!--html文档的主体区域开始，对应浏览器的内容呈现窗口-->
	页面的内容
</boby><！--文档的主体结束-->
</html><!--html文档结束-->

html语法的基本认识：

定义正文标题：<h1></h1>至<h6></h6>标签
定义段落标签：<p></p> 将文本定义为整个段落

定义列表

有序列表：用标签<ol></ol>标签定义
无序列表：用标签<ul></ul>定义
自定义列表：用标签<dl></dl>定义

例如：

<p>无序列表示例</p>
<ul>
  <li>编写XHTML文件</li>
  <li>编写XML文件</li>
  <li>编写JSP文件</li>
</ul>
<p>有序列表示例</p>
<ol>
  <li>编写XHTML文件</li>
  <li>编写XML文件</li>
  <li>编写JSP文件</li>
</ol>
<p>定义列表示例</p>
<dl>
  <dt>猫</dt>
    <dd>一个奴役自己的动物</dd>
  <dt>手电筒</dt>
    <dd>使用电池的设备</dd>
  <dt>白痴</dt>
  <dd>不知道如何做事，却假装很重要的人</dd>
</dl>

定义分块区域文本：<div></div>
用于内嵌样式:<span></span>
定义图片 <img src="图片地址"/>
创建超链接 <a href="目标url">描述文本</a>

创建表格<table></table> 标签

例如：

<table border="1">	
	<tr>
		<td>数据单元格1</td>
		<td>数据单元格2</td>
		<td>数据单元格3</td>
	</tr>
	<tr>
		<td>数据单元格4</td>
		<td>数据单元格5</td>
		<td>数据单元格6</td>
	</tr>
</table>

其他特殊符号

表单

作用：在网页上提供一个图形用户界面，以采集和提交用户输入的数据。
创建表单：
html表单元素和属性可以分为两种类型

定义表单整体结构，使浏览器知道如何处理表单数据的元素
创建输入控件的元素

使用<form></form>标签创建表单
最小表单：

<form action="表单处理程序的URL" method="get|post"></form>
<!--action 表示表单的数据发送到哪里-->
<!--get|post 控制数据使如何发送到处理程序的-->

表单输入控件

用来创建HTML输入控件得到元素有三种:

<input type="?" />
- type ="text" 为文本输入框，其属性值有size,maxlength,value
- type = "password"密码输入框，属性有size,maxlength,value
- type="radio" 单选按钮属性值有name,checked,value
- type="checkbox" 复选框属性有name，checked，value
- type="hidden"隐藏字段，属性有name,checked,value
- type="file"文件上传字段，form表单属性有enctype=“enctype”,method=“post”
- type="submit"/type="reset" 提交和重置按钮,属性值与value
- type="button"命令按钮
select和option: 创建一个下拉列表 select 属性有multipe=“multiple”,size | option的属性有 selected=“selected”,value
textarea: 多行输入的文本框,属性值有cols 行和rows 列,可以设置默认值。
Lable 属性for 规定和哪个表单元素进行绑定。

fieldset和legend元素 fieldset可将表单内的相关元素分组，legend元素为fieldset 元素定义标题，如下：

<form id="myForm" action="#" method="post">
  <fieldset>
    <p>
    <legend>性别</legend>
    <input type="radio" id="gender" value="male">男<br />
    <input type="radio" id="genders" value="female">女    </p>
  </fieldset>
</form>

readonly 属性防止修改文本框的的数据，disabled属性可以使当前控件不可用。

<form id="myForm" action="#" method="post">
  <p>
<label for="oID">订单编号：</label>
  <input type="text" id="oID" size="12" value="X1248" readonly="readonly" />
</p>
<p>
<label for="price">订单总价：</label>
<input type="text" id="price" size="12" value="" disabled="disabled" />
</p>
</form>

web前端知识（一）

web前端知识（一）

web应用程序的组成

HTTP 协议

web浏览器

W3C 标准

HTML 结构

表单

表单输入控件

猜你喜欢