HTML 基础【转载】

时间 2019-11-07

标签 html 基础转载栏目 HTML 繁體版

原文原文链接

完整的HTML标签查询css

http://www.w3school.com.cn/tags/index.asphtml

属性查询编程

http://www.w3school.com.cn/tags/html_ref_standardattributes.asp浏览器

HTML框架

什么是 HTML？编程语言

HTML 是用来描述网页的一种语言。工具

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页布局

HTML 标签学习

HTML 标记标签一般被称为 HTML 标签 (HTML tag)。优化

HTML 标签是由尖括号包围的关键词，好比 <html>
HTML 标签一般是成对出现的，好比 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的做用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

HTML 标题（Heading）是经过 <h1> - <h6> 等标签进行定义的。

HTML 段落是经过 <p> 标签进行定义的。

HTML 连接是经过 <a> 标签进行定义的

Example:

HTML 图像是经过 <img> 标签进行定义的。

Example:

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签订义换行）。

在 XHTML、XML 以及将来版本的 HTML 中，全部元素都必须被关闭。

在开始标签中添加斜杠，好比 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即便 <br> 在全部浏览器中都是有效的，但使用 <br /> 实际上是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，由于万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在将来 (X)HTML 版本中强制使用小写。

HTML 属性

HTML 属性

HTML 标签能够拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性老是以名称/值对的形式出现，好比：name="value"。

属性老是在 HTML 元素的开始标签中规定。

<h1 align="center"> 拥有关于对齐方式的附加信息。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

<table border="1"> 拥有关于表格边框的附加信息。

HTML 水平线

<hr/>标签在HTML页面中建立水平线。

分割内容

HTML 折行

<br/> 折行

HTML文本格式化里面一些属性

http://www.w3school.com.cn/html/html_formatting.asp

HTML CSS 样式

外部样式表

当样式须要被应用到不少页面的时候，外部样式表将是理想的选择。使用外部样式表，你就能够经过更改一个文件来改变整个站点的外观。

<head>

</head>

内部样式表

当单个文件须要特别样式时，就可使用内部样式表。你能够在 head 部分经过 <style> 标签订义内部样式表。

<head>

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

内联样式

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

This is a paragraph

</p>

HTML 超连接

http://www.w3school.com.cn/html/html_links.asp

HTMl 图像操做

http://www.w3school.com.cn/html/html_images.asp

图像标签

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

HTML表格

http://www.w3school.com.cn/html/html_tables.asp

表格标签

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

HTML 列表

http://www.w3school.com.cn/html/html_lists.asp

列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

可使用 <div> 或者 <table> 元素来建立多列。CSS 用于对元素进行定位，或者为页面建立背景以及色彩丰富的外观。

提示：即便可使用 HTML 表格来建立漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

HTML 布局 - 有用的提示

提示：使用 CSS 最大的好处是，若是把 CSS 代码存放到外部样式表中，那么站点会更易于维护。经过编辑单一的文件，就能够改变全部页面的布局。如需学习更多有关 CSS 的知识，请访问咱们的 CSS 教程。

提示：因为建立高级的布局很是耗时，使用模板是一个快速的选项。经过搜索引擎能够找到不少免费的网站模板（您可使用这些预先构建好的网站布局，并优化它们）。

HTML表单

表单标签

http://www.w3school.com.cn/html/html_forms.asp

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮
<isindex>	已废弃。由 <input> 代替。

HTML 框架

经过使用框架，你能够在同一个浏览器窗口中显示不止一个页面。

http://www.w3school.com.cn/html/html_frames.asp

HTML 内联框架

http://www.w3school.com.cn/html/html_iframe.asp 内部嵌套一个框架

<!DOCTYPE> 声明

Web 世界中存在许多不一样的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不一样的版本，只有彻底明白页面中使用的确切 HTML 版本，浏览器才能彻底正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

提示：W3School 即将升级为最新的 HTML5 文档类型。