html笔记

来源：互联网发布：淘宝网购物编辑：程序博客网时间：2024/05/17 03:34

来源：www.w3school.com

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

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

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

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

标题：<hx> </hx> x：1,2,3,4,5,6

链接：<a href="http://www.w3school.com.cn">This is alink</a>

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

新窗口打开链接

<a href="/index.html" target="_top">请点击这里！</a>

跳出框架

图像：<img src="w3school.jpg" width="104"height="142" />

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

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

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

属性参考手册：http://www.w3school.com.cn/tags/index.asp

属性

值

描述

class

classname

规定元素的类名（classname）

规定元素的唯一 id

style

style_definition

规定元素的行内样式（inline style）

title

text

规定元素的额外信息（可在工具提示中显示）

水平线：<p> This is a paragraph </p>

<hr />

<p> This is a paragraph </p>

注释：<!- - ````- - >

拆行：<br />

文本格式化标签

标签

描述

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字。

<s>

不赞成使用。使用 <del> 代替。

不赞成使用。使用 <del> 代替。

<u>

不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签

描述

<code>

定义计算机代码。

<kbd>

定义键盘码。

<samp>

定义计算机代码样本。

<tt>

定义打字机代码。

<var>

定义变量。

<pre>

定义预格式文本。

不赞成使用。使用 <pre> 代替。

不赞成使用。使用 <pre> 代替。

<xmp>

不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签

描述

<abbr>

定义缩写。

定义首字母缩写。

定义地址。

<bdo>

定义文字方向。

定义长的引用。

<q>

定义短的引用语。

<cite>

定义引用、引证。

<dfn>

定义一个定义项目。

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>

</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

This is a paragraph

</p>

标签

描述

<style>

定义样式定义。

<link>

定义资源引用。

<div>

定义文档中的节或区域（块级）。

<span>

定义文档中的行内的小块或区域。

<font>

规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。

定义基准字体。不赞成使用。请使用样式。

对文本进行水平居中。不赞成使用。请使用样式。

Name属性理解：

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

图像：

<img src="boat.gif" alt="Big Boat">

Src：源属性

Alt：预备的可替换的文本

背景图片：

<bodybackground="/i/eg_background.jpg">

排列图片：

备注：bottom是默认，可选项：middle,top,right,left

调整图片属性：

创建图像映射：

http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

coords属性的解释：http://www.w3school.com.cn/tags/att_area_coords.asp

表格：

边框：

空单元格：<td> </td>

带有标题的表格:<caption></caption>

横跨行列的表格：<th colspan=”2” / rowspan=”2”>

表格格边距：<table cellpadding=”10”>

单元格边距：<table cellspacing=”10”>

添加背景：<table background=”…”/bgcolor=”red”>同样适用于td

排列：<td align=” “>

框架属性：<table frame=”box”> 可选项：above,below,hsides,vsides

列表：

无序列表

<ul> <ul type=”disc”>可选项：circle,square

<li>

有序列表

<ol start=””> <ol type=”A>可选项：a,I,i

<li>

定义列表

http://www.w3school.com.cn/tiy/t.asp?f=html_list_definition

列表标签

标签

描述

<ol>

定义有序列表。

<ul>

定义无序列表。

<li>

定义列表项。

<dl>

定义定义列表。

<dt>

定义定义项目。

<dd>

定义定义的描述。

表单与输入：

<form>

名：

<br />

姓：

</form>

<form>

用户：

<br />

密码：

</form>

<form>

<input type="radio"name="sex" value="male" /> Male

<br />

<input type="radio"name="sex" value="female" /> Female

</form>

<form>

I have a bike

<br />

I have a car

</form>

Username:

</form>

<form>

<option value="volvo">Volvo</option>

</select>

</form>

<form>

<option value="volvo">Volvo</option>

</select>

</form>

<form>

</form>

<form>

身高：<inputtype="text" />

体重：<inputtype="text" />

</fieldset>

</form>

<body>

<formaction="MAILTO:someone@w3school.com.cn" method="post"enctype="text/plain">

<h3>这个表单会把电子邮件发送到*******。</h3>

姓名：<br />

<br />

电邮：<br />

<br />

内容：<br />

</form>

框架http://www.w3school.com.cn/html/html_frames.asp

背景

1. 颜色

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

2. 图片

<body background="clouds.gif">

<body background="http://www.w3school.com.cn/clouds.gif">

颜色http://www.w3school.com.cn/html/html_colornames.asp

重定向

<!DOCTYPE HTML>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />

</head>

<body>

<p>

对不起。我们已经搬家了。您的 URL 是 <ahref="http://www.w3school.com.cn">http://www.w3school.com.cn</a>

</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

</body>

</html>

头部元素

标签

描述

<head>

定义关于文档的信息。

<title>

定义文档标题。

<base>

定义页面上所有链接的默认地址或默认目标。

<link>

定义文档与外部资源之间的关系。

<meta>

定义关于 HTML 文档的元数据。

定义客户端脚本。

<style>

定义文档的样式信息。

字符实体：

http://www.w3school.com.cn/html/html_entities.asp

添加MP3

<!DOCTYPE html>

<html>

<body>

<p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p>

</body>

</html>

插入优酷视频

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"

width="480" height="400"

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

</embed>

0 0