码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2015-06-30 17:54:19      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:

静态页面的工作机制:

1.使用HTML编写静态页面,发布到WEB服务器端;
2.客户端通过浏览器请求该静态页面;
3.Web服务器根据请求定位该静态页面;
4.该静态页面以HTML流的形式返回客户端;
5.客户端浏览器解释HTML流,并显示为WEB页面。

动态页面是指,网页中不仅仅包含HTML代码,还含有程序代码,可以根据客户端输入不同内容来显示不同的结果。

动态页面的工作机制:

1.使用动态WEB开发技术编写WEB应用程序,即动态页面,并发布到WEB服务器端;
2.客户端通过浏览器请求该动态页面;
3.WEB服务器定位该WEB应用程序;
4.WEB服务器根据客户端的请求,对WEB应用程序进行编译或解释,并生成HTML流;
5.将生成的HTML以流的形式返回给客户端;
6.客户端浏览器解释HTML流,并显示为WEB页面。

Html
就是超文本标记语言的简写,是最基础的网页语言,是非严谨性语言不区分大小写,且标签可以不带但是比较紊乱。
HTML都是通过标签来定义的
<html>//限定范围
<head> //头部分用来存储网页的属性信息
<title>这是标题</tite>
</head>
<body> //体部分用来保存网页中的内容
<font size="7" color=red>这是我的第一个网页</font>//该标签为字体属性初始化化
</body>
</html>
大部分标签都是成对出现的,但是有小部分标签是单个的,如换行<br/>因为规范标签都需要闭合,所以需要在内部闭合,当然不闭合也是可以的。
标签属性可以对被修饰的内容进行更丰富的操作和添加效果,当然不带的话是默认状态。
属性与属性值之间用“=”连接,属性值可以用双引号也可以用单引号或者不用引号,但是一般都是使用双引号用于字符串传值,或者根据公司规定规范进行书写。

操作思想,为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装数据进行操作,标签相当于一个额容器,对容器中的数据进行操作就是在不断地改变容器的属性值。

常用标签的使用
字体标签<font>
常用属性size,color等
预留文本标签<pre>保留了空格和换行,按照输入文本格式进行输出。很适合显示代码文本
标题标签<h1>....<h6>随着输的增大字体变大。

特殊字符,因为一些字符会被浏览器所识别如"<" ">" "&"等,这些字符会被浏览器识别解析,所以用些特殊字符来表示
&lt; ---- < &gt;------- > &amp;--------&
&quot; ----- " &reg;-------- ® 圈R注册商标 &copy;--------©圈C版权
&trade; ----- = &nbsp;------- 空格

列表标签
<dl>项目
<dt>上层项目1</dt>
<dd>下层项目1</dd>
<dd>下层项目2</dd>
<dt>上层项目2</dt>
<dd>下层项目1</dd>
<dd>下层项目2</dd>

</dl>
列表标签中项目符号所对应的标签
<ol>:数字标签
<ul>:符号标签
<li>:具体项目内容标签;需要在上面两个标签内部使用

注释
<!--注释文字-->

图像标签
<img src="" alt="图片不存在时的说明文字" height="400",width="400" boder="边框"/>
<hr />水平线
图像地图:通过在图像添加热点区域链接指定链接从而实现点击热点区域跳转的功能。

表格标签;
对数据进行格式化
<table boder="">
<caption>表格标题</caption>
<tbody>//在标题下面默认就会存在用来缓存内部的数据,从而可以实现缓存到哪个body就展示出哪个body
<tr>//行
<th>表头</th>//与单元格的却别是居中加粗。
<td >单元格一</td> colspain="int"横向合并单元格属性 rowspain="int"竖向合并单元格 <td>单元格二</td>
</tr>
</tbody>
</table>

超链接
超链接是一种跳转访问方式。除了跳转链接之外还可以定位标记,设定书签,回到顶部等,将图片设置为超链接,只需要将图片标签写入</a>内。标签<a>类似一种锚
<a href="http://www.sina.com?subject=fafaf&cc=sadasd"></a>?号跟的是参数信息,可以在访问的时候直接赋值些参数。http协议也可以改成一些本地软件的内置协议,通过点击超链接直接访问本地的软件。
浏览器内置了解析引擎,在解析过程中;先解析通信协议,然后解析主机名,解析时先通过本地的hosts文件查找ip地址,如果没有找到会向网络上DNS服务器发送解析请求,DNS服务器上会存储着大部分网站的注册ip地址,然后返回给浏览器,再通过ip地址访问该主机名。
target属性;target="_blank"在新建页面打开超链接。
<a href="#tip"></a>name属性用来定义锚,href用来链接该锚
<a name="tip"></a>

