基本的html知识

2017-05-15 本文已影响0人汀沙云树晚苍苍

HTML 链接是通过 <a> 标签进行定义的。
HTML 图像是通过 <img> 标签进行定义的。
开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html> 包含三个html元素```

**`<br />` 其实是更长远的保障。**换行

<h1 align="center">拥有关于对齐方式的附加信息。 < body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1">` 拥有关于表格边框的附加信息。


###HTML 属性参考手册
| 属性        | 值        | 描述  |
| ------------- |:-------------:| -----:|
| class      | classname | 规定元素的类名（classname） |
| id      | id     |   规定元素的唯一 id |
| style |style_definition     |    规定元素的行内样式（inline style） |
| title | text     |    规定元素的额外信息（可在工具提示中显示） |
| accesskey      |   | 规定激活元素的快捷键。 |
| contenteditable   |   5=HTML5 中添加的属性  |   规定元素内容是否可编辑 |
| contextmenu     |  5  | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| dats-* |    5  |    用于存储页面或应用程序的私有定制数据。 |
| dir      |   | 规定元素中内容的文本方向。 |
| draggable      |  5 |   规定元素是否可拖动。 |
| dropzone     |   5 |规定在拖动被拖动数据时是否进行复制、移动或链接 |
| didden |     5 |    规定元素仍未或不再相关 |
| lang |      |    规定元素内容的语言。 |
| spellcheck |   5   |   规定是否对元素进行拼写和语法检查。 |
| tabindex |      |    规定元素的 tab 键次序。 |
| translate |   5   |    规定是否应该翻译元素内容。 |

##标题
标题（Heading）是通过 `<h1> - <h6> `等标签进行定义的。
水平线——`<hr />` 标签在 HTML 页面中创建水平线。
注释`<!-- This is a comment -->`

##段落
**别用空段落标记去插入一个空行**
折行——` <br />`
**所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。**

##样式
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
**应该避免使用下面这些标签和属性：**

| 标签        | 描述           |
| ------------- |:-------------:| 
|` <center>  `    | 定义居中的内容  | 
| `<font>和<basefont>`     | 定义 HTML 字体     | 
| `<s>和<strike>` | 定义删除线文本      | 
| `<u>` | 定义下划线文本      | 

| 属性        | 描述           |
| ------------- |:-------------:| 
| align      | 定义文本的对齐方式 | 
| gbcolor    | 定义背景颜色     | 
| color | 定义文本颜色      | 

**对于以上这些标签和属性：请使用样式代替！**


属性为元素定义了背景颜色

<html>

<body style="background-color:yellow">background-color
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

text-align 属性规定了元素中文本的水平对齐方式：

<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>



##文本格式化
文本格式化标签

标签| 描述 
----|------
`<b > `    | 定义粗体文本 
`<big > `   | 定义大号字 
 `<em>` | 定义着重文字
`<i>`      | 定义斜体字
`<small> `     | 定义小号字
`<strong>` | 定义加重语气
`<sub>`      | 定义下标字
`<sup>`   | 定义上标字
`<ins>` | 定义插入字 
` <del> `    | 定义删除字
`<s>`      | 不赞成使用。使用(del)代替
`<strike>` | 不赞成使用。使用(del)代替
`<u> `     | 不赞成使用。使用(style)代替

“计算机输出”标签

标签        | 描述
 ------------- |-------------
`< code>   `   | 定义计算机代码
`<kbd>  `    | 定义键盘码
`<samp>` | 定义计算机代码样本
 `<tt >`   | 定义打字机代码 
`<var >  ` | 定义变量
 `<pre> `| 定义预格式文本
`<listing> `   | 不赞成使用使用 `<pre>` 代替
`<plaintext >`  | 不赞成使用。使用 `<pre>` 代替
` <xmp> `|不赞成使用。使用 `<pre>` 代替

引用、引用和术语定义

标签       |描述
------------- |-------------
`<abbr> `    | 定义缩写
 `<acronym >`    | 定义首字母缩写
