HTML编程（1）-学习

最新推荐文章于 2023-05-09 16:12:37 发布

残心花

最新推荐文章于 2023-05-09 16:12:37 发布

阅读量429

点赞数 1

分类专栏：学习文章标签： html

本文链接：https://blog.csdn.net/weixin_43979090/article/details/104053267

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

何为HTML？
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML整体理解：
一般编写HTML文档时，其最基础的框架为：
框架：

<html>
	 <head>
		 <title>
		 </title>
		 <body>
		 </body>
	 </head>
</html>

其中：

1）<html>与</html>之间的文本描述网页
2）<body>与</body>之间的文本是可见的页面内容
3）<title></title>之间 的文本被显示为网站的标题

HTML基础理解：
HTML文档是由HTML元素定义的。HTML元素指的是开始标签（start tag）到结束标签（end tag）的所有代码。
例如一般有开始标签<p>和结束标签</p>,两者之间的内容就是即将被显示的内容。

HTML元素语法：
1）HTML元素是以开始标签起始
2）HTML元素以结束标签终止
3）元素的内容是开始标签与结束标签之间的内容
4）某些HTML元素具有空内容（empty content）
5)空元素在开始标签中进行关闭
6）大多数HTML元素可拥有属性

HTML属性：
1）属性为HTML元素提供附加信息。HTML标签可以拥有属性。属性提供了有关HTML元素的更多信息。
2）属性总是以名称/值对的形式出现，比如：name=‘value’。
3）属性总是在HTML元素的开始标签中规定
4）属性值应该始终被包括在引号内。双引号是最常用的，不过单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么就必须使用单引号。
示例：
1)HTML链接由<a>标签定义。链接的地址在href属性中指定：

<a href="http://www.w3school.com.cn">This is a link</a>

2)<h1>定义标题的开始。
<h1 align="center">拥有关于对齐方式的附加信息

3）<body>定义HTML文档的主体
<body bgcolor="yellow">拥有关于背景颜色的附加信息

1.标题：
HTML标题（Heading）是通过<h1>~<h6>等标签进行定义的。
例子：

<html>
	<head>
		<title>
标题
		</title>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
	</head>
</html>

上面代码结果如下：

标题

This is a heading

段落：HTML段落是通过<p>标签的

<hr />标签在HTML页面中创建水平线，其中hr元素可用于分隔内容
例如：
<p>This is a paragraph</p>
<hr />
<p>This is a another paragraph</p>
<hr />

代码结果如下：

标签在HTML页面中创建水平线，其中hr元素可用于分隔内容例如：

This is a paragraph

This is a another paragraph

HTML链接：HTML链接是通过<a>标签进行定义的
例:

<a href="http://www.w3school.com.cn">This is a link</a>

结果如下：
This is a link

HTML图像：
HTML图像是通过<img>标签进行定义的
例子：

<img src="w3school.jpg" width="104" height="142" />

结果如下：

HTML注释
注释：在开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
可以将注释插入HTML代码中，这样可以提高可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
示例：

<!--This is a comment -->

结果如下（既然是注释那肯定是什么都没显示啦！）：

HTML样式
style属性用于改变HTML元素的样式。
style属性的作用：提供了一种改变所有HTML元素的样式的通用方法。
样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式。通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接的独立的样式表中（CCS文件）进行定义。

不赞成使用的标签和属性：
标签：
1）<center> ：定义居中的内容
2）<front>和<basefont>：定义HTML的字体
3）<s>和<strike>：定义删除线文本
4）<u>：定义下划线文本
属性：
1）align：定义文本的对齐方式
2）bg-color：定义背景颜色
3）color：定义文本颜色
对于以上这些标签和属性：请使用样式代替。
所谓的不赞成使用的标签和属性是指，在HTML4中，有若干的标签和属性是被废弃的，被废弃的意思是在未来的版本的HTML和XHTML中将不支持这些标签和属性。

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>

结果如下（csdn文档内有些会显示出错！，像那个背景颜色）：

This is a heading

This is a paragraph.

HTML样式实例-字体，颜色和尺寸
font-family,color以及font-size属性分别定义元素中文本的字体系列，颜色和字体尺寸：

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

结果如下：

A heading

A paragraph.

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>

结果如下：

This is a heading

The heading above is aligned to the center of this page.

HTML文本格式化：
HTML可定义很多格式化输出的元素，比如粗体和斜体字
下面有很多例子：
1）文本格式化：

<html>

<body>

<b>This text is bold</b>

<br />

<strong>This text is strong</strong>

<br />

<big>This text is big</big>

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains
<sub>subscript</sub>

<br />

This text contains
<sup>superscript</sup>

</body>
</html>

结果如下：

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains
_subscript

This text contains
^superscript

2）预格式文本：此例子演示如何使用pre标签对空行和空格进行控制

<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

结果如下：

这是
预格式文本。
它保留了      空格
和换行。

pre 标签很适合显示计算机代码：

for i = 1 to 10
     print i
next i

3）“计算机输出”标签：此例演示不同的“计算机输出”标签的显示效果。

<html>

<body>

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

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

</body>
</html>

结果如下：

Computer code

Keyboard input

Teletype text

Sample text

Computer variable

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

4）地址：此例演示如何在HTML文件中写地址

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

结果如下：

Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA

5)缩写和首字母缩写
此例演示如何实现缩写或首字母缩写

<html>

<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

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

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

结果如下：

etc.

WWW

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

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

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

6）文字方向：此例演示如何改变文字的方向

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>


<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

结果如下：

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

Here is some Hebrew text

7）块引用：此例演示如何实现长短不一的引用语

<html>

<body>

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

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

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

结果如下：

这是长的引用：

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

这是短的引用：

这是短的引用。

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

8）删除字效果和插入字效果：此例演示如何标记删除文本和插入文本

<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

结果：

一打有二十十二件。

大多数浏览器会改写为删除文本和下划线文本。

一些老式的浏览器会把删除文本和下划线文本显示为普通文本。

文本格式化标签:

1)<b>：定义粗体文本
2)<big>：定义打好字
3)<em>：定义着重文字
4)<i>：定义斜体字
5)<small>：定义小号字
6)<strong>：定义加重语气
7)<sub>：定义下标字
8)<sup>：定义上标字
9)<ins>：定义插入字
10)<del>：定义删除字
11)<s>：用<del>代替
12)<strike>：用<del>代替
13)<u>：使用样式（style）代替

“计算机输出”标签：

1）<code>：定义计算机代码
2)<kbd>：定义键盘码
3)<samp>：定义计算机代码样本
4)<tt>：定义打字机代码
5)<var>：定义变量
6)<pre>：定义预格式文本
7)<listing>：使用<pre>代替
8)<plaintext>：使用<pre>代替
9)<xmp>：使用<pre>代替

引用和术语定义：

1）<abbr>：定义缩写
2)<acronym>：定义首字母缩写
3)<address>：定义地址
4)<bdo>：定义文字方向
5)<blockquote>：定义长的引用
6)<q>：定义短的引用
7)<cite>：定义引用，引证
8)<dfn>：定义一个定义项目

HTML引用
1)<q>元素定义短的引用。浏览器通常会为元素包围引号
实例：

<p>WWF的目标是：<q>构建人与自然和谐共存的世界。</q></p>

结果：

WWF的目标是：构建人与自然和谐共存的世界。

2)<blockquote>元素定义被引用的节。浏览器通常会对<blockquote>元素进行缩进处理
实例：

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

结果如下：

以下内容引用自 WWF 的网站：

五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。

3）用于缩略词的HTML<abbr>
<abbr>元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器，翻译系统以及搜索引擎提供有用的信息。
实例：

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

结果如下：

WHO 成立于 1948 年。

4）<dfn>元素定义项目或缩写的定义
实例：
如果设置了<dfn>元素的title属性，则定义项目：

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

结果如下：

WHO 成立于 1948 年。

如果元素包含具有标题的元素，则title定义项目:

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

结果如下：

WHO 成立于 1948 年。

否则，文本内容即是项目，并且父元素包含定义。

<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

结果如下：

WHO World Health Organization 成立于 1948 年。

5）<address>元素定义文档或文章的联系信息。此元素通常以斜体显示，大多数浏览器会在此元素前后添加折行
实例:

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

结果如下：

Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA

6)<cite>元素定义著作的标题。浏览器通常会以斜体显示<cite>元素
实例：

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

结果:

The Scream by Edward Munch. Painted in 1893.

HTML计算机代码格式：
通常，HTML使用可变的字母尺寸，以及可变的字母间距。
在显示计算机代码示例时，并不需要如此。
<kbd>,<samp>,<code>都支持固定的字母尺寸和间距
1）HTML键盘格式：<kbd>定义键盘输入

<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>

结果：

To open a file, select:

File | Open...

2）<samp>定义计算机输出示例：

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

结果：
demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

3)<code>定义编程代码示例：

<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>

结果：
var person = { firstName:“Bill”, lastName:“Gates”, age:50, eyeColor:“blue” }

但是<code>元素不保留多余的空格个折行：如下：

<p>Coding Example:</p>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>

结果：

Coding Example:

var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }

如需解决该问题，则需要在<pre>元素中包围代码：

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

结果如下：

Coding Example:

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

4)<var>元素定义数学变量：
示例：

<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>

结果：

Einstein wrote:

E = m c²

HTML注释：
注释标签用于在HTML插入注释
示例：

<!-- 这是一段注释 -->

结果（因为是注释，所以什么都没有）：

残心花

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML编程（1）-学习

何为HTML？HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本...
复制链接

扫一扫