导语:
所有标签亲手测试,请放心享用
HTML 标题
标题(Heading)是通过
- 等标签进行定义的,是块级元素
定义最大的标题, 定义最小的标题。
定义最大的标题, 定义最小的标题。
例:
This is a heading
This is a heading
This is a heading
确保将 HTML heading 标签只用于标题。不要仅仅为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
HTML 水平线 horizontal
标签在 HTML 页面中创建水平线,可用于分隔内容。
例
This is a paragraph
//paragraph段落
This is a paragraph
This is a paragraph
HTML 段落
通过
标签定义,是块级元素,浏览器会自动地在段落的前后添加空行。
用空段落标记
用
标签代替它!但是不要用
标签去创建列表
例:
This is a paragraph
This is another paragraph
HTML 换行break
如果想在不产生一个新段落的情况下进行换行,使用
标签:
This is
a para
graph with line breaks
元素是一个空的 HTML 元素,没有结束标签。
HTML 超链接
anchor 锚,设置超文本链接,超链接可以文字/图像,可点击这些内容来跳转到新的文档或者当前文档中的某个部分。
href 属性
hypertext reference,指定链接的目标。.
target 属性
定义被链接的文档在何处显示。"_blank"值是在新窗口打开文档
创建mail链接
图像标签
是空标签,它只包含属性,没有闭合标签。
border属性
指定图像边缘宽度
src 源属性
指定图片地址,可以是本地图片(使用相对路径),也可以是网络上其他服务器上的图片.
alt 属性
alternate text(替换文字;备用文本;替代文字),用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。
height和width属性
调整图片大小
title属性
title是对图片的说明和额外补充,如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。
向 HTML 页面添加背景图片:
在中使用background属性
在文字中排列图像:
图像 在文本中
图像 在文本中
图像 在文本中
文本
文本
align属性设置图片的对齐方式.
align 属性设置为 "left"。图像将浮动到文本的左侧。
align 属性设置为 "right"。图像将浮动到文本的右侧
align:美[əˈlaɪn] 排列、对齐、对准
制作图像链接:
创建图片链接只需要把链接文本内容替换成图像标签
如果想用动画图片,只需要把图片换成gif格式的.
注意我这里的图片用的是相对路径,wing测试使用绝对路径不成功!
创建图像映射
创建带有可供点击区域(热点)的图像地图。其中的每个区域都是一个超级链接。
请点击图像上的星球,把它们放大。
注释:img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。"
把图像转换为图像映射
把一幅普通的图像设置为图像映射。(整幅图都是一个热点,wing的理解,这个和普通的图片链接貌似没什么区别)
请把鼠标移动到图像上,看一下状态栏的坐标如何变化。
html样式
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML4引入,是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
不赞成使用的标签和属性
在 HTML 4 中,有若干的标签和属性是被废弃的。被废弃(Deprecated)的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确:请避免使用这些被废弃的标签和属性!
应该避免使用下面这些标签和属性:
标签 描述
定义居中的内容。
和 定义 HTML 字体。
和 定义删除线文本
定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色
对于以上这些标签和属性:请使用样式代替!
background-color 属性为元素定义了背景颜色:
This is a heading
This is a paragraph.
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:
A heading
A paragraph.
text-align 属性规定了元素中文本的水平对齐方式:
This is a heading
The heading above is aligned to the center of this page.
html文本格式化
HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
文本格式化标签
标签 描述
定义粗体文本。Bold 粗体(文本)
定义大号字。
定义着重文字。
定义斜体字。Italic 斜体(文本)
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。
不赞成使用。使用 代替。
不赞成使用。使用 代替。
不赞成使用。使用样式(style)代替。
“计算机输出”标签
标签 描述
定义计算机代码。
定义键盘码。
定义计算机代码样本。
定义打字机代码。
定义变量。
定义预格式文本。
不赞成使用。使用 代替。
不赞成使用。使用 代替。
不赞成使用。使用 代替。
引用、引用和术语定义
标签 描述
定义缩写。
定义首字母缩写。
定义地址。
定义文字方向。
定义长的引用。
定义短的引用语。
定义引用、引证。
定义一个定义项目。
例子:
对文本进行格式化
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains
subscript
This text contains
superscript
预格式文本
使用 pre 标签对空行和空格进行控制,很适合显示计算机代码,它保留了空格和换行.
for i = 1 to 10
print i
next i
“计算机输出”标签
不同的“计算机输出”标签的显示效果。这些标签常用于显示计算机/编程代码。
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
地址
在 HTML 文件中写地址。
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
实现缩写或首字母缩写
etc.
WWW
在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。
改变文字的方向
This paragraph will go left-to-right.
This paragraph will go right-to-left.
块引用
实现长短不一的引用语。
WWF's goal is to:
Build a future where people live in harmony with nature.
We hope they succeed.
标记删除文本和插入文本。
My favorite color is blue red!