`<address>` | 定义地址
`<bdo   >`   | 定义文字方向
`<blockquote>`    | 定义长的引用
`<q>` | 定义短的引用语
`<cite>` |定义引用、引证
`<dfn >`| 定义一个定义项目

##引用
`<q></q>`元素定义短的引用。
HTML `<blockquote>` 元素定义被引用的节
HTML `<abbr> `元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
`<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>`
HTML` <dfn> `元素定义项目或缩写的定义。
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。
HTML <cite> 元素定义著作的标题。
HTML <bdo> 元素定义双流向覆盖（bi-directional override）


##计算机代码元素
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。在显示计算机代码示例时，并不需要如此。

HTML 计算机代码元素

标签       |描述
------------- |-------------
`<code> `    | 定义计算机代码文本 `<code> `元素不保留多余的空格和折行----如需解决该问题，您必须在 `<pre>` 元素中包围代码
 `<kbd>`    | 定义键盘文本
`<samp>` | 定义计算机代码示例
`<var>`   | 定义变量
`<pre>`    | 定义格式化文本

##注释
条件注释:您也许会在 HTML 中偶尔发现条件注释：
`<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->条件注释定义只有 Internet Explorer 执行的 HTML 标签`

##CSS
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
1. 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

2. 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>


3. 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


标签 | 描述 
----|------
`<style>` | 定义样式定义。
`<link>` | 定义资源引用。
`<div> `| 定义文档中的节或区域（块级）。
`<span> `| 定义文档中的行内的小块或区域。
`<font >`| 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
`<basefont>` | 定义基准字体。不赞成使用。请使用样式。
`<center>` | 对文本进行水平居中。不赞成使用。请使用样式。


##链接

有两种使用 `<a> `标签的方式：
1. 通过使用 `href` 属性 - 创建指向另一个文档的链接
2. 通过使用` name`属性 - 创建文档内的书签
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

实例`<a>` 定义锚
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
`<a name="tips">基本的注意事项 - 有用的提示</a>`
然后，我们在同一个文档中创建指向该锚的链接：
`<a href="#tips">有用的提示</a>`
您也可以在其他页面中创建指向该锚的链接：
`<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>`
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

· 使用 Target 属性，你可以定义被链接的文档在何处显示。

##图像
图像由 <img> 标签定义，要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像标签

标签 | 描述 
----|------
`<img>` | 定义图像
`<map>` | 定义图像地图
`<area> `| 定义图像地图中的可点击区域

创建图像映射——可以点击图像上的星球，将它们放大。

<p>请点击图像上的星球，把它们放大。</p>

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>


##表格
> 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：

表格的表头使用 <th> 标签进行定义。——大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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>


空单元格_为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。`&nbsp;`

<tr>
<th rowspan="2">电话</th> 跨两行单元格
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>


表格带标题，直接可以用h1，h2……
定义跨行跨列的单元格：

<tr> 跨列单元格
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>


跨行单元格：

<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>


单元格边距：
`<table border="1" cellpadding="10">`

单元格间距：
`<table border="1" cellspacing="10">`

表格背景添加背景颜色或背景图像
`<table border="1" 
bgcolor="red">`
`<table border="1" 
background="/i/eg_bg_07.gif">`

单元格内添加背景或颜色
`<td 
 background="/i/eg_bg_07.gif">`
`<td 
bgcolor="red">First</td>`

在表格单元中排列内容

框架frame属性

<table frame="box"> 有四边边框
<table frame="above"> 只有上边框
<table frame="below"> 只有下边框
<table frame="hsides"> 只有上下边框
<table frame="vsides"> 只有左右边框



表格 | 描述 
----|------
`<table>` | 定义表格
`<caption>` | 定义表格标题
`<th> `| 定义表格表头
`<tr>` | 定义表格的行
`<td>` | 定义表格单元
`<thead> `| 定义表格的页眉
`<tbody>` | 定义表格主体
`<tfoot>` | 定义表格的页脚
`<col> `| 定义用户表格列属性
`<colgroup> `| 定义表格列的组

基本的html知识

猜你喜欢

热点阅读