Front-end HTML

An overview of HTML basis.

Table of Contents

  1. HTML Intro
    1. Example
    2. What is HTML
    3. HTML Tag
    4. HTML Document
  2. HTML Basic Tags
    1. Heading
    2. Paragraph
    3. Links
    4. Image
  3. HTML Elements
    1. p
    2. body
    3. html
    4. Empty
  4. HTML Properties
    1. align
    2. bgcolor
    3. Quotation Mark
    4. Reference
  5. HTML Header
    1. Horizontal Line
    2. Comment
  6. HTML Paragraph
    1. Wrap
    2. Output
  7. HTML Formatting
    1. Text Formatting
    2. Pre-formatting Text
    3. Computer Output Tags
    4. Address
    5. Abbreviation
    6. Text Direction
    7. Block Quotes
    8. Underlined and Inserted Text
  8. HTML CSS
    1. Style in HTML
    2. Link with No Underline
    3. Using External CSS
    4. Inline Style
  9. HTML Links
    1. Basic Syntax
    2. Text Link
    3. Image Link
  10. HTML Images
    1. Basic Syntax
    2. Background Image
    3. Align Style
    4. Image Mapping
  11. HTML Tables
    1. Basic Syntax
    2. Table Boarder
    3. Table Header
    4. Blank Cell
  12. HTML List
    1. Unordered List
    2. Ordered List
    3. Defined List
  13. HTML Div and Span
    1. Block Level Element
    2. Inline Element
    3. Div Element
    4. Span Element
  14. HTML Layout
    1. Using Div Element
    2. Using Table Element
  15. HTML Form and Input

HTML Intro

Example

1
2
3
4
5
6
<html>
 <body>
  <h1>My First Heading\</h1>
  <p>My First paragraph.</p>
 </body>
</html>

What is HTML

  • HTML 是用来描述网页的一种语言
  1. 超文本标记语言 (Hyper Text Markup Language)
  2. HTML 不是一种编程语言，而是一种标记语言 (Markup Language)
  3. 标记语言是一套标记标签 (Markup Tag)
  4. HTML 使用标记标签来描述网页

HTML Tag

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)
  1. HTML 标签是由尖括号包围的关键词，比如 <html>
  2. HTML 标签通常是成对出现的，比如 <b> 和 </b>
  3. 第一个是开始标签，第二个是结束标签
  4. 开始和结束标签也被称为开放标签和闭合标签

HTML Document

  • HTML 文档 = 网页
  1. HTML 文档描述网页
  2. HTML 文档包含HTML标签和纯文本
  3. HTML 文档也被称为网页

HTML Basic Tags

Heading

Range from <h1> to <h6>

1
2
3
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Paragraph

1
2
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
1
<a href="http://abelsu7.cn">This is a link</a>

Image

1
<img src="https://qiniu.abelsu7.cn/2016-07-31_fruit1.jpeg" width="768" height="512"/>

HTML Elements

HTML 元素指的是从 开始标签 到 结束标签 的所有代码

p

1
<p>This is my first paragraph.</p>

body

1
2
3
<body>
<p>This is my first paragraph.</p>
</body>

html

1
2
3
4
5
<html>
 <body>
  <p>This is my first paragraph.</p>
 </body>
</html>

Empty

  1. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  2. <br>就是没有关闭标签的空元素，定义换行
  3. 在开始标签中添加斜杠<br />，是关闭空元素的正确方法
  4. HTML 标签对大小写不敏感，而XHTML中强制使用小写

HTML Properties

  • 属性为HTML元素提供附加信息
1
<a href="http://abelsu7.cn">This is a link</a>
  1. HTML标签可以拥有属性
  2. 属性总是以键值对的形式出现，如 name="value"
  3. 属性总是在 HTML 元素的开始标签中规定

align

1
<h1 align="center">

bgcolor

1
<body bgcolor="yellow">

Quotation Mark

  • 当属性值包含双引号时，必须使用单引号
1
name='Bill "HelloWorld" Gates'

Reference

HTML Header

Horizontal Line

  • <hr /> 标签在 HTML 页面中创建水平线
1
2
3
4
5
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

Comment

1
<!-- This is a comment -->

HTML Paragraph

1
2
<p>This is a paragraph</p>
<p>This is another paragraph</p>
  • 浏览器会自动地在段落的前后添加空行
  • <p> 是块级元素

Wrap

1
<p>This is<br />a para<br />graph with line breaks</p>
  • 若要在不产生一个新段落的情况下进行换行，请使用 <br /> 标签
  • <br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签

Output

  • 无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果
  • 浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格

HTML Formatting

Text Formatting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<b>This text is bold</b>
<br />
<strong>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>

Pre-formatting Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<body>
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
</body>
</html>

Computer Output Tags

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>

Address

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

Abbreviation

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>

Text Direction

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>

Block Quotes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>
</body>
</html>

