HTML初识

最新推荐文章于 2025-07-28 18:31:30 发布

原创最新推荐文章于 2025-07-28 18:31:30 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

HTML/CSS 专栏收录该内容

1 篇文章

订阅专栏

加分本文学习来自W3Shool:http://www.w3school.com.cn/

1、什么是HTML？

HTML是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。HTML不是编程语言，而是一种标记语言，是一套标记标签（markup tag）。HTML正是使用标记标签来描述网页的。

HTML标记标签通常被称为HTML标签（HTML tag），通常是成对出现，例如：<h1></h1>。

HTML文档被称为网页，它包含HTML标签和纯文本。

2、Web浏览器展示网页的过程？

Web浏览器读取HTML文档，使用标签解析页面的内容，以网页的形式显示出来。

3、HTML文档例子初始

<html>
<body>

<h1>标题</h1>

<p>文本内容</p>

</body>
</html>

如上所示：

<html>与</html>之间的文本描述网页。

<body> 与 </body> 之间的文本是可见的页面内容。

<h1> 与 </h1> 之间的文本被显示为标题。

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

4、基本的HTML标签

HTML标题（Heading）：通过<h1>-<h6>等标签定义。

HTML段落：通过<p>标签定义。

HTML链接：通过<a>标签定义。例如 <a href="http://www.baidu.com">百度一下</a>

HTML图像：通过<img>标签定义。<img src="w3school.jpg" width="104" height="142" />

5、HTML元素

HTML文档是由HTML元素定义的。HTML元素是指所有从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML元素包含开始标签，元素内容和结束标签，并且大部分的HTML元素可拥有属性。

注意：HTML标签对大小写不敏感：如<p>等同于<P>。

6、HTML属性

属性为HTML元素提供附加信息。属性总是以属性/值对的形式出现，比如name="value"，并且总是在开头标签里规定的。

链接属性例子；

<a href="http://www.w3school.com.cn">这是一个链接</a>

对齐方式属性例子：

<h1 align="center">

HTML属性大全链接；http://www.w3school.com.cn/tags/index.asp

7、HTML标题

标题（Heading）是通过<h1>-<6>定义的，<h1>是最大的标题，<h6>是最小的标题。

<h1>This is a heading</h1>

HTML水平线：

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

<html>

<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

HTML注释：

例如：

<!-- This is a comment -->

例子：

<html>

<body>

<!--这是一段注释。注释不会在浏览器中显示。-->

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

</body>
</html>

8、HTML段落

HTML文档中的HTML段落是通过<p>标签定义的。

注意：使用空的段落标记<p></p>去插入一个空行是一个坏的习惯，用<br />标签代替它。(<br />标签是一个空的HTML元素，由于关闭标签并没有任何意义，因此它没有结束标签。)

<html>
<body>

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

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

9、HTML文本格式化

HTML可定义很多供格式化输出的元素，比如粗体和斜体字。

如何查看HTML源码？

要揭秘一个网站的技术秘密，可以单击浏览器的“查看”菜单，选择“查看源文件”，可以看到弹出的窗口中的HTML代码。

文本格式化标签

标签	描述
<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教程延伸阅读

总的来说：标签可以分为两类，基于内容的样式（content-based style）和物理样式（physical style）。同时，CSS提供了一种允许作者控制文档文本外观和布局的更为全面的方法。

使用基于内容的样式后，文档将会变得更加一致而且可以更好地帮助执行自动搜索和内容编辑。

这些标签的参考信息如链接所示：http://www.w3school.com.cn/html/html_style.asp

如果希望文本以某种特殊的方式来显示（例如斜体或加粗），在这种情况下，就可以对文本使用物理样式。当前的HTML/XHTML标准一共提供了9种物理样式，包括粗体（bold）、斜体（italic）、等宽（monospaced）、下划线（underlined）、删除线（strikethrough）、放大（larger）、缩小（smaller）、上标（superscripted）和下标（subscripted）文本。

这些标签的参考信息如链接所示：http://www.w3school.com.cn/html/html_style.asp

提示：物理样式标签对紧接的文本产生强烈效果；而要实现在整个文本范围内对文本的显示的全面控制，则使用样式表。

10、实践

HTML编辑器使用Nodepad或EditText来编写HTML

在记事本中键入如下代码：

<!DOCTYPE HTML>
<html>
<body>

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

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

</body>
</html>

并另存为.htm或者.html为扩展名的文件；打开该编辑的文件，可以看到HTML的效果。

11、HTML CSS

当浏览器读到一个样式表时，它就会对这个样式表来对文档进行格式化，有三种方式来插入样式表：

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

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

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

<head>

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

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

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