HTML

由 hrs, 25 十月, 2019

HTML实例-018 HTML的文本格式化

标签
HTML

在我们编辑html 网页的时候，会经常对文字的风格进行加粗、斜体、扩大、缩小、还有上标和下标等 ，这些是怎么做到的呢？

这一节我们就来讲讲html 网页的文本格式化。

实例代码如下：

<!doctype html>
<head>
<meta charset="utf-8">
<title>html 网页的文本格式化</title>
</head>
<html>
<body>
<b>这是一个加粗文本样式</b>
<br />
<strong>这是一个强壮的文本样式</strong>
<br />
<big>这是一个大的文本样式</big>
<br />
<em>这是一个强调文本样式</em>
<br />
<i>这是一个斜体文本样式</i>
<br />
<small>这是一个小的文本样式<small>
<br />
这是一个下标的样式
<sub>下标样式</sub>
<br />
这是一个上标的样式
<sup>上标样式</sup>
</body>
</html>

运行效果：

html_018.png

从这个实例中我们可以看到运行后文本的各种样式 ，但我觉得<b>和<strong> 样式体现出来粗体的效果是一样的。还有<i>和<em> 样式效果也一样。

<b>:文本加粗

<strong>：文本加粗

<big>：文本加大

<small>：文本缩小

<i>：文本斜体

<em>文本斜体

<sub>文本上标

<sup>文本下标

评论

由 hrs, 24 十月, 2019

HTML实例-017 html 网页的对齐样式

标签
HTML

在网页编辑中，有时候我们需要对文本进行对齐，那我们怎么来对它进行定义呢？

下面我就来举个实例

实例代码如下：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h1 style="text-align:center">这是一个居中的标题</h1>
<p>这是一个以页面相对居中的标题</p>
</body>
</html>

运行效果：

html_017.png

从这个网页中我们可以看出，这个标题相对页面是居中的，这是text-align 属性的作用。

text-align 属性规定了元素中文本的水平对齐方式：

属性 值 对齐方式
text-align center 居中
text-align left 左对齐
text-align right 右对齐

text-align:+ 对齐方式

评论

由 hrs, 24 十月, 2019

HTML实例-016 创建一个字体颜色大小和背景的样式

标签
HTML

这一个实例我们来创建一个综合的html网页样式实例，需要设置字体风格，字体的颜色，字体的大小和背景的颜色。

实例代码如下：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body style="background-color:yellow">
<h1 style="font-family:verdana">
这是一个字体风格为“verdana”标题实例</h1>
<p style="font-family:green;color:red;font-size:20px">
这个一个字体风格为“green”,字体颜色为红色，大小为20px 的实例</p>
<p>主体背景为黄色</p>
</body>
<html>

运行效果：

html_016.png

从这个实例中我们改变了网页的背景颜色 ，字体的风格，字体的颜色，字体的大小等样式。是不是很简单，相信你也会的。赶紧动手试试吧。

评论

由 hrs, 24 十月, 2019

HTML实例-015 设置html网页的背景颜色

标签
HTML

在网页设计中，经常要更换背景颜色，这个实例我们就来讲一下网页的背景颜色

实例代码如下：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body style="background-color:yellow">
<h1 style="background-color:red">这是一个红色的标题背景颜色实例</h1>
<p style="background-color:green">这是一个绿色的段落背景颜色实例</p>
<p>主体的背景颜色是黄色的</p>
</body>
</html>

运行效果 ：

html_015.png

从这个实例中看出，网页变成了花花绿绿的。这是由于我们使用background-color 样式，从而改变了页面的背景颜色。

background-color:+颜色        注释：改变html标签的背景颜色。

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色：

评论

由 hrs, 23 十月, 2019

HTML实例-014 创建一个html 网页样式

标签
HTML

在我们编辑html 网页中，需要为页面添加一颜色，字体的大小和各种格式。所以在这里我就需要style 样式 属性来进行html 进行定义。

