HTML入门教程

最新推荐文章于 2024-08-31 10:29:18 发布

江湖小小虾

最新推荐文章于 2024-08-31 10:29:18 发布

阅读量692

点赞数 1

本文链接：https://blog.csdn.net/lishuan182/article/details/51295240

版权

一、什么是 HTML？

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

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

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
HTML 标签对大小写不敏感

HTML 文档 = 网页

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

HTML 属性

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

二、入门实例

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




My First Heading

My first paragraph.

This is a link

例子解释

<html> 与 </html> ——————（之间的文本）描述网页
<body> 与 </body> ——————可见的页面内容
<h1> 与 </h1> ————————标题
<p> 与 </p>——————————段落
<a>与</a>—————————链接（href 属性）
<img>与</img>—————— HTML图像
<br> 标签定义换行， <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
<hr /> 标签在 HTML 页面中创建水平线

三、HTML元素

3.1HTML 属性

href——————链接的地址
<h1 align="center"> 拥有关于对齐方式的附加信息
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息
<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）。<table border="1"> 拥有关于表格边框的附加信息

始终为属性值加引号

单双引号都可以，双引号常用，但是如果内容中包含双引号则必须使用单引号

<span>	</span><span>	</span>name='Bill "HelloWorld" Gates'

3.2HTML段落

在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签

<span style="white-space:pre">		</span><p>This is<br />a para<br />graph with line breaks</p>

<span style="white-space: pre;"><span style="line-height: 18px;">      </span></span>

<span style="white-space: pre;"><span style="line-height: 18px;">      浏览器会移除</span><span style="font-family: Verdana, Arial, 宋体; margin: 0px; padding: 0px; border: 0px;  line-height: 18px; background-color: rgb(249, 249, 249);"><strong>源代码中</strong></span><span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">多余的空格和空行，<span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格</span></span></span>

想要保留使用<pre></pre>预格式处理

3.3缩略词

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。

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

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

3.4块引用

使用 <blockquote> 元素的话，浏览器会插入换行和外边距

而 <q> 元素不会有任何特殊的呈现

3.5删除字效果、插入字效果

<span style="white-space:pre">	</span><p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

文本格式化标签

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