HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 标签对大小写不敏感
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
一个HTML文档的基本结构:
<html>
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
body 元素的内容会显示在浏览器中。
title 元素的内容会显示在浏览器的标题栏中。
注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
注释 :<!--这是一段注释。注释不会在浏览器中显示。-->
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。
属性总是在 HTML 元素的开始标签中规定。
<b><font size="+6" face="黑体" color= "blue">国庆节放假通知</font></b>
背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用 16 进制的 红-绿-蓝(red-green-blue, RGB) 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
布局
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
1.HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的,控制字的大小。一号字—六号字
居中<h1 align="center">This is heading 1</h1>
2.链接 <a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
<a href="http://www.w3school.com.cn">This is a link</a>
开一个新的(浏览器)窗口 (Target Window)
<a href="document.html " target=“#"> ... </a>
#=_blank 浏览器会另开一个新窗口显示document.html文档
_self 把文档调入当前页
name 属性规定锚(anchor)的名称。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
<a href=mailto:abc@tom.com> abc@tom.com </a>
打开当前计算机系统中默认的电子邮件客户端软件,
例如:OutLook Express
3. 图像<img>
<img src="/i/eg_w3school.gif" width="300" height="120" />
<img src="/i/eg_cute.gif" align="bottom/middle/top/left">
4.添加水平线<hr />
5.格式化
6.预格式文本
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
7.<q> 引用
<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>
8.背景图片
<body background="/i/eg_background.jpg">
9.表格table
表格标记<table>…</table>
行标记<th>…</th> <tr>…</tr>
列标记<td>…</td>
<TH align="center">性别</TH>
<TH COLSPAN = 3>第一学期</TH>
<TH COLSPAN = 3>第二学期</TH>
ROWSPAN=“n” 属性表示跨多少行
<TD ROWSPAN = 3>第一季度</TD>
<TD>一月</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>二月</TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
.....
10.列表
无序列表
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
有序列表
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
11.框架
如果想把一个浏览器窗口分成几个区域,每个区域都显示一个网页,则需使用框架集<frameset>和框架标记<frame>,这两个标记也是成组出现的。
窗口框架的分割有两种方式:
水平分割,cols属性
垂直分割,rows属性 控制窗口的分割方式
<frameset rows=“各个横向框架的大小或比例" cols="各个纵向框架的大小" border="像素值" bordercolor="颜色值" frameborder="yes|no" framespacing="像素值">…</frameset>
<html>
<head>
<title>用框架分割窗体</title>
</head>
<frameset rows="30%,*">
<frame src="2-8.html"/>
<frameset cols="30%,*">
<frame src=“wuxulist.html"/>
<frame src="2-10.html"/>
</frameset>
</frameset>
</html>
12. “走马灯”标记
<marquee>…</marquee>用于标记一行或多行滚动的文本,也可以将文本带有超链接,以增加网页的动态效果。
<marquee>标记常用属性
align属性,设定活动字幕的位置,取值可以是left、center、right、top或bottom。
bgcolor属性,设定活动字幕的背景颜色,一般是十六进制数。
direction属性,设定活动字幕的滚动方向,取值可以是left、right、up或down。
behavior属性,设定滚动的方式,主要有三种方式:behavior=“scroll”表示由一端滚动到另一端;behavior=“slide”表示由一端快速滑动到另一端,且不再重复; behavior=“alternate”表示在两端之间来回滚动。
height和width属性,设定滚动字幕的高度和宽度。
hspace和vspace属性,设定滚动字幕的左右边框和上下边框的宽度。
scrollamount属性,设定活动字幕的滚动距离。
scrolldelay属性,用于设定滚动两次之间的延迟时间。
loop属性,用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。
13.表单
calendar、date、time、email、url、search
HTML表单:支持用户在页面输入信息
提供文本框、单选框、复选框、下拉菜单等控件
由<form></form>构成,表单的基本结构如下:
<form action="URL" method="" enctype="" name="userform" >
<p>
用户<input type="text " name="username" value="" ><br>
密码<input type="password" name="userpasswd" ><br>
<p>
<input type="submit">
<input type="reset">
</form>
name属性,给出表单的名称,用于脚本编程
value:保存用户的输入和选择,服务器通过调用输入区域的value属性值来获得输入控件的数据。用户也可以通过value属性来指定输入区域的缺省值 。
type: text, password, checkbox, radio, image, hidden, submit(提交), reset(重置)
method表单传输方法
GET方法将表单信息在URL后传输 http://webmail.ecnu.edu.cn/?q=base
POST方法将表单信息作为信息体传输
action为表单处理方式,通常为一个URL
提交按钮
<input type=“submit” name=“” value=“”>
<button type=“submit”><B>Label</B>with<I>font</I>changes.</button>
<button type=“submit”><IMG SRC=“images/Java-Logo.gif” WIDTH=“110” HEIGHT=“101” ALIGN=“LEFT” ALT=“Java Cup Logo”>Label<BR> with image
</button>
radio单选
性别:
<input type="radio" name="gender" value="Female">女性
<input type="radio" name="gender" value="Male" checked>男性
复选
兴趣爱好:<br><br>
<input type="checkbox" name="intrests01" value="Sports" checked>体育
<input type="checkbox" name="intrests02" value="Music">音乐
<input type="checkbox" name="intrests04" value="Others" checked>其它
下拉列表框
城市:
<select name="city">
<option value="beijing">北京</option>
<option value="jinan" selected>济南</option>
<option value="qingdao">青岛</option>
</select>
14.音频
1.<embed height="100" width="100" src="/i/horse.mp3"></embed>
2.<object height="100" width="100" data="/i/horse.mp3"></object>
3. <audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
4. 超链接<a href="/i/song.mp3">点击这里,播放音乐</a>
5.雅虎媒体播放器
<p><a href="/i/song.mp3">播放 mp3</a></p>
<p><a href="/i/bird.wav">播放 wav</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
15.视频
1.<embed width="320" height="240" src="/i/bookmark.swf" />
2.<object data="movie.swf" height="200" width="200"/>
3.
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="/i/movie.ogg" type="video/ogg" />
<source src="/i/movie.mp4" type="video/mp4" />
<source src="/i/movie.webm" type="video/webm" />
</video>
4.优酷
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
5.超链接
<a href="/i/bookmark.swf">播放视频文件</a>
16.Canvas
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
//创建画布
<script type="text/javascript">
//canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
var c=document.getElementById("myCanvas"); //使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d"); //创建 context 对象
cxt.moveTo(10,10);
cxt.lineTo(150,50);
//开始一条路径,移动到位置 10,10。创建到达位置 150,50 的一条线:
cxt.lineTo(10,50);
cxt.stroke();//绘制已定义的路径
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();//用于创建一条路径
cxt.arc(70,18,15,0,Math.PI*2,true);
//用于创建圆弧 context.arc(x,y,r,sAngle,eAngle,counterclockwise);
cxt.closePath();//创建从当前点到开始点的路径
cxt.fill();//用颜色填充
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0); //在画布上绘制图片
cxt.fillStyle="#0000ff"; //设置颜色
cxt.fillRect(20,20,150,100); //绘制“被填充”的矩形
</script>