实例代码如下：

<!doctype html >
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h1>看，这是一个字体和颜色的html样式实例</h1>
<p style="font-family:verdana;color:red">
这是一个字体为"verdana"的红色字体的样式</p>
<p style="font-family:times;color:green" >
这是一个字体为“times”的绿色字体的样式</p>
<p style="font-size:30px">这是一个字体为30号的样式</p>
</body>
</html>

实例效果：

html_014.png

从这个实例中看出，style 样式改变了html的输出样式。

font-family: +字体名称     注释：改变字体的风格   例如：font-family: times 

color:+颜色名称       注释：改变字体的颜色        例如：color:red

font-size:+字体大小    注释：改变字体的大小      例如：font-size:30px

  •  HTML 样式定义

style 属性用于改变 HTML 元素的样式。

HTML 的 style 属性

style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

评论

由 hrs, 23 十月, 2019

HTML实例-013 html 换行标签

标签
HTML

在html 网页中我们经常 要为段落换行，所以我需要用到换行标签<br/>,下面我们来举个实例。

实例代码如下：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个换行实例</p>
<p>我在这一段话中间<br/>加个换行标签，试试效果</p>
</body>
</html>

 运行效果：

html_013.png

在这个实例中我们可以看出，本来下面那个段落，如果不加换行标签是输出一行，现在加了个换行标签后，输出结果就是两行了。

  • HTML 换行标签定义：

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

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

评论

由 hrs, 23 十月, 2019

HTML实例-012 使用html 段落标签

标签
HTML

我们在编写html网页的时候需要经常使用段落<p>标签，下面我们就来创建一个段落标签。

实例代码如下：

<!doctype html>
<head>
<meta charset="UTF-8" />
</head>
<html>
<body>
<p>这是一个段落标签</p>
</body>
</html>

运行效果：

html_012.png

在这个实例中我们可以看到段落是用<p>标签来定义的。

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

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。

评论

由 hrs, 22 十月, 2019

HTML实例-011 如何给html 代码添加注释

标签
HTML

我们在编写HTML 代码和编程其它语言的时候都经常要用到注释，这样可以方便代码的可读性，对编程人员是很有帮助的。

下面我们就来举个实例。

实例代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
</herd>
<body>
<p>这是一个注释的实例，用到的是一个&lt;!-- --&gt;标签</p>
<!--这个是注释标签，在浏览器中是不会显示的，只是方便编程人员更好 的理解代码-->

</body>
</html>

运行效果：

html_011.png

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

提示：合理地使用注释可以对未来的代码编辑工作产生帮助。

注意：输出<!-- -- >注释标签 ，必须将特殊字符转换为命名实体。如：&lt;!-- --&gt; 则输出<!-- -->符号

 

 

评论

由 hrs, 20 十月, 2019

HTML实例-010 创建一条html 水平线

标签
HTML

在html 网页中我们经常要用到水平线来区分网页的内容，那我们如何来创建这条水平线呢？下面就跟着实例来学习吧！

实例代码如下：

<!doctype html>
<html>
<body>
<p>这是第一条水平线</p>
<hr />
<p>这是第二条水平线</p>
<hr />
</body>
</html>

运行效果：

html_010.png

从这个实例中，我创建水平线是用到<hr />标签，在这里我们创建了两条水平线，可以用来区分网页中的内容。

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

hr 元素可用于分隔内容。

评论

由 hrs, 20 十月, 2019

HTML实例-008 解决HTML 中文乱码问题

标签
HTML

当我们在编写html 文档运行的时候，经常会遇到网页出现乱码，如下图：

html_008.png

那我们怎么来解决这个问题呢？这是由浏览无法识别html 编码引起了，在这里我们给html加上utf-8 编码就可以了。

实例代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<a href="https://www.dwoke.com">这是一个链接</a>
</body>
</html>

运行效果：

html_008_1.png

重新刷新一下网页是不是显示正常了。

评论

HTML