第1章创建一个html网页

误小果

已于 2023-01-06 11:21:18 修改

阅读量746

点赞数

分类专栏：前端文章标签： html 前端 javascript

于 2022-11-17 19:56:49 首次发布

本文链接：https://blog.csdn.net/m0_72647241/article/details/127909571

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

                                   创建一个html网页

目录标题

1.1认识html
1.2html标签
1.3html文件的基本结构
1.4Chrome的开发者工具
1.5在记事本中编写HTML文件
1.6使用编辑器创建HTML文档
- 1.6.1下载Hbuilder X
- 1.6.2使用Hbuilder X
1.7编写第一个HTML网页
1.8习题

1.1认识html

HTML：即超文本标记语言，也是全球广域网上描述网页内容和外观的标准。

1.2html标签

1）.HTML的标签:经常成对出现，如h1和/h1，第一个标签是开始标签，第二个标签是结束标签。
2）.一个html元素通常是由一个开始标签，内容和一个结束标签组成的。结束标签中要用斜杆"/"表示元素结束。
3).HTML标签可以设置属性，属性一般设置在开始标签中。属性的作用是给元素添加附加信息，它总是以属性名="属性值"的形式出现，一个元素可以有多个属性。语法如下：
<元素名属性名1="值1"属性名2=“值2”></元素名>

例子1-1
创建一个h1元素，为其设置id属性，属性值为title。

<h1 id="title">我是标题元素</h1>

1.3html文件的基本结构

HTML文档是由HTML标签定义的，它必须具备正确的结构才能够在浏览器上显示出来。

语法

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title></title>
   </head>
   <body>
   </body>
</html>

说明

<!DOCTYPE html>声明位于HTML文档的第一行，用于告知浏览器文档所使用的HTML规范。
<html>标签是所有的HTML文档都应该有的标签，<html>标签可以包含<head>和<body>两部分。
<head>标签内包含整个网页的信息。
<title>标签用于定义文档的名字，通常出现在浏览器窗口的标题栏或状态栏中。
<meta>标签通常用于指定网页的描述及其他元数据。<meta>标签的charset属性告知浏览器此网页的字符编码格式，如charset="UTF-8"表示此网页遵循万国码(unicode)的编码标准。
<body>标签用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>标签指明主体区域的结束。

1.4Chrome的开发者工具

网页是在浏览器上呈现的。如果想要查看页面元素，在想要查看的页面上单击鼠标右键，选择**[检查]**。

1.5在记事本中编写HTML文件

创建一个记事本，将记事本重命名为html后缀。

1.6使用编辑器创建HTML文档

1.6.1下载Hbuilder X

1.6.2使用Hbuilder X

1.7编写第一个HTML网页

1).标签是整个页面的最外层围墙,用它来"包裹"页面的所有内容。
2).标签相当于页面的身份证，包括了页面的所有重要信息，这一部分内容不会呈现在页面上，浏览器不能直接看到。
3).部分是页面的主体部分，它相当于一个房间，里面包含了所有在浏览器上要呈现的内容信息，也就是浏览者可以看到的内容。
4).在标签之间加入标题和内容，标题使用

标签，内容使用
标签。不同的标签将在浏览器中呈现不同的样式。

例子1

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>第一个页面</title>
   </head>
   <body>
         <h1>我们的第一个HTML页面</h1>
         <p>开始HTML学习的旅程!</p>
   </body>
</html>

例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欢迎来到王者荣耀！</h1>
    <p>全军出击</p>
</body>
</html>

1.8习题

（1）填空题

（1）标签通常都是成对使用，有一个开始标签和一个结束标签。结束标签只是在开头标签的前面加一个**/.当浏览器收到HTML文件后，就会解释里面的标签，然后把标签相对应的功能表达出来。
（2）HTML是超文本标记语言，主要通过各种标签来标示和排列各对象，通常由尖括号<>以及其中所包含的内容组成**。
（3）HTML文件的编写方法有两种:一种是利用记事本编写，另一种是在编辑器中编写HTML代码。