Skip to content
电脑工程师入门

电脑工程师入门

create tomorrow, create happiness

  • 实用软件教程
    • Excel
    • WordPress
    • Powerpoint
    • PowerApps
    • PowerAutomateDesk
  • 计算机语言入门
    • PHP
    • Bootstrap
    • JavaScript
    • Python
    • HTML
    • WordPress
  • 咨询
  • Home
  • HTML
  • 第二章 基本HTML技术
  • HOME
  • HTML
  • 第二章 基本HTML技术

第二章 基本HTML技术

HTML

目录

2-1创建章节和段落
2-2字加粗
2-3斜体
2-4更改字体大小
2-5更改文本颜色
2-6更改字体
2-7改行
2-8写一个清单

2-1创建章节和段落

如果您希望您的文档由章节和段落组成,请这样写:

<!DOCTYPE html>
<html>
<head>
<title>Web网页实践</title>
</head>
<body>
<h1>第一章介绍</h1>
<h2>1.1 什么是浏览器</h2>
<p>浏览器的作用</p>
<h2>1.2 什么是HTML</h2>
<p>HTML的基础知识</p>
</body>
</html>

在浏览器中查看时,它看起来像这样:

第一章介绍
1.1 什么是浏览器
浏览器的作用
1.2 什么是HTML
HTML的基础知识

<h1>和</h1>之间的部分代表章节的标题。数字是标题级别,可以从 1 到 6 指定。

<p> ~</p> 是段落的缩写,表示每一段。

2-2字加粗

使用<b>到 </b>使其变为粗体。

部分文本<b>加粗</b>。

这是在浏览器中查看时的样子:

部分文本加粗。

但是,HTML5 将 <b> 定义为“注意力吸引器”,而不是“粗体”。要使其“粗体”,请按如下方式使用<span>或样式表(CSS) font-weight 。

部分文本<span style="font-weight:bold;">加粗</span>。

2-3斜体

使用<i>到 </i>使斜体。

部分文本<i>斜体</i> 。

这是在浏览器中查看时的样子:

部分文本斜体

这是在浏览器中查看时的样子:

2-4更改字体大小

以前<font size=…>标签用于更改字体大小。

将一部分文字制作成
<font size="+2">大字</font> 。
在HTML5中,<font>被废除,使用样式表(CSS)的font-size指定如下。您可以为大小指定一个数值 + 单位,例如 16pt,或一个相对值,例如 180%。
文本的一部分<span style="font-size:180%;">变大</span> 。
文本的一部分变大 。

2-5更改文本颜色

要更改我们过去使用的文本的颜色<font color=…>标签。

部分文字设为<font color="red">红色文字</font> 。

在HTML5中, <font> 被废除,使用样式表(CSS) color指定如下。可指定的颜色请参考“ Tohoho Colors/Color Samples介绍”。

部分文本<span style="color:red;"> red text </span> 。

这是在浏览器中查看时的样子:

部分文字设为红色。

2-6更改字体

我曾经使用<font face=…>标签来改变字体。

制作
部分文字<font face="MS Mincho"> Mincho </font> 。

在 HTML5 中,<font> 被废除,使用样式表(CSS)的font-family指定如下。

制作
部分文字<span style="font-family:'MS Mincho'"> Mincho </span> 。

这是在浏览器中查看时的样子:

制作部分文本 Mincho 。

2-7改行

HTML 文档中文本中的换行符通常会转换为单个空格字符。使用<br>在您喜欢的位置换行。

这里的<br>是换行符。

这是在浏览器中查看时的样子:

这里
是换行符。

使用<nobr>禁止换行,使用<pre>可以原样显示HTML文档中的换行和空格。

2-8写一个清单

使用<ul> ~</ul> 和<li>来编写没有数字的列表。

<ul> 
<li>苹果</li> 
<li>橘子</li> 
</ul>

这是在浏览器中查看时的样子:

・苹果
・橘子

编号列表使用<ol> ~</ol> 和<li> 。

<ol> 
<li>青森</li> 
<li>爱媛</li> 
</ol>

这是在浏览器中查看时的样子:

1. 青森
2. 爱媛

使用<dl> ~</dl> 和<dt>和<dl>来描述术语和术语的描述列表。

<dl> 
<dt> HTML </dt> 
<dd>什么是 HTML... </dd> 
<dt> JavaScript </dt> 
<dd>什么是 JavaScript... </dd> 
</dl>

这是在浏览器中查看时的样子:

HTML
    什么是 HTML... 
JavaScript
   什么是 JavaScript... ?
标签:HTML

文章导航

❮ Previous Post: 第一章 HTML的基础知识
Next Post: 第三章 在HTML中使用表格 ❯

关联内容

HTML
第一章 HTML的基础知识
HTML
第三章 在HTML中使用表格
HTML
第四章 HTML的链接
HTML
第五章 HTML粘贴图像
HTML
第六章 创建HTML文件

实用软件教程

  • Powerpoint
  • Excel
  • PowerAutomateDesk
  • Wordpress
  • Powerapps

编程语言入门

  • JavaScript
  • HTML
  • PHP
  • Python
  • Bootstrap

Copy right by flashyonder.com