段落相关标签<p><br><hr>

格式化相关标签<small><sub><sup><pre>

列表相关标签<ol><ul><li>

图片相关标签<img>

超链相关标签<a>

本章重点:段落相关标签,超链标签

本章难点:超链相关标签<a>

一、  段落相关标签

标题元素:

标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素,<h6>定义了最小的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML自动在一个标题元素前后各添加一个空行。

段落:

段落是用<p>标签定义的。

<p>This is
another paragraph</p>

HTML自动在一个段落前后各添加一个空行。

换行:

当需要结束一行,并且不想开始新段落时,使用<br>标签。<br>标签不管放在什么位置,都能够强制换行。

<p>This
<br> is a para<br>graph with line breaks</p>

<br>标签是一个空标签,它没有结束标记。

二、  
格式化相关标签

格式化文字:

<html>

<body>

<b>This text is
bold</b><br>

<strong>

This text is strong

</strong><br>

<big>

This text is big

</big><br>

<em>

This text is emphasized

</em><br>

<i>

This text is italic

</i><br>

<small>

This text is small

</small><br>

This text contains

<sub>

subscript

</sub><br>

This text contains

<sup>

superscript

</sup>

</body>

</html>

这个例子说明了在HTML里面可以怎样格式化文本。

三、  
列表相关标签

无序列表:

无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。
无序列表以<ul>标签开始。每个列表项目以<li>开始。

<ul>
<li>Coffee</li>
<li>Milk</li>

</ul>

无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。

有序列表:

有序列表也是一个项目的序列。各项目前加有数字作标记。
有序列表以<ol>标签开始。每个列表项目以<li>开始。

<ol>
<li>Coffee</li>
<li>Milk</li>

</ol>

更多示例:

有序列表的不同类型:

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Letters list:</h4>

<ol
type="A">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<ol
type="a">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers
list:</h4>

<ol
type="I">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase Roman numbers
list:</h4>

<ol
type="i">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

这个例子显示了有序列表的不同类型。

无序列表的不同类型:

<html>

<body>

<h4>Disc bullets list:</h4>

<ul
type="disc">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Circle bullets
list:</h4>

<ul
type="circle">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

<ul
type="square">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</body>

</html>

这个例子显示了无序列表的不同类型。

四、  
图片相关标签

Img标签和src属性:

在HTML里面,图像是由<img>标签定义的。
<img>是空标签,意思是说,它只拥有属性,而没有结束标签。
想要在页面上显示一个图像,需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。

插入图像的语法:

URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下: “http://www.w3schools.com/images/boat.gif”。

当浏览器在文档中遇到img标签时,就放置一个图像。如果把img标签放在两个段落之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。

alt属性:

alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。

“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯,它有助于更好地显示信息,而且,对纯文本浏览器很有用。

基本注意点——有用的技巧:

如果一个HTML文档包含10个图像,那么为了正确显示这个页面,需要加载11个文件。加载图像是需要时间的,所以请谨慎使用图像。

更多示例:

调整图像大小:

<html>

<body>

<p>

<img
src="./images/hackanm.gif" width="20"
height="20">

</p>

<p>

<img
src="./images/hackanm.gif" width="45"
height="45">

</p>

<p>

<img
src="./images/hackanm.gif" width="70"
height="70">

</p>

<p>

You
can make a picture larger or smaller changing the values in the
"height" and "width" attributes of the img tag.

</p>

</body>

</html>

背景图像:

<html>

<body
background="./images/background.jpg">

<h3>Look: A background
image!</h3>

<p>Both gif and jpg files can be used
as HTML backgrounds.</p>

<p>If the image is smaller than the
page, the image will repeat itself.</p>

</body>

</html>

图像链接:

<html>

<body>

<p>

You can also use an image as a link:

<a href="back.htm">

<img border="0" src="./images/next.gif">

</a>

</p>

</body>

</html>

五、  
超链相关标签

锚标签和href属性:

HTML使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

创建一个锚的语法:

锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。

这个锚定义了一个到W3Schools的链接:

上面这段代码在浏览器中显示的效果如下:

target属性:

使用target属性,你可以定义从什么地方打开链接地址。
下面这段代码打开一个新的浏览器窗口来打开链接:

锚标签和name属性

name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。

下面是命名锚的语法:

你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚:

你应该注意到了:命名锚的显示方式并没有什么与众不同的。

想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样:

一个链接到本页面中某章节的命名锚是这样写的:

基本注意点——有用的技巧:

尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href="http://www.w3schools.com/html",将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href="http://www.w3schools.com/html/"。

命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。

如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。

更多示例:

在新浏览器窗口中打开链接:

<html>

<body>

<a href="lastpage.htm"
target="_blank">Last Page</a>

<p>

If you set the target attribute of a link to
"_blank",

the link will open in a new window.

</p>

</body>

</html>

单击超连接,打开一个新窗口:

链接到本页面的某个位置:

<html>

<body>

<p>

