HTML

hughrry

浏览: 9074 次
性别:
来自: 南京

最近访客更多访客>>

天天写博客

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2007-10 ( 5)
更多存档...

博客分类：

菜鸟进阶

HTML 搜索引擎浏览器 Apple C#

HTML基本概念
HTML文件（Hypertext Marked Language，超文本标记语言）
扩展名为 (.htm)或( .html)，它不同于一般文本的地方是，它不仅包含文本内容还包含一些Tag（标记）。
第一个Tag（标记）是<html>，它告诉浏览器这是一个HTML文件，而且是从这开始的。
最后一个Tag是</html>，它告诉浏览器HTML文件到此结束。
<head>与</head>之间的内容是Head信息，它不在浏览器中显示。Head信息的作用是：有助于搜索引擎搜索到网页。<title>与</title>之间的内容是文件的标题。<body></body>之间的内容是文件的正文。<b>与 </b>，bold，粗体显示文字。
2、HTML元素（HTML Elements）
1）HTML Elements用来标记文本，表示文本的内容。例如：body, p, title就是HTML元素。
2）HTML Elements用Tag表示，以“<”开始，以“>”结束。
3）Tag通常是成对出现的，例如<html>与</html>。开始的叫opening Tag，结尾的叫closing Tag。
4）Tag不分大小写。
3、HTML Elements的属性
HTML Elements可以拥有属性。属性可以扩展HTML元素的能力。
EXAMPLE：使页面背景色为红色，<body bgcolor=”red”>
将表格设成无边框，<table border=”0”>
属性常由属性名和值成对出现，格式：name=”value”。属性常附加给HTML的Opening Tag。
一些基础的 HTML Tag
1、正文标题Tag
HTML用<h1>到<h6>这6个Tag来定义正文标题。从大到小，自成一段。
<h1>测试HTML 的正文标题，从大到小，自成一段。</ h1>
……
<h6>测试HTML 的正文标题，从大到小，自成一段。</h6>

2、段落划分Tag <p>和</p>。
3、换行Tag <br>。它在不新建段落的情况下换行，<br>没有closing Tag
4、注释Tag “<!—” 和 “-->”之间。
注：1>用<p>换行是个不好的习惯，正确的应该是用<br>换行。
2>HTML文件会自动截去多余的空格，不管多少空格，都被看作一个空格。一个空行也被看作一个空格。（如何显示见下面的“空格的显示”）
3>有些Tag将文本自成一段，不需用<p>分段。例如，标题Tag <h1>之类。
HTML常用格式
</b> <i> <del> <ins>
粗体bold 斜体italic 文字当中划线表示删除文字下划线表示插入

<sup> <sub> <blockquote> <pre> <code>
上标下标缩进表示引用保留空格和换行表示计算机代码，等宽字体
HTML特殊字符的显示
1、HTML字符实体（HTML Character Entities）
字符实体分三部分： “&”+“实体名字”或“#实体编号”+“；”
注：1、并不是所有浏览器都支持最新的实体名字。
2、实体名字区分大小写。
EXAMPLE：小于号（<）的表示：“<”或者“< ”
实体entity
2、空格的显示 
3、最常用的字符实体（Character Entities）
显示结果说明 Entity Name Entity Number
显示一个空格    
< 小于 < <
> 大于 > >
& &符号 & &
" 双引号 " "
4、其它常用字符实体：
显示结果说明 Entity Name Entity Number
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷
HTML利用超链接打开链接文件
1、a和href属性。HTML用a来表示超链接，英文叫anchor。它可以指向任何一个源文件，一个HTML网页，一个图片，一个影视文件等。
格式：<a href=”url”>链接的显示文字</a>
点击<a>与</a>当中的内容，即可打开一个链接文件，href属性表示这个链接文件的路径。
EXAMPLE：<a href="http://www.sina.com.cn">新浪网</a>
2、target属性使用target属性，在新窗口里打开链接文件。
EXAMPLE：
<a href="http://www.sina.com.cn" target=_blank>新浪网</a>
3、title属性让鼠标停留在超链接上时，显示该超链接的文字注释。可使用“&#10”作为换行符进行多行注释的显示。
EXAMPLE：<a href="http://www.sina.com.cn" title=点击进入新浪网&#10练习测试专用>新浪网</a>
4、name属性跳转到一个文件的指定部位。
设置两部分，一是设定name名称，二是设定一个href指向这个name。
格式：
<a name=”first”>目录</a>
<a href=”#first”>返回目录</a>
注：1、name常用于创建大文件的章节目录(table of contents)。
2、如果浏览器找不到name指定的部分，则显示文章开头，不报错。
5、链接到Email地址点击链接，触发邮件客户端。
EXAMPLE： <a href = "mailto:info@sina.com">联系新浪</a>

HTML相对路径(RelativePath)和绝对路径(AbsolutePath)

