HTML常用元素

作者: Mo_dao | 来源:发表于2018-04-15 00:13 被阅读52次

HTML常用元素
JavaScript输出！
常用HTML元素小结
html常用标签
第一章 HTML
常用的HTML元素
html常用标签
Part 1-3 常用的基本元素
盒模型
HTML5新特性整理

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。可用的值包括：

button：无缺省行为按钮。
checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
color：HTML5 用于指定颜色的控件。
password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度。
radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
checked属性：
如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态。
name属性：
控件的名称，与表单数据一起提交。
15）<form>元素
HTML <form>元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。常用例子：
发送get请求：

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

发送post请求：

<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来提交表单，可选值有:

post: 指的是 HTTP POST方法; 表单数据会包含在表单体内然后发送给服务器。
get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器。当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。
target属性：
用来规定在提交表单之后，在哪里显示收到的回复，可选值有：
_self: 在当前文档页面重新加载返回值，这个是默认值。也就是说如果这个文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）。
_blank: 以新的文档窗口加载返回值。
_parent: 在父级的frame中文档形式加载返回值，如果没有父级的frame，行为和* _self一致。
_top: 如果是HTML 4文档: 清空当前文档，加载返回内容；HTML5: 在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。
iframename: 返回值在指定frame中加载。