我爱编程

HTML常用元素

2018-04-15  本文已影响52人  Mo_dao

1.HTML简介

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的基石。它描述并定义了一个网页的内容。其他除 HTML 以外的技术则通常用来描述一个网页的表现／展示效果（CSS）或功能（JavaScript）。

2.常用HTML元素

1)<body>元素
HTML <body> 元素表示HTML文档内容所在之处。一个文档中只允许有一个 <body> 元素。
2）<div>元素
HTML <div> 元素 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 ，它应该在没有任何其它语义元素可用时才使用。<div>元素，是一个块级元素。
3）<span>元素
HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性。应该在没有其他合适的语义元素时才使用它。
4） <p>元素
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
如在下面代码：
<p>这是一个p元素</p>，在浏览器中的显示如图1所示：

图1
5)<h1>到<h6>元素
<h1>到<h6>元素,在HTML文档中用来显示各类标题。下面代码在浏览器中的显示效果如图2所示，从<h1>到<h6>，标题依次变小。 
<h1>这是h1元素</h1>
<h2>这是h2元素</h2>
<h3>这是h3元素</h3>
<h4>这是h4元素</h4>
<h5>这是h5元素</h5>
<h6>这是h6元素</h6>
图2
6)<ul>元素
HTML<ul>元素是指无序列表，下面代码在浏览器中的显示效果，如图3所示,<ul>元素一般与<li>元素搭配使用： 
<ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
</ul>
图3
7）<ol>元素
HTML<ol>元素是指有序列表，下面代码在浏览器中的显示效果，如图4所示，<ol>元素一般也与<li>元素搭配使用： 
 <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
 </ol>
图4
8）<br>元素
HTML<br>元素在HTML文档中表示换行。
9） <hr>元素
HTML <hr>元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。
10)<strong>元素
HTML <strong>元素表示文本十分重要，一般用粗体显示。在浏览器的显示效果如图5所示：
<p>这是一个<strong>strong</strong>元素</p>
图5
11)<small>元素
HTML <small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。在浏览器中的显示效果如下图6所示：
<p>small元素的作用是将---<small>字体变小</small>
图6
12)<em>元素
HTML <em> 标记出需要用户着重阅读的内容，<em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。在浏览器中的显示效果如下：
<p>I like<em>Tylor Swift</em><p>
图7
和<i>元素一样，<em>在浏览器中的显示效果是将字体变成斜体，但是它们的语义却完全不同，<em> 元素表示着重强调其内容，而 <i> 元素表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。
13）<a>元素
HTML<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
** <a> 元素的几种长见用法**
a.链接到外部地址： 
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a">
MDN
</a>

在浏览器中的显示结果：MDN
b.链接到本页的某个部分:

<a href="#常用HTML元素">
链接到常用HTML元素
</a>

在浏览器中点击该链接就会跳到常用HTML元素处。
c.创建一个可点击的图片:
在浏览器中点击图 MDN logo就会在新的窗口打开MDN主页。

<a href="https://developer.mozilla.org/zh-CN/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" 
       alt="MDN logo" />
</a>
图8
<a>元素的几个重要属性：
download属性：此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
href属性：这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置全局属性开头的名字。URL不限于网页（HTTP）的文件。URL可能使用浏览器所支持的任何协议。例如，文件，FTP，大多数用户代理mailto工作。
注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。
target属性：该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
_self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
_blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
_top: HTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。
14）<input>元素
HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。
<input> 元素几个重要属性：
type属性：控件类型的显示。如果这个属性没有指定，默认的类型是 text。可用的值包括： 
<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<form>元素几个重要属性：
method属性：浏览器使用HTTP来提交表单，可选值有:

参考资料MDN

上一篇下一篇

猜你喜欢

热点阅读