HTML components

JKChang2015

5/30/2018 - 1:14 PM

Rendered
Source

7. HTML Head

HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

Tabs	Description
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

1. `<head>` 元素

<head> 元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

2. `<title>` 元素

<title> 标签定义了不同文档的标题,其在 HTML/XHTML 文档中是必须的。

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

<!DOCTYPE html>      
<html>        
<head>        
<title>Title of the document</title>        
</head>                
<body>       
The content of the document......        
</body>                
</html>

3. `<base>` 元素

<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>       
<base href="//www.w3cschool.cn/images/" target="_blank">  
</head>

提示:在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。

6 HTML link.md

Rendered
Source

6. HTML链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML超链接

HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

在标签<a> 中使用了href属性来描述链接的地址默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带上下划线
点击链接时，链接显示为红色并带上下划线

HTML空链接

HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

<a href="#">Link text</a>

HTML链接语法

<a href="//www.w3cschool.cn/">Link text</a>

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示（在新的出口打开，还是在原有的窗口中打开）。下面的这行会在新窗口打开文档：

<a href="//www.google.com/" target="_blank">google</a>

提示：默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

HTML 链接 - id 属性

id 属性可用于在一个 HTML 文档中创建书签标记。书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
<a href="//www.w3cschool.cn/html_links.html#tips"> Visit the Useful Tips Section</a>

id defined the bookmark
href="#<id name>" will directly relocate the browser to the bookmark

提示：如果href 不使用http，则加两个 //

More Examples

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>

<p>插入图片链接:
<a href="http://www.w3cschool.cn/html/html-tutorial.html">
<img border="0" src="/statics/images/course/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

Notes:

<p> paragrah
图片所有部分需要包裹在 <a href= > </a> 中
<img> defind all the attribute of the image
border border
src source url of the image
alt description of the image, if fail to load the image display the text in alt
width and height define the size of the image

Hyperlink to send email to several email

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>

<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

5 HTML text format.md

Rendered
Source

5. HTML文本格式化

HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

HTML文本格式化标签

tag	Description
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	斜体
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标
`<sup>`	定义上标
`<ins>`	定义插入字
`<del>`	定义删除字

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formatted tabs</title>
</head>
<body>

<b>这是粗题字</b> <br/>
<strong>这是粗题字2</strong>
<hr>

<i>这是斜体</i><br/>
<em>这是斜体2</em>
<hr>

<p>这是<sub>下标</sub></p>
<p>这是 <sup>上标</sup></p>
<hr>

<small>这是变小的字</small>
<hr>
<ins>这是插入</ins>
<hr>
<del>这是删除</del>
<hr>
</body>
</html>

HTML "计算机输出"标签

tag	Description
`<code>`	定义计算机代码
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<var>`	定义变量
`<pre>`	定义变量

HTML 引文, 引用, 及标签定义

tag	Description
`<abbr>`	定义缩写
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语
`<cite>`	定义引用、引证
`<dfn>`	定义一个定义项目

4 HTML paragraph.md

Rendered
Source

4.HTML段落

HTML 可以将文档分割为若干段落。段落是通过<p> </p> 标签定义的。如果希望在不产生一个新段落的情况下进行换行（新行），请使用 <br />标签。

3 HTML heads.md

Rendered
Source

3.HTML标题

HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页。标题（Heading）是通过 <h1> - <h6> 标签进行定义的. <h1>定义最大的标题。<h6> 定义最小的标题。

<h1>这是一个标题。</h1> 
<h2>这是一个标题。</h2> 
<h3>这是一个标题。</h3>

HTML水平线

<hr> 标签在 HTML页面中创建水平线。hr元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

HTML注释

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

<!-- 这是一个注释 -->

2 HTML attributes.md

Rendered
Source

2.HTML属性

属性是为 HTML 元素提供的附加信息。

HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般属于开始标签
属性总是以名称/值对的形式出现，比如：name = ‘value’
属性值应该始终被包裹在括号内
双引号比较常用，单引号也可以
属性和属性值大小写不敏感，推荐小写

<a href="http://www.w3cschool.cn">这是一个链接</a>

HTML属性表

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

1 HTML elements.md

Rendered
Source

1. HTML 元素

HTML 文档由 HTML元素定义，HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 空元素

HTML 空元素即为没有内容的 HTML 元素。 HTML 空元素应该在开始标签中关闭。 HTML 的一个空元素为<br>（用于定义换行），<br>元素就是没有关闭标签。

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster