HTML学习笔记

HTML简介

示例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

解析

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容

<h1> 元素定义一个大标题

<p> 元素定义一个段落

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

注意：

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

HTML基础

HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的（此处的标题会逐渐变小即为大小标题）

示例如下

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

HTML段落

HTML 段落是通过标签 <p> 来定义的.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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

</body>

</html>

HTML链接

HTML 链接是通过标签 <a> 来定义的

<a href="//加链接">这是一个链接使用了 href 属性</a>

HTML图像

HTML 图像是通过标签 <img> 来定义的.

HTML元素

部分元素举例

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

<a href="default.htm"> 这是一个链接 </a>

<br> 换行

元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

HTML文档示例

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

HTML文档是由嵌套的HTML元素构成的

<p> </p>元素;

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.

元素内容是: 这是第一个段落。

<body> </body> 元素

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> </html> 元素

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.

元素内容是另一个 HTML 元素（body 元素）。

HTML 空元素

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

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

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

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

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

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

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="//加链接">这是一个链接使用了 href 属性</a>

注意

HTML 属性常用引用属性值属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML标题

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

<h1> 定义最大的标题。 <h6> 定义最小的标题。

注意：浏览器会自动地在标题的前后添加空行。

HTML水平线

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

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

<hr>

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

HTML注释

格式：

HTML段落

段落是通过 <p> 标签定义的。

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

HTML拆行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 输出- 使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML文体格式化

格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式,

如：粗体 or 斜体这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

<b> 定义粗体文本

<em> 定义着重文字

<i> 定义斜体字

<small> 定义小号字

<strong> 定义加重语气

<sub> 定义下标字

<sup> 定义上标字

<ins> 定义插入字

<del> 定义删除字

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

这是 <sub> 下标</sub> 和 <sup> 上标</sup>

“计算机输出”标签

<code> 定义计算机代码

<kbd> 定义键盘码

<samp> 定义计算机代码样本

<var> 定义变量

<pre> 定义预格式文本

<pre>

此例演示如何使用 pre 标签

对空行和空格

进行控制

</pre>

这样会按格式输出

<code>计算机输出</code>

<br />

<br />

<tt>打字机文本</tt>

<br />

<samp>计算机代码样本</samp>

<br />

<var>计算机变量</var>

<br />

注释：这些标签常用于显示计算机/编程代码。

引文，引用，及标签定义

<abbr> 定义缩写

<address> 定义地址

<bdo> 定义文字方向

<blockquote> 定义长的引用

<q> 定义短的引用语

<cite> 定义引用、引证

<dfn> 定义一个定义项目。

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>此部分为引用

We hope they succeed.</p>

WWF's goal is to: “Build a future where people live in harmony with nature.” We hope they succeed.

<abbr title="etcetera">etc.</abbr> 将"etcetera"缩写为” etc”

<br />

<acronym title="World Wide Web">WWW</acronym> 同理

仅对于 IE 5 中的 acronym 元素有效。

对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

HTML链接

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

链接的 HTML 代码很简单。它类似这样：

<a href="url">链接文本</a> href 属性描述了链接的目标。

HTML超链接

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

target属性

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

_blank 在新窗口打开

_parent 在本窗口打开

_self 在子页面下打开

_top 跳出框架在顶部部打开相当于 _parent

id属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.com "，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.com"。

图片链接

<p>创建图片链接:

<p>无边框的图片链接:

在当前页面链接到指定位置

<p>

</p>

<p>这边显示该章节的内容……</p>

<p>这边显示该章节的内容……</p>

<p>这边显示该章节的内容……</p>

<p>这边显示该章节的内容……</p>

<p>这边显示该章节的内容……</p>

HTML头部

<head>

<title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

<base> - 定义了所有链接的URL

使用 <base> 定义页面中所有链接默认的链接目标地址。

使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

HTML <head> 元素

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

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

<head>

</head>

HTML <link> 元素

<head>

</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒钟刷新当前页面:

HTML <script> 元素

小结

<head> 定义了文档的信息

<title> 定义了文档的标题

<base> 定义了页面链接标签的默认链接地址

HTML样式——css

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件最好

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性

内部样式表

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

<head>

body {}

p {color:blue;}

</style>

</head>

外部样式表

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

<head>

</head>

HTML图像

注意插入动图的语法和静态图的语法是一样的。

<img>可以用来插入图片

可以用 <br> 以及 <p> </p> 来调整图片位置

posted on 2019-11-11 13:23 千丶颜阅读(114) 评论(0) 编辑收藏举报