HTML常用元素

1.HTML简介

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

2.常用HTML元素

1)元素
HTML 元素表示HTML文档内容所在之处。一个文档中只允许有一个 元素。
2）

元素
HTML

元素 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 ，它应该在没有任何其它语义元素可用时才使用。

元素，是一个块级元素。
3）元素
HTML 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性。应该在没有其他合适的语义元素时才使用它。
4）

元素
HTML

元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，

是块级元素。
如在下面代码：

这是一个p元素

，在浏览器中的显示如图1所示：

图1

5)

到

元素

到

元素,在HTML文档中用来显示各类标题。下面代码在浏览器中的显示效果如图2所示，从

到

，标题依次变小。

这是h1元素
这是h2元素
这是h3元素
这是h4元素
这是h5元素
这是h6元素

图2

6)

元素
HTML
元素是指无序列表，下面代码在浏览器中的显示效果，如图3所示,
元素一般与
• 元素搭配使用：

  
          
  HTML
          
  CSS
          
  JavaScript
  
  

  图3
  
  7）
  元素
  HTML
  元素是指有序列表，下面代码在浏览器中的显示效果，如图4所示，
  元素一般也与
  1. 元素搭配使用：

      
     
             
     HTML
             
     CSS
             
     JavaScript
      
     

     图4
     
     8）
元素
     HTML
元素在HTML文档中表示换行。
     9）

     ---

     元素
     HTML

     ---

     元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。
     10)元素
     HTML 元素表示文本十分重要，一般用粗体显示。在浏览器的显示效果如图5所示：
     

     这是一个strong元素

     
     
     图5
     
     11)元素
     HTML 元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。在浏览器中的显示效果如下图6所示：
     

     small元素的作用是将---字体变小
     

     图6
     
     12)元素
     HTML 标记出需要用户着重阅读的内容， 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。在浏览器中的显示效果如下：
     

     I likeTylor Swift

     
     

     图7
     
     和元素一样，在浏览器中的显示效果是将字体变成斜体，但是它们的语义却完全不同， 元素表示着重强调其内容，而 元素表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。
     13）元素
     HTML 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
     ** 元素的几种长见用法**
     a.链接到外部地址：

     
     MDN
     
     

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

     
     链接到常用HTML元素
     
     

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

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

     
       Name:
       
       
     
     

     • 发送post请求：

     
       Name:
       
       
     
     

     元素几个重要属性：
     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中加载。

     参考资料MDN