HTML中如何正确引用文件？
HTML中有两种路径写法：相对          路径和绝对[ˈæbsəlu:t]路径。
1、相对路径(RelativePath)
1>同目录的文件引用
如果源文件和引用文件在同一目录，直接引用文件名即可。
如：有以下两个文件：
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html中加入index.html的超链接代码应为：
<a href=”index.html”>index.html</a>
2>上级目录的表示
“../ ”表示源文件所在目录的上级目录，“../../ ”表示源文件所在目录的上上级目录，以此类推。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../wowstory/index.html">index.html</a>
3>下级目录的表示
引用下级目录的文件，直接写下级目录文件的路径即可。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/tutorials/index.html">index.html</a>
2、绝对路径(AbsolutePath)
HTML绝对路径(absolute path)指带域名的文件的完整路径。
HTML表格
HTML表格用<table>表示，表格可以分成多行（row），用<tr>表示，每行又可分成多个单元格（cell），用<td>表示。
border属性默认情况下，不设置表格的边界，表格是不显示边界的，等同于将Border属性的值设为0。Border属性的值越大，表格的边界将越粗。
Cellspacing属性单元格之间的距离
表格的表头
<th>表示表格的表头，表头的字是粗体显示。
HTML框架
使用框架，可以在游览器窗口同时显示多个网页。每个frame里设定一个网页，彼此相互独立。<frameset>与</frameset>决定如何划分frameset。<frameset>有cols属性和rows属性。
分别表示按列和按行分布。
<frameset cols="25%,75%">
<frame src="1.html">
<frame src="2.html">
</frameset>
（？怎样利用框架引用任意一个网页？）

HTML列表（Lists）
HTML有三种列表形式：排序列表（Ordered List）；不排序列表（Unordered LIST）；定义列表（Definish List）。

排序列表（Ordered List）：每个列表项前标有数字，表示顺序。
排序列表由<O1>开始，每个列表项由<li>开始，

不排序列表不用数字标识每个列表项，而采用一个符号表示每个列表项。
不排序列表由<ul>开始，每个列表项由<li>开始。

定义列表通常用于术语的定义。
定义列表由<dl>开始。
术语由<dt>开始，英文意为Definition Term。
术语的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示。
HTML表单（Forms）
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>

表单主要用于采集和提交用户输入的信息。
表单三个要点：
1、表单控件（Form Controls）
通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。（这里的input type="text" name="yourname就是一个表单控件，表示一个单行输入框。）
2、Action
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。
（action="http://www.admin5.com/html/asdocs/html_tutorials/yourn ame.asp" ）
3、Method
method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。

HTML表单常用控件
表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)

控件1、单行文本输入框（input type=”text”）
<input type="text" name="yourname">
控件2、复选框（input type=”checkbox”）

<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
用checked表示缺省已选的选项。

<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>

控件3、单选框(input type="radio")
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>

用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
控件4、下拉框(select)
可以单选也可以多选。
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
<select name="fruit" multiple>
     用户还可以用size属性来改变下拉框(Select)的大小。

控件5、多行输入框(textarea)
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度，rows表示textarea的高度。

<form name="form1" method="post" action="">
请输入：<input type="text" name="textfield"> 
<input type="submit" value="确定">
<br><br>


<input type="checkbox" name="checkbox1" value="apple" checked>apple     <br>
<input type="checkbox" name="checkbox2" valeu="orange">orange <br> <br>


<input type="radio" name="radio1" value="radio_apple" checked>apple <br>
<input type="radio" name="radio1" value="radio_orange">orange <br><br>


请选择：
<select name="select1">
<option value="apple">apple
<option value="orange">orange
<option value="mango">mango
</select>                          <br><br>


<textarea name="textarea1" cols="100" rows="5">
</textarea>
密码输入框 <input type="password">
</form>
HTML图片
格式：<img src=”url” alt=”***”>
Alt属性，如果浏览器没有载入图片，则会显示alt的值。便于搜索引擎抓取网页内容。

align属性
改变图片的垂直（居上top居中middle居下bottom）对齐方式，水平（居左left居中center居右right）对齐方式

改变图片大小
默认情况，图片显示原始大小。可用height,width改变大小，图片会相应放大或缩小。

HTML字体（FONTS）
HTML中用FONT元素及其属性设定字体大小，颜色和字体风格。
大小size风格face颜色color
HTML4中不建议使用FONT及其属性设定字体，用CSS。

HTML背景颜色bgcolor背景图片background

HTML头部信息
     HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。
      另外，搜索引擎也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)
标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。
链接(link)
      用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：
<link rel="stylesheet" href="mainstyles.css" type="text/css">
样式(style)
      用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：
<head>
<style>
   body {background-color:white; color:black;}
   h1 {font: 18pt arial bold;}
</style>
</head>
关于网页信息(meta)
      在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。
      这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。
      在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：
<meta name="description" content="HTML中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="站长网站长学院">

      利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：
<meta http-equiv="Refresh" content="5;url=http://www.admin5.com/html/html_tutorials/index.html">

最常用字符实体
[img]http://guozi.iteye.com/upload/picture/pic/5965/a1b288f2-32cb-4040-80be-a1bee1216548.jpg [/img]

较常用字符实体
[img]http://guozi.iteye.com/upload/picture/pic/5966/32f09a77-7e74-45a8-add5-dc7303dacc4a.jpg [/img]

常用表单控件
[img]http://guozi.iteye.com/upload/picture/pic/5967/800a8c7b-ff3a-477e-b500-0fd105d43129.jpg [/img]

分享到：

css

2007-10-31 16:39
浏览 3033
评论(3)
查看更多

3 楼 chenke 2015-06-21

写的很不错，也可以看下这个地址写的也可以
http://www.zixun24.com/storage/2015/04/web-html-01.html

2 楼 llyzq 2011-05-13

内容不错

不过格式实在头疼。。。

1 楼 greatwqs 2010-10-13

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML

评论

发表评论

相关推荐

css

最近访客更多访客>>