HTML Basic

Table of Contents

1 HTML简介

HTML, which stands for HyperText Markup Language, is the most basic building block of a webpage and used for creating and visually representing a webpage.

下面是HTML页面的一个简单例子:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

参考:
Introduction to HTML

2 HTML基本概念(Element, Tag, Attribute)

HTML中的Element,Tag,Attribute等基本概念在后文将一一介绍。这里给出它们的一个示意图,如图 1 所示。

html_basic.jpg

Figure 1: HTML中的Element,Tag,Attribute等基本概念

2.1 Element

HTML consists of a set of elements, which define the semantic meaning of their content. Elements include two matching tags and everything in between.

2.1.1 HTML元素参考

2.2 Tag

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

The first tag in a pair is the start tag(or opening tag), the second tag is the end tag(closing tag).
The end tag is written like the start tag, but with a forward slash inserted before the tag name.

说明:有些标签不包含content,也不包含其它其他元素,这样的标签只有“starg tag”,而没有“end tag”,比如img标签就没有“end tag”:

<img src="smileyface.jpg" alt="Smiley face">

2.3 Attribute

Attributes provide additional information about HTML elements. Attributes are always specified in the start tag.
Attributes usually consist of 2 parts:
(1) An attribute name
(2) An attribute value

<tag attribute1="value1" attribute2="value2">content</tag>

如,下面例子是给p标签增加了一个title属性:

<p title="I'm a tooltip">
This is a paragraph.
</p>

2.3.2 Global Attribute(所有元素都可用的属性)

The global attributes can be used on any HTML element.

Table 1: HTML Global Attribute
Global Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a class in a style sheet)
dir Specifies the text direction for the content in an element
id Specifies a unique id for an element
lang Specifies the language of the element's content
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
Table 2: HTML Global Attribute (added in HTML5)
Global Attribute (added in HTML5) Description
contenteditable Specifies whether the content of an element is editable or not
contextmenu Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
data-* Used to store custom data private to the page or application
draggable Specifies whether an element is draggable or not
dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped
hidden Specifies that an element is not yet, or is no longer, relevant
spellcheck Specifies whether the element is to have its spelling and grammar checked or not
translate Specifies whether the content of an element should be translated or not

参考:http://www.w3schools.com/tags/ref_standardattributes.asp

2.4 Tips: HTML中Tag和Attribute大小写“不敏感”

在HTML中,Tag和Attribute大小写不敏感;不过,在XML中,它们是大小写敏感的。

参考:http://w3c.github.io/html-reference/documents.html#case-insensitivity

3 HTML标签介绍

3.1 无序/有序列表

Unordered/Ordered List分别用 <ul><ol> 表示。下面代码可生成如图 2 所示效果。

This is unordered list:
<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

This is ordered list:
<ol>
  <li>First List Item</li>
  <li>Second List Item</li>
  <li>Third List Item</li>
</ol>

html_ul_ol.jpg

Figure 2: HTML无序和有序列表

3.2 表格

下面代码可以产生图 3 所示表格。

<table width="300" border="1">
  <tr>
    <th>Table Header 1</th>
    <th>Table Header 2</th>
  </tr>
  <tr>
    <td>Table Data 1</td>
    <td>Table Data 2</td>
  </tr>
  <tr>
    <td>Table Data 3</td>
    <td>Table Data 4</td>
  </tr>
</table>

html_table.jpg

Figure 3: HTML表格

3.3 表单常用标签(文本框/下拉菜单/单选按钮等等)

4 展示了表单中的常用标签及其在浏览器中的效果。

html_form.jpg

Figure 4: HTML表单常用标签及其在浏览器中的效果


Author: cig01

Created: <2011-10-16 Sun 00:00>

Last updated: <2017-05-10 Wed 21:39>

Creator: Emacs 25.1.1 (Org mode 9.0.7)