HTML笔记整理

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 标签对大小写不敏感

<html> 与 </html> 之间的文本描述网页

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

一个HTML文档的基本结构：

<html>

<head>

</head>

<body>

正文

</body>

</html>

body 元素的内容会显示在浏览器中。

title 元素的内容会显示在浏览器的标题栏中。

注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

注释：

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

<b><font size="+6" face="黑体" color= "blue">国庆节放假通知</font></b>

背景色彩和文字色彩

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 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

开一个新的(浏览器)窗口 (Target Window)

#=_blank 浏览器会另开一个新窗口显示document.html文档

_self 把文档调入当前页

name 属性规定锚（anchor）的名称。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<a href=mailto:[email protected]> [email protected] </a>

打开当前计算机系统中默认的电子邮件客户端软件，

例如:OutLook Express

3. 图像<img>

4.添加水平线<hr />

5.格式化

6.预格式文本

<pre>

这是

预格式文本。

它保留了空格

和换行。

</pre>

7.<q> 引用

<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>

8.背景图片

9.表格table

表格标记<table>…</table>

行标记<th>…</th> <tr>…</tr>

列标记<td>…</td>

ROWSPAN=“n” 属性表示跨多少行

<TR>

<TR>

.....

10.列表

无序列表

<ul>

</ul>

有序列表

<ol>

</ol>

</ol>

11.框架

如果想把一个浏览器窗口分成几个区域，每个区域都显示一个网页，则需使用框架集<frameset>和框架标记<frame>，这两个标记也是成组出现的。

窗口框架的分割有两种方式：

水平分割，cols属性

垂直分割，rows属性控制窗口的分割方式

<html>

<head>

<title>用框架分割窗体</title>

</head>

</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>构成，表单的基本结构如下：

<p>

用户<input type="text " name="username" value="" ><br>

密码<input type="password" name="userpasswd" ><br>

<p>

</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

提交按钮

<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>

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">

Your browser does not support the audio element.

</audio>

4. 超链接<a href="/i/song.mp3">点击这里，播放音乐</a>

5.雅虎媒体播放器

15.视频

1.<embed width="320" height="240" src="/i/bookmark.swf" />

2.<object data="movie.swf" height="200" width="200"/>

</video>

4.优酷

width="480" height="400"

type="application/x-shockwave-flash">

</embed>

5.超链接

<a href="/i/bookmark.swf">播放视频文件</a>

16.Canvas

Your browser does not support the canvas element.

</canvas>

//创建画布

//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>

猜你喜欢