Underlined and Inserted Text

1
2
3
4
5
6
7
<html>
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>

HTML CSS

  • 通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表

Style in HTML

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>

Using External CSS

1
2
3
4
5
6
7
8
9
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>

Inline Style

  • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
  • 详情参见HTML CSS
1
2
3
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

Basic Syntax

  • 使用 <a> 标签在 HTML 中创建链接
1
2
3
4
5
<!-- target属性指定在新窗口打开文档 -->
<!-- name属性定义锚(anchor)，亦可以使用id属性代替，效果等价 -->
<a href="http://abelsu7.cn" name="abel" target="_blank">苏易北</a>
<!-- anchor亦可被外部链接引用 -->
<a href="http://abelsu7.cn/#abel">其他页面指向该锚的链接</a>
  1. 使用 href 属性，指向另一个文档
  2. 使用 name 属性，创建文档内书签
  3. 使用 target 属性，定义被链接文档的打开方式

Text Link

1
2
3
4
5
6
7
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>

HTML Images

Basic Syntax

  • <img> 是空标签，只包含属性，并且没有闭合标签
1
2
<!-- alt属性用来为图像定义一串可替换的文本，当图片无法加载时显示 -->
<img src="https://qiniu.abelsu7.cn/2016-08-01_fruit9.jpeg" alt="fruit" width="500" height="500" />

Background Image

1
2
3
4
5
6
7
<html>
<body background="https://qiniu.abelsu7.cn/2016-07-30_org_2016050243623_983-2.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

Align Style

  • Vertical in line
1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"/> 在文本中</p>
<p>图像 <img src="/i/eg_cute.gif" align="middle"/> 在文本中</p>
<p>图像 <img src="/i/eg_cute.gif" align="top"/> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>
</body>
</html>
  • Horizontal in paragraph
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<p>
<img src="/i/eg_cute.gif" align="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src="/i/eg_cute.gif" align="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>

Image Mapping

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化</p>
<a href="/example/html/html_ismap.html">
<img src="/i/eg_planets.jpg" ismap />
</a>
</body>
</html>

HTML Tables

Basic Syntax

  • <table> 标签定义表格
  • <tr> 定义行
  • <td> 定义列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
</body>
</html>

Table Boarder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<body>
<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>
</body>
</html>

Table Header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table border="1">
<!-- Begin of Header -->
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<!-- End of Header -->
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Blank Cell

  • 在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容),浏览器可能无法显示出这个单元格的边框
  • 为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来 
1
<td>&nbsp;</td>`

HTML List

Unordered List

  • 无序列表始于 <ul> 标签
  • 每个列表项始于 <li> 标签
1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Ordered List

  • 有序列表始于 <ol> 标签
  • 每个列表项始于 <li> 标签
1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Defined List

  • 自定义列表以 <dl> 标签开始
  • 每个自定义列表项以 <dt> 标签开始
  • 每个自定义列表项的定义以 <dd> 开始
1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML Div and Span

  • 可以通过 <div> 和 <span> 将 HTML 元素组合起来

Block Level Element

  • 块级元素在浏览器显示时，通常会以新行来开始和结束
  • <p>
  • <h1>
  • <ul>
  • <table>

Inline Element

  • 内联元素在显示时通常不会以新行开始
  • <a>
  • <b>
  • <td>
  • <img>

Div Element

  • <div>元素是块级元素，它是可用于组合其他HTML元素的容器
  • <div>元素没有特定的含义，浏览器会在其前后显示折行
  • <div>与CSS一同使用，可用于对大的内容块设置样式属性
  • <div>另一个常见用途是文档布局，取代了使用表格定义布局的老式方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
 <h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>
  ...
 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>
 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>
 ...
</body>

上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用class="news"对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。

  1. 在 HTML 4.01 中，div 元素的 align 属性不被赞成使用
  2. 在 XHTML 1.0 Strict DTD 中，div 元素的 align 属性不被支持

Span Element

  • html
  • css
1
<p class="tip"><span>提示：</span>... ... ...</p>

事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。

  1. <span>标签用来组合文档中的行内元素
  2. 详情参见 HTML \ 标签

HTML Layout

Using Div Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		div#container{width:500px}
		div#header {background-color:#99bbbb;}
		div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
		div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
		div#footer {background-color:#99bbbb;clear:both;text-align:center;}
		h1 {margin-bottom:0;}
		h2 {margin-bottom:0;font-size:18px;}
		ul {margin:0;}
		li {list-style:none;}
	</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>Main Title of Web Page</h1>
		</div>
		<div id="menu">
			<h2>Menu</h2>
			<ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>JavaScript</li>
			</ul>
		</div>
		<div id="content">Content goes here</div>
		<div id="footer">Copyright W3School.com.cn</div>
	</div>
</body>
</html>

Using Table Element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />	
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>

HTML Form and Input