一、HTML语言入门
HTML(Hypertext Markup Language,超文本标记语言)是一种用来制作Web上超文本文档的简单标记语言。它是在原来文本文件的基础上,加上一系列标记描述其格式、颜色,再加上声音、动画、甚至视频等,形成精彩的画面。当用户浏览WWW上的信息时,浏览器会自动解释这些标记的含义,并按照一定的格式在屏幕上显示这些被标记的文件。
1、一个简单的例子
用任意编辑器中输入如下代码:
<html>
<head>
<title> 第一个网页 </title>
</head>
<body>
这是我的第一个HTML文件!
</body>
</html>
以first.html或first.htm文件名保存,用浏览器打开这个文件即可看到效果。
2、HTML基本格式
一般HTML文件的开头和结尾分别由<html>和</html>标识标出,当浏览器遇到<html>标记时即会按照HTML标准解释后面的文本,直到遇到结束标记</html>。
<head>和</head>之间的部分成为头标部分,包含当前网页的一些信息和数据,可看成是整个网页的序言。
<title>和</title>标记用来给网页命名,它应该能够反应网页的内容,显示时在浏览器的标题栏上。
<body>和</body>之间是网页的主体内容。
二、超链接
网页上的超链接一般有两种,即同一网页中的链接和不同网页之间的链接。
1、URL
URL(Uniform Resource Locator,统一资源定位符),即我们常说的网址。
2、超链接的基本格式
超链接的基本格式如下:
<a href="链接的地址或文件"> 高亮显示的文本 </a>
以<a>为超链接的开始,href指出所要链接的信息,常用HTTP/FTP等链接方式。
在网页中,一般文字上的超链接是蓝色,文字下面有一条下划线,当鼠标指针移动到该链接上时,就会变成一只手的样子,单击一下就可以跳到此超链接所指的网页上去。
3、同一网页中链接
首先,设置超链接,其简单的结构形式如下:
<a href="#锚名"> 高亮显示的文本 </a>
其中,锚名是指网页中能被链接到的一个特定位置。
然后,通过标记<a name>指定具体锚名,即:
<a name="锚名"></a>
点击前面的“高亮显示文本”,就能跳转到下面<a name="锚名">处。
4、不同网页之间的链接
这个就比较常见,格式和使用方法如前面2所述。
三、网页的修饰
在HTML页面中,可以采用各种标记来对页面进行修饰。
1、字体标记
对于字体无外乎形状、大小、颜色等,HTML对此有相应的标记来描述。
对于形状常用标记有粗体(<b></b>)、斜体(<i></i>)、下划线(<u></u>)等。
对于字符大小有如下三种方式来描述:
(1)大小等级,分6级,即h1、h2、h3、h4、h5、h6,其中,h1最大,h6最小,一般前3种比正文字体大,后3种比正文字体小。
(2)绝对大小,在HTML中,用<font></font>标记带size属性来描述,如size = 5表示五号字体。
(3)相对大小,用size = "+3"表示比当前字体大三号,size = "-2"表示比当前字体小二号。
对于颜色可用font带color属性来描述font后面的字符颜色,比如:
<font color = "Yellow" size = 5>表示即将显示的字符为黄色五号字
<font color ="808080" size = "+3">表示即将显示的字符为灰色比当前字体大三号
从上面例子可以看出,颜色即可用英文单词表示,又可以用十六进制数来表示。
2、页面标记
(1)加入注释
格式:<!-- 待注释内容 -->
(2)段标记
格式:<p> ... </p>
(3)换行标记
格式:<br>
(4)预格式化文本标记
格式:<pre> ... </pre>
(5)水平线
格式:<hr>
(6)文字对齐
格式:<center> ... </center>、<left> ... </left>、<right> ... </right>
(7)背景色彩或背景图案
格式:<body background="image-URL" bgcolor=# text=# link=# alink=# vlink=#>
其中,background(背景图案和图像文件名及其定位路径)、bgcolor(背景色彩)、text(非可链接文字的色彩)、link(可链接文字的色彩)、alink(正被单击的可链接文字的色彩)、vlink(已经单击过的可链接文字的色彩)、#(rrggbb,色彩值用十六进制的红-绿-蓝RGB来表示)。
(8)多窗口页面标记
一幅Web页面可以分为几个部分,每个部分都可以独立地显示一个HTML文件,形成多个窗体,格式如下:
<frameset> ... </frameset>
多个窗口可以纵向排列,也可以横向排列,也可以混合排列,下面举例说明2行两列的窗口:
<html>
<head>
<title> 多窗口页面 </title>
</head>
<frameset rows=40% ,60%> //第一行窗口占比40%,第二行窗口占比60%
<frameset cols=40% ,60%> //第一行窗口分两列,左边占比40%,右边占比60%
<frame src="file1.html">
<frame src="file2.html">
</frameset>
<frameset cols=30% ,70%>
<frame src="file3.html">
<frame src="file4.html">
</frameset>
</frameset>
</html>
四、多媒体页面
1、图像标记
格式:<img>
属性:
src:图像的URL
alt:在浏览器尚未完全读入图像时,在图像位置显示的文字
width:图像的宽度
height:图像的高度
align:图像和文字的对齐方式,有left、middle、right、top和botton
border:图像边框厚度
hspace:水平空距
vspace:垂直空距
比如:插入一个左对齐的xxx.gif,点击该图像跳转到yyy.html,如下即可:
<a href="yyy.html"> <img src="xxx.gif" align=left> </a>
2、背景音乐
格式:<bgsound>
属性:
src:WAV文件的URL
loop:循环数
举例如下:
<bgsound src="music.wav" loop="-1">
将loop属性设为-1,意味着声音循环播放。
3、插入视频
格式:<img src="url.gif" dysnc="url.avi">
用url.avi这个文件来播放视频,用url.gif这个图像来作为视频的封面,即在浏览器尚未完全读入AVI文件时,现在AVI播放区域显示该图像。
五、表格与表单
1、列表
在HTML中列表分为三种:无序列表、有序列表和定义列表。
无序列表用<ul>来定义,格式如下:
<ul>
<li>
<li>
<li>
</ul>
ul标记符带有type属性,列表项li也可以带type属性,type属性可以是circle(中空圆形)、disk(宽心圆形)、square(正方形)。
有序列表用<ol>来定义,格式与无序列表一样,但ol带有type和start两种属性,type属性可以是A(大写字母编号)、a(小写字母编号)、l(阿拉伯数字编号)、I(大写罗马字母编号)、i(小写罗马字母编号),start属性与<ol>标记连用,指定列表中第一项的起始数字,默认的起始数字为”1“。
定义列表标记符为<dl>,用<dt>引出标题,以<dd>说明标题所定义的内容。
2、表格
HTML表格的基本格式为:
<table>
<caption> 表格标题 </caption>
<tr>
<th> 表头1... <th> 表头n
<tr>
<td> 表项1... <td> 表项n
...
</table>
<table>和</table>定义表格,表格中的所有内容都在这两个标签之间,在<table>标签内可以带有frame(控制边框属性)、rules(控制单元格间分隔线)、border(设置边框宽度,单位为像素),<caption>和</caption>之间定义表格的标题,<tr>定义表格的行,在表格的每一行中,<th>和<td>定义表格的单元格,一般情况下,<th>定义表格的表头项,<td>定义表格的内容。
3、表单
表单标记符Form的基本格式为:
<form method="get|post" action="uri" enctype="type">
...
</form>
在form标记符中,method表示输入数据时送到服务器的方式(get表示将数据加在action设定的uri地址后面传送到服务器,get表示通过HTTP post传输数据方式将输入数据传送到服务器),action指定了服务器所执行的程序。
(1)输入型表单
输入型表单标记符<input>是一个独立标记,常用属性如下:
name:用于指定表单控件名称
value:用于指定控件的初始值
size:用于指定控件的初始宽度,属性值通常是像素,当type属性为text或password时,则为字符数
maxlength:用于指定用户可以输入文本的最大个数,当此长度超过size时,浏览器会允许数据的滚动
checked:布尔属性,用于指定该框是否选中
src=uri:在type="image"时,用于指定用于修饰图形化提交按钮的图片的位置
type:属性的取值及意义为button(按钮)、checkbox(复选框)、textarea(多文本行输入区)、text(输入文本)、password(输入密码用)、hidden(隐藏按钮)、submit(提交服务器)、image(图像传送服务器)、reset(清除重新输入)、radio(单选按钮)
(2)创建按钮
<button>标记符可以创建三种按钮:提交按钮、重置按钮和普通按钮,语法如下:
<button name="" value="" type=submit|button|reset>
...
</button>
其中,name属性指定控件名称,value属性指定控件的初始值,type属性指定创建按钮的类型(为submit时,表示创建一个提交按钮;为button时,表示创建一个普通按钮;为reset时,表示创建一个重置按钮)。
(3)创建选项菜单
在<form>标记间插入<select>标记,并将每一个独立的选项用<option>标记标出来,我们就可以得到选项菜单,其语法如下:
<select>
<option>
...
<option>
</select>
select标记符的常用属性有以下几种:
name:用于指定控件名
size:用于指定选项菜单中一次显示多少行
multiple:有此属性时,用户可以选择多个选项,否则,只允许一个选项。
option标记符的常用属性有以下几种:
selected:用于说明当前选项为预先选中的
value:用于指定控件的初始值
lable=text:为选项指定一个标签
下面举例说明表单设计,具体代码如下:
<html>
<head>
<title> html表单演示程序 </title>
</head>
<body>
<form method="get" action="form.html">
请输入您的地址
<input type="text" size=10 name="name1"> <br>
文化程度
<select name="list1">
<option>博士
<option>硕士
<option>大学
<option>大专
<option>中专
<option>其他
</select>
<br>
您想要的书籍
语文<input type="checkbox" name="book" value="yea" checked>
数学<input type="checkbox" name="book" value="yea">
英语<input type="checkbox" name="book" value="yea">
物理<input type="checkbox" name="book" value="yea">
化学<input type="checkbox" name="book" value="yea">
政治<input type="checkbox" name="book" value="yea">
<input type="submit" value="提交">
</form>
</body>
</html>
在浏览器中运行该文件的效果如下图所示:
相关推荐
HTML+5零距离接触:学习快速入门! 整理清晰,完整,好!
html+css快速入门教程 一周时间轻松上手
JSP快速入门描述 这种注释和HTML中很像,也就是它可以在"查看源代码"中看到. 唯一有些不同的就是,你可以在这个注释中用表达式(例子2所示).这个表达示是不定的,由页面不同而不同,你能够使用各种表达式,只要是...
html基础文档快速入门
学习html5快速入门,经典指南,初学者必读!
css html快速入门的教材,非常适用于初学者。
HTML five入门教程,快速入门,哈哈
HTML5作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究。此教程为新手提供学习指导,有兴趣的可以了解一下。
nodeing课堂的资料 html+css个人觉得还不错,总结了经典的知识,满满的干货
html中的各种常用标签及其属性,和一般的使用方法特效,简单实用,快速入门
JSP快速入门,html文档,对于初学者还是可以参考的,讲得还算详细
HTML5 Video快速入门指南在线演示源码免费下载 HTML5 Video快速入门指南在线演示源码免费下载
JSP快速入门教程 6 实例:hello.jsp 创建一JSP快速入门教程 第一讲(参考《Java Web程序设计基础教程》第1章) 1 JSP 和 Java的关系 一般Java指的标注版 Java SE 另外两个版本:Java EE 和 Java ME JSP属于...
html 快速入门 让你快速掌握这方面知识 绝对好资源
快速入门HTML学会网页制作.docx
MyEclipse_HTML_JSP_Web_Designer_Quickstart MyEclipse/HTML/JSP快速入门与提高 简介,实用,值得学习。
HTML, CSS, JS快速入门 ppt,简洁明了
快速学习html,快速入门,适合生手学习
ASP.NET 2.0快速入门(16):ASP.NET 2.0 应用开发小技巧 本课程介绍一些前面课程没有介绍的asp.net的特性,这些特性本身并不复杂,但是都非常实际用,通过使用这些特性,开发会变得方便。 • 开始时间: 2006-2-20 14:...