<a href="#C4">

See also Chapter 4.

</a>

</p>

<p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla
bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla
bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla
bla</p>

<a
name="C4"><h2>Chapter 4</h2></a>

<p>This chapter explains ba bla
bla</p>

</body>

</html>

单击超连接

HTML基本元素的运用的更多相关文章

  1. HTML基本元素(一)

    HTML基本元素(一) 1.换行符 <br /> Ps:br 是换行(Break)的缩写,文本会在这个标签的地方换行. 实例: 第一行<br />第二行 2.段落 <p& ...

  2. Qt 学习之路:QML 基本元素

    QML 基本元素可以分为可视元素和不可视元素两类.可视元素(例如前面提到过的Rectangle)具有几何坐标,会在屏幕上占据一块显示区域.不可视元素(例如Timer)通常提供一种功能,这些功能可以作用 ...

  3. JMeter基本元素简介

    JMeter基本元素简介 一.测试计划 测试计划对象有一个复选框叫做"Functional Testing"(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例 ...

  4. 【Python 07】汇率兑换1.0-2(基本元素)

    1.Python基本元素 (1)缩进:表示代码层次关系(Python中表示程序框架唯一手段) 1个tab或者4个空格 (2)注释:开发者加入的说明信息,不被执行.一个代码块一个注释. # 单行注释(一 ...

  5. 05. Matplotlib 1 |图表基本元素| 样式参数| 刻度 注释| 子图

    1.Matplotlib简介及图表窗口 Matplotlib → 一个python版的matlab绘图接口,以2D为主,支持python.numpy.pandas基本数据结构,运营高效且有较丰富的图表 ...

  6. 科学计算三维可视化---Mayavi入门(Mayavi库的基本元素和绘图实例)

    一:Mayavi库的基本元素 .处理图形可视化和图形操作的mlab模块 .操作管线对象,窗口对象的api (一)mlab模块 (二)mayavi的api 二:快速绘图实例 (一)mlab.mesh的使 ...

  7. HMM的概述(五个基本元素、两个假设、三个解决的问题)

    一.五个基本元素 HMM是个五元组 λ =( S, O , π ,A,B) S:状态值集合,O:观察值集合,π:初始化概率,A:状态转移概率矩阵,B:给定状态下,观察值概率矩阵   二.两个假设 HM ...

  8. Android UI设计的基本元素有哪些

    在android app开发如火如荼的今天,如何让自己的App受人欢迎.如何增加app的下载量和使用量....成为很多android应用开发前,必须讨论的问题.而ui设计则是提升客户视觉体验度.提升下 ...

  9. Qt Quick 基本元素初体验

    Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...

  10. BeautifulSoup库的基本元素

    BeautifulSoup库 <html> <body> <p class='title'></p> </body> </html&g ...

随机推荐

  1. 云计算之路-试用Azure:上不了高速的跑车,无法跨Cloud Service的DNS服务器

    从阿里云的踩坑大师,到Azure的抹黑大师,我们似乎成了云计算负面用户的典型,可是我们还是忍不住想表达自己真实的使用感受.如果有错误的地方,欢迎大家批评! 在Azure上建好虚拟网(Vitual Ne ...

  2. oracle中设置了最大链接数还是报错

    须要更新的数据有1100条.我连接的时候一直报错 ORA-12518, TNS:listener could not hand off client connection 依据商品的文章设置了最大连接 ...

  3. C基础测试

    一.用指针的方法,把输入的一个字符串按逆序重新排序其字符,并输出. #include <stdio.h> #include <string.h> void main( ) {  ...

  4. 请远离include_once和require_once[转]

    来自:http://www.poluoluo.com/jzxy/201306/216921.html 尽量使用include, 而不是include_once, 理由是 include_once需要查 ...

  5. qt linux软件打包等

    我的脚本: #!/bin/sh appname=`basename $0 | sed s,\.sh$,,` dirname=`dirname $0` tmp="${dirname#?}&qu ...

  6. java提高篇-----理解java的三大特性之封装

    在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情.在这句 ...

  7. 算法笔记_062:蓝桥杯练习 最小乘积(基本型)(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 给两组数,各n个. 请调整每组数的排列顺序,使得两组数据相同下标元素对应相乘,然后相加的和最小.要求程序输出这个最小值. 例如两组数分别为 ...

  8. lucene示例

    搭建环境 搭建Lucene的开发环境只需要加入Lucene的Jar包,要加入的jar包至少要有: lucene-core-3.0.1.jar(核心包) contrib\analyzers\common ...

  9. classloader常见问题总结

    h tp://yourenyouyu2008.iteye.com/blog/779707看到一些ClassNoFindException ,ClassCastException等异常首先应该想到是不是 ...

  10. C# EF更新当前实体报错 ObjectManager无法管理具有相同键值的多个对象

    原因: ObjectManager已经在跟踪此对象 更新实体前判断 if (db.Entry<T>(t).State != EntityState.Modified) db.Entry&l ...