表单标签<form>
他是与服务端能够交互的部分,表单标签都需要定义name和value属性,name属性是服务端获取的数据名称,value是数据值。

<input>输入标签;接收用户的请求
其中的type属性指定输入标签的类型
文本框text
密码框 password
单选框 radio
复选框 checkbox
隐藏字段 hidden 在页面上不显示,但在提交的时候随着其他内容一起提交
提交按钮 submit 用于提交表单中的内容
重置按钮 reset 将表单中填写的内容设置为初始值
按钮button 可以为其自定义事件
文件上传 file后期扩展内容会自动生成一个文本框和一个浏览按钮
图像 image 它可以替代submit按钮。

<select>选择标签;提供用户选择内容,size为属性显示可选项目个数 multiple为列出来可见的属性
<option>子项标签 属性selected没有属性值,加在子项上,其中一个子项上
<textarea>文本区域 col表示列 row表示行。
<filedset>区域设置,加上边框<lengend>在边框上添加内容。
<form>当需要与服务器进行交互的时候需要在交互区域添加此标签,属性action指定服务器 method方法设置数据提交方式常用的有两个post和get,get会将数据信息显示在地址栏不适合提交敏感信息,而且地址栏显示有大小限制,还有一点提交时get数据会封装在服务端信息头前面,post数据会封装在服务端信息头后面,post解码也比较方便。
消息头是http协议将服务端的属性发送给客户端进行封装之后又返回给服务端的数据。当然数据的提交也可以通过超链接完成,将需要提交的数据作为参数跟在主机后面用?连接,超链接的传输默认是get的提交方式
关于客户端与服务端对数据的验证,客户端的数据验证是为了提高效率和用户体验性,服务端的验证是为了提高数据的安全性。
<label>用于设置快捷键
for属性:指定快捷键作用的表单元素。必须要与作用的表单元素id值相同
accessKey属性;指定快捷键,此快捷键需要和alt键组合使用。

块标签
<div>该标签元素是块级元素,可用于组合其他HTML元素的容器,可将内部的内容作为一个块的整体,用于指定CSS样式,还有一个用途就是用来文档布局。
该元素没有特殊的含义,另外由于是块级元素在浏览器中会显示换行,<p><h1>都是块级元素
<span>该标签元素是内联元素,可作为文本的容器,与CSS一同使用对部分文本进行样式设置。

HTML布局
使用<div>标签元素
1,使用div标签元素对布局进行分块设置id
2,在<head>头部定义样式<style>
3,在<style>内部对div#id{属性样式值}统一设置
使用table表格布局
1.这种布局方式就是对单元格进行操作,一般不使用进行布局

其他标签
<pre>;该标签主要是为了封装文本,可以保留数据的原本格式。
<p>;该标签是段落标签,行与行之间有距离,<br>标签换行无行间距
<b><i><u>加粗,斜体下划线。<sub>下角标<sup>上角标
<marquee>滚动标签,文本数据处于滚动状态。属性direction方向 behavior行为方式
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

头标签;用来存储网页的基本属性信息
<title>标题标签
<base>
href 属性指定网页中所有的超链接的目录,可以是本地目录,也可以是网络目录,注意值得结尾处一定要用/表示目录,只作用于相对路径的超链接文件。常用来备份网页用来更新。

<base href="c:\abc\" />此处用来指定超链接存在的目录,如果备份了一个其他目录,更新时可以事先更改其他目录然后在访问人少时,将此处目录指定到备份目录即可。
<a href="news.html" target="_blank">这是一个新闻网页</a>
<meta>
name属性指定关键词,content指定关键词的内容。之前百度关键词搜索就是通过这样指定关键词,通过扒取关键词来确定网页信息,但是这种方式可以人为指定关键词所以信息经常不正确,现在是开始扒取整体网页的数据来搜素关键词。
http-equiv属性指定协议状态模拟信息头,content指定时间,url指定协议访问地址。这样一般用来自动跳转网页。
<link>链接标签rel属性指定样式表,href指定css文件,media指定设备。

<framset>框架标签//也是用来网页布局的,常常是内部由多个独立网页框架组成
<framset cols="25%,75%">设置html框架该框架中包含几个独立的html文档,cols横向排列
<fram src=".html">
<fram src=".html">
</framset>

一般情况下<body>体标签是不能与<framset>同时存在的,当设置<noframs>标签时可以在内部设置<body>用来封装框架无法加载时显示的文本数据。

HTML

标签:

原文地址:http://www.cnblogs.com/ss561/p/4611049.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!