首页 / HTML / HTML基本元素的运用

HTML基本元素的运用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML基本元素的运用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6561字，纯文字阅读大概需要10分钟。

内容图文

段落相关标签<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>

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>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

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

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

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

无序列表的不同类型：

<html>

<body>

<h4>Disc bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Circle bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

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

</p>

<p>

</p>

<p>

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

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

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

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

内容总结

以上是互联网集市为您收集整理的HTML基本元素的运用全部内容，希望文章能够帮你解决HTML基本元素的运用所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1265797.html

来源：【匿名】

【下一篇】如何去掉文章里的 html 语法

更多 ►

【HTML基本元素的运用】教程文章相关的互联网学习教程文章

HTML基本元素的运用

段落相关标签<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 he...

前端新技术：HTML5实现网页元素的拖动操作【图】

HTML5之前，要实现网页元素的拖动操作，需要依靠mousedown、mousemove、mouseup等API，通过大量的JS代码来实现；HTML5 中引入了直接支持拖动操作的API，大大简化了网页元素的拖动操作编程难度，并且这些API除了支持浏览器内部元素的拖动外，同时支持浏览器和其它应用程序之间的数据互相拖动。本文通过一个简单示例，演示HTML5中拖动API的使用方法。场景：如下图所示，我们要实现：通过拖动将照片从左侧“相册”区域拖拽到右侧“...

html中的meta元素有什么用?

meta元素有两种用途。用途1：向浏览器传递网页的一些信息，浏览器根据这些信息规定的方式解析和显示网页。或者说，meta元素规定了浏览器解析和显示网页的方式。用途2：向搜索引擎传递网页的一些信息，引导搜索引擎工作。具体如下所述。 1 meta元素的类型和用途 meta元素有三种基本类型。 meta元素类型用途用户charset说明页面文件的字符编码浏览器http-equiv说明处理和显示页面的方式浏览器name说明页面的基本情况搜索引擎 2 ...

JavaScript 进阶学习 7 DOM对象，控制HTML元素【图】

DOM ：文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。getElementsByName()方法：返回带有指定名称的节点对象的集合。语法： document.getElementsByName(name)与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。注意: 1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回...

html5中新增的元素和废除的元素

一、新增的结构元素1、section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。 h5中的代码事例：<section></section> h4中的代码事例：<div></div>2、article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。 h5中的代码事例：<article><article> h4中的代码事例：<div></div>3、...

HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas（画布）实战编程初级篇系列，在这个系列中，我们将介绍最简单的HTML5画布编程。包括：画布元素绘制直线绘制曲线绘制路径绘制图形绘制颜色，渐变和图案绘制图片绘制文本相关要求环境要求：Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器编程要求：需要有基础的HTML和Javascript编程经验，相关的画布编程将调用Javascript API来处理HTML Canvas基本元素HTML5中包含一个专门为HTML画布功...

[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素【代码】

此方法用于把所有匹配的元素替换成指定的HTML或DOM元素　　content(String, Element, jQuery, Function)　　　　用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串。　　fn　　　　返回THML字符串，用来替换的内容。实例:<html lang=‘zh-cn‘> <head> <title>Insert you title</title> <meta http-equiv=‘description‘ content=‘this is my page‘> <meta http-equiv=‘keywords‘ conte...

html 标签内联元素和块元素分类【转】

常见的块状元素与内联元素块状元素内联元素address - 地址blockquote - 块引用center - 居中对齐dir - 目录列表div - 常用块级容易，也是CSS layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水平分隔线isindex - input prompt menu - 菜单列表noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscrip...

html5 有哪些新特性、移除了那些元素?如何处理 HTML5 新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 * 绘画 canvas 用于媒介回放的 video 和 audio 元素本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search 新的技术 webworker, websockt, Geolocation * ...

Html5 文本格式化元素

<b> 定义粗体文本,可以定义id,class,style和onclick等各种事件属性<i> 定义斜体文本，,可以定义id,class,style和onclick等各种事件属性<em> 定义强调文本，但是实际效果于斜体文本差不多，,可以定义id,class,style和onclick等各种事件属性<strong> 定义粗体文本，与<b>用法和效果都差不多<small> 定义小号字体文本，,可以定义id,class,style和onclick等各种事件属性<sup> 定义上标文本,可以定义id,class,style和onclic...

HTML-元素分类及属性（给HTML元素添加附加信息）【图】

1.元素分类块状元素和内联元素（块级元素可以包含行内元素，但是行内元素里面不要嵌套块级元素。）块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如：<h1>,<p>,<div>,<ul>,<table> 页面显示：内联元素（行内元素）在显示时通常不会以新行开始。例如：<b>,<span>,<a>,<img> 页面显示：单标签和双标签：单标签元素：<img>或者<img /> <br> <hr>双标签元素：<p></p>(有结束标签) 2.属性: 给HTML元素添加附...

HTML 鼠标坐标和元素坐标【图】

在这一篇文章中，将会介绍鼠标坐标、元素坐标以及鼠标在指定元素内的坐标。 1. 鼠标坐标在触发鼠标相关事件时(如：click、mousemove)，可以通过事件对象获取当前鼠标的坐标。获取的坐标可分为2种：1) MouseEvent.screenX、MouseEvent.screenY ：基于屏幕的X、Y坐标；以屏幕的左上角为0,0起始点。 2) MouseEvent.clientX、MouseEvent.clientY ：基于body的X、Y坐标；以当前body的左上角为0,0起始点，若body含有水平滚动条或垂直滚动...

13.HTML DOM 允许 JavaScript 改变 HTML 元素的内容。【代码】

1，改变 HTML 输出流 <script> document.write(Date()); </script>2，改变 HTML 内容 <script> document.getElementById("p1").innerHTML="New text!"; </script>3，改变thml属性<!DOCTYPE html> <html> <body><img id="image" src="smiley.gif"><script> document.getElementById("image").src="landscape.jpg"; </script></body> </html> 原文：http://www.cnblogs.com/jiningning/p/6393618.html

HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output【代码】

video 通过<video>标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.ma...

jQuery自动完成点击html元素【代码】

1/**************************************************************************2 * jQuery自动完成点击html元素3 * 声明：4 * 本来是想让嵌入产品完成自动检测，但是这种方法在Qt4.8的WebView控件中5 * 不能够正确的执行，目前不知道为什么。6 *7 * 2015-8-31 阴深圳南山平山村曾剑锋8 *************************************************************************/ 9...

首页 / HTML / HTML基本元素的运用

HTML基本元素的运用

内容导读

内容图文

一、 段落相关标签

二、 格式化相关标签

三、 列表相关标签

四、 图片相关标签

五、 超链相关标签

内容总结

内容备注

内容手机端

【HTML基本元素的运用】教程文章相关的互联网学习教程文章

元素 - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程

一、段落相关标签

二、格式化相关标签

三、列表相关标签

四、图片相关标签

五、超链相关标签