HTML笔记

来源：互联网发布：户型图平面设计软件编辑：程序博客网时间：2024/05/19 05:31

基本的 HTML 标签

HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落
HTML 段落是通过 <p> 标签进行定义的。 HTML 链接
HTML
链接是通过 <a> 标签进行定义的。
HTML 图像
HTML 图像是通过 <img> 标签进行定义的。

HTML 元素

HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性

HTML 属性

HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

HTML 样式

style 属性用于改变 HTML 元素的样式
HTML 样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：

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

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>

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>

HTML 文本格式化预格式化

 <pre>     它保留了      空格  </pre>

显示计算机/编程代码

<code>Computer code</code><kbd>Keyboard input</kbd><tt>Teletype text</tt><samp>Sample text</samp><var>Computer variable</var>

地址

<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>

文字方向

<bdo dir="rtl">文字会从右向左输出</bdo>

块引用

这是长的引用：<blockquote>  这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用    <blockquote>这是短的引用：<q>这是短的引用。</q>

用于缩略词的元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<abbr title="World Health Organization">WHO</abbr>

删除字和插入字

<del>二十</del> <ins>十二</ins>

文本格式化标签

标签  描述<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>   定义一个定义项目。

HTML 注释

HTML 注释标签
您能够通过如下语法向 HTML 源代码添加注释：

<!-- Write your comments here -->

注释：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。条件注释您也许会在 HTML 中偶尔发现条件注释：

<!--[if IE 8]>    .... some HTML here ....<![endif]-->

**条件注释定义只有 Internet Explorer 执行的 HTML 标签。**

HTML CSS

如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

*外部样式表*

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

**内部样式表**当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

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

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

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

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用标签在 HTML 中创建链接。

有两种使用标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。

<a href="http://www.w3school.com.cn/">Visit W3School</a>

上面这行代码显示为：Visit W3School

HTML 链接 - target 属性
下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

0 0