Html

Html简介

HTML是英文 HyperText Markup Language 的缩写,它的意思是"超文本标记语言",用它编写出文档的文件的扩展名是“.html”或“.htm”(微软的操作系统),他是可供浏览器解释浏览的文件格式。你可以使用记事本,写字板或者是专业的IDE如:Dreamweaver等等编辑工具来编写HTML文件。

HTML标记两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的,比如“<html>”和“</html>”,前一个是开始标记,后面的是结束标记,在开始和结束标记之间的的文本是元素内容。html标记是与大小写无关的,“<html>”和“<HTML>”所表示的意思的一样的。标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。

Html的文档结构

html的文档结构主要是有3部分组成的: 1.<html></html> <html>标记用于html文件的最前面,用来表示html文件的开始。而</html>的标记则是放在html的最后面,用来表示html文件的结束,两个标记必须一起使用。 2.<head>和</head> <head>和</head>构成html文件的头部部分,在此标记对之间可以使用<title> </title>和<script> </script>等等标记对,这些标记都是描述html文档相关信息的标记对,<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。 3.<body>和</body> <body>和</body>是html文档的主体部分,在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记,他们所定义的文本,图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

META标记

META标记是html语言的head部分的一个辅助性的标记的,他位于head和title标记之间,他提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;可以用于来鉴别作者,设置页面格式,标注内容提要和一些关键字,还可以设置页面的自动刷新以及等级等等。

TITLE标记

在头部的<head></head>中,有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里,作为网页的主题。 实例: <title>这是我的html页面</title>

文字上的分隔标记

或许你会发现这样一个问题:我们已经在记事本里排版排的很漂亮,为何通过浏览器查看是就变了样子,那是因为浏览器不像word,他不认识Enter键或者空格键,所以当你按多少次空格,浏览器都会当作没看见一样。 常用的分隔标记: 强制断行标记“<br>” 强制分段标记“<p>” 空格“&nbsp;”

排版的标记

1.文字的置左,置右,置中 刚刚我们学过的分段标记“<p>”在加上一些简单的属性设定,就可以让其的文字置左,置右,置中。 2.置中标记 使用方法: <center>内容</center> 3.保持原始数 使用方法:<pre>内容<pre>据格式标记

字体的标记

1.文字的置左,置右,置中 刚刚我们学过的分段标记“<p>”在加上一些简单的属性设定,就可以让其的文字置左,置右,置中。 2.置中标记 使用方法: <center>内容</center> 3.保持原始数 使用方法:<pre>内容<pre>据格式标记

字体变化标记

使用:在文字标记中,对于文字的格式也有相当多的变化,如加粗,斜体等等。 <dfn>用于名词解释,斜体显示</dfn> <sup></sup> 上标 <smap>用于字母序列等宽</smap> <sub></sub> 下标

 <em></em>  强调	<address>模拟信封上的字体</address>
 <strong></strong>  加强
 <s></s>删除线    <strike>删除线</strike>
 <big>比默认字号大一号</big>
 <small>比默认字号小一号</small>
 <code>以等宽字体显示计算机程序代码</code>

背景标记

使用:<body bgcolor="red" backgroud="bg.jpg"> 例子1: <html> <head><title>背景颜色</title> </head> <body bgcolor="red"> <font size="4" face="黑体" color="red">背景颜色</font> </body> </html> 例子2: <html> <head><title>背景颜色</title> </head> <body background="bg.jpg"> <font size="4" face="黑体" color="red">背景图片</font> </body> </html>

分隔线标记

分隔线标记 使用:上一部分<hr>下一部分 例子: <html> <head> <title>背景颜色</title> </head> <body> abcdefg。<br> <hr color="red" width="240" size="2" noshade> higklmn。 </body> </html>

IMG标记

使用:<img src="boy.jpg" alt="haha" align="left" border="0" height="56px" width="32px"> 例子: <html> <head> <title>图片</title> </head> <body> <img src="boy.jpg" alt="haha" align="left" border="0“ height="56px" width="32px"> </body> </html> 说明:向网页中插入图片。

序列标记

1.无序列表< ul> 2.有序列表 <ol> 3.自定义列表 <dl>

特殊字符

html中有很多特殊的字符是需要特殊的处理。 下面看几个特殊的字符处理: 转义字符 < < > > & & &qout; “   空格 例子: <html> <head><title>特殊的字符</title> </head> <body> <<br>><br>&<br> &qout;<br> </body>

表格

表格的结构 1.<table> <table>...</table>是用来在html页面上创建表格的。 2.<th>代表列名一般放在第一行 3.<tr>代表格的一行。 4.<td>用来定义表格的一列。 在默认情况下,表格是没有边框的,如果想要出现边框,就是用border属性。 表格的设置 表格的合并

input标签

<input />标签的 type分为: text -文本框 button -按钮 submit-提交 reset-重置 password -密码 checkbox-多选 radio-单选 file -上传文件 date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间(小时和分钟) datetime - 选取时间、日、月、年(UTC 时间) datetime-local - 选取时间、日、月、年(本地时间) 写法:<input type = “text” value=“”/> 4.1邮箱输入框 <input type="email" name="user_email" /> 4.2数字输入框 <input type="number" name="points" min="1" max="10" /> 4.3数字范围输入框(进度条) <input type="range" name="points" min="1" max="10" /> 4.4颜色选择框 <input type="color" name="colortext"/><br>

下拉列表及文本域

Select标签 <select> <option value="qxz" selected/>请选择 <option value=“A”/>苹果 <option value=“B”/>香蕉 <option value=“C”/>橘子 <option value=“D”/>西瓜 </select>

TEXTAREA便签 <TEXTAREA ROWS="5" COLS="30" ></TEXTAREA >

表单

表单的用途 表单在网页上用来给访问者填写信息的,从而获得用户信息,使用网页进行交互的功能。一般是将表单设计在一个html页面中,当用户填写信息后做提交操作,于是表单的内容就会从客户端的浏览器上发送给服务器,经过服务器上的jsp或者ASP或者Cgi等处理后,再将用户所需的信息传送给客户端的浏览器上,这样网页就具有交互性了。 表单构成 <form></form> <form></form>标记是用来创建一个表单,在标记之间一切都属于表单里的内容。 <from>标记具有action,metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法,通常有两种分别是GET和POST两种。 target属性用来制定目标窗口的。 表单的工作原理 1.访问者填写表单,并提交给web服务器处理; 2.在web服务器上的后台处理程序对提交后的数据进行处理; 3.后台处理程序处理完成后,会重新生成一个新的html页面发给客户端

框架

混合框架 <head> <title>框架页示例</title> </head> <frameset rows="50%,50%"> <frame src="http://www.baidu.com"> <frameset cols="25%,75%"> <frame src="http://www.sina.com.cn"> <frame src="http://www.baidu.com"> </frameset> </frameset>

多媒体标记音频

1、HTML4多媒体 <embed src="文件源" width="宽度" autostart="true" loop="true"> src 设置文件源 width 设置宽度 autostart 设置是否自动播放,如果是true就是自动播放,是flase不自动播放 loop 设置是否循环播放true就是循环播放,false就是不自动播放 2、HTML5多媒体 <audio src="G:\Media\霍比特人3:五军之战.mp4" controls="controls"></audio> 3、添加背景音乐 <bgsound src="明月几时有.mp3" loop=5>

多媒体标记视频

视频标签 <video src="G:\Media\霍比特人3:五军之战.mp4" width="320" height="240" controls="controls"> </video>

control 属性供添加播放、暂停和音量控件。 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

层也可以添加事件和属性,请参考 第2节补充div+css3.txt <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph</p> </div>