2-HTML文本标签的应用

最新推荐文章于 2021-07-05 10:18:21 发布

虹姐-教育从心开始

最新推荐文章于 2021-07-05 10:18:21 发布

阅读量426

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_43827819/article/details/109576737

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、创建第1个网页

1、本课程选择的编辑器为HBuilder2.9.7 标准版。
2、在https://dcloud.io/官网下载。

1、如何创建？

单击-文件-新建-项目，打开新建项目对话框，选择，基本HTML项目，单击创建按钮，如下图：

2、HTML语法

2.1 HTML标签是由尖括号包围的关键词，如<html>
2.2 HTML标签通常是成对出现的，即双标签。如<html></html>
2.3 有些特殊的是单标签。如：<br>
2.4 HTML对大小写不敏感。小写a与大写A都可以，建议小写。
2.5 HTML注释：。

3、网页基本结构

3.1<html></html>:页面中最大标签，也称为根标签。
3.2 <head></head>:文档的头部，可用于设置标题，引入css,js等。
3.3 <title></title>：文档的标题
3.4 <body></body>:文档的主体，基本包含网页的所有内容。

在这里插入图片描述

4、知识必备

4.1 如何声明HTML文档类型？

<!DOCTYPE html>

4.2 如何解决网页乱码？

<meta charset="utf-8" />

charset属性规定HTML文档使用的字符编码，它的值有：GB2312、GBK和UTF-８(国际编码)

4.3 如何设置网页标题logo？

<link rel="shortcut icon" href="img/fav.jpg"/>

4.4 如何设置网页自动跳转？

<meta http-equiv="refresh" content="1; url=http://www.baidu.com"/>

二、案例练习：制作游戏介绍页

1、案例演示

在这里插入图片描述

2、知识必备

p标签：表示段落

<p>我是段落</p>
效果如下：

我是段落

我是段落

特点：独占一行，段落之间有空隙。

br标签：表示换行

<br/>
特点：换行，无空隙。

hr标签：表示水平线

<hr/>
效果如下：

h1-h6标签：表示标题

<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
效果如下：

我是标题1

我是标题2

我是标题3

我是标题4

我是标题5

我是标题6
**特点：独占一行，文字加粗，大小依次变小。**