当前位置: 首页 > news >正文

入门级 如何编写第一个网页

一、使用记事本,编写代码

首先,如图所示,在任意一个盘中新建一个文本文档,命名为"hello"(任意命名即可)。

然后将这段代码复制进去。

<!doctype html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title></head><body><p>hello,这是我的第一个网页哦</p></body>
</html>

呈现出如下图所示:

 保存后退出。

二、更改文件格式

打开文件拓展名。

显示拓展名后,将原本的".txt"等后缀改为".html",如下所示。

右击打开方式,使用浏览器打开即可。

感觉有点单调,可以稍微增加一点css样式。 

<style type="text/css">p{font-size: 36px;color: blue;text-align: center;}</style>

编辑进文档中,在用浏览器打开

 

大功告成,冒号后的可根据自己喜好调整。

三、 总结及注意

1 文件名后缀以  .html 结尾。

2 在编写代码的过程中,<>中的任何字符必须是英文状态下编写。

3 不区分大小写

四、介绍

1 标签有两种表现形式:

   

双标签,例如:<html></html>

单标签,例如:<br/>

2 DOCTYPE声明 

DOCTYPE是document type(文档类型)的缩写。<!DOCTYPE html>是H5的声明,位于文档的最前面,处于标签之前。他是网页必备的组成部分,避免浏览器怪异模式。

html标签

定义HTML文档,其他元素都包含在他之中,此标签限定了文档的开始点和结束点。

<!DOCTYPE html>

<html>

</html>

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在web中的位置以及和其它文档的关系等等。绝大多数的文档头部都不会显示出来让读者看到。

<!DOCTYPE html>

<html>

       <head>

       </head>

</html>

body标签 

body标签定义文档主体。包含文档的所有内容(比如,超链接,文本,图像,表格等等。)

他会直接在页面中显示出来让读者看到。

<!DOCTYPE html>

<html>

       <head>

       </head>

        <body>

              这些文字将会显示在浏览器中。

        </body>

</html>

title标签 

可定义文档的标题。

他显示在浏览器窗口的标题或状态栏上。

<title>标签是<head>标签中唯一必须包含的东西。

<title>的增长有利于SEO的优化。

<!DOCTYPE html>

<html>

       <head>

             <title>我的第一个网页</title>

       </head>

        <body>

              这些文字将会显示在浏览器中。

        </body>

</html>

meta标签

meta标签通常用来描述一个文档的属性。例如,charset="utf-8"是说当前使用的是utf-8编码格式。

中文编码:

gb2312:简体中文

gbk:简繁体中文

utf-8:所有文字

 <!DOCTYPE html>

<html>

       <head>

             <title>我的第一个网页</title>

             <meta charset="utf-8">

       </head>

        <body>

              这些文字将会显示在浏览器中。

        </body>

</html>

简单的第一个页面制作就完成了。

可留言讨论,有问题欢迎指出。 

http://www.xdnf.cn/news/810289.html

相关文章:

  • 理解一般指针和指向指针的指针
  • 黑客的入侵方式你知道几种?
  • cookie是什么?有什么用?cookie详解,一篇文章彻底搞懂cookie
  • Smtp/POP3邮箱服务器地址和端口总结(163/126/QQ)
  • ioctl用法详解
  • html alt 作用,什么是alt标签的作用,alt标签对SEO有哪些影响呢?
  • Jeninkins离线部署
  • 2024年运维最全我把废旧 Android 手机改造成了 Linux 服务器(1),2024年最新Linux运维面试宝典2024
  • 【软考高级-系统分析师】考试大纲
  • 微软一个罕为人知的无敌命令ntsd
  • 快速引用参考文献——EndNote入门指南
  • win10连接共享打印机错误709怎么解决
  • 启动mysql报错10038_解决navicat远程连接mysql报错10038的问题
  • Flowplayer-一款免费的WEB视频播放器
  • 巧用text-shadow为文字添加阴影效果
  • 图像术语知识
  • window.prompt()方法详解
  • SCN 详解
  • 下载网页图片方法大全
  • H3C S5500交换机现在需要分三网段
  • 无线传感器网络及应用
  • 算法导论第三版 第4章习题答案
  • 【数据结构与算法】Knuth-Morris-Pratt 算法(KMP算法):一种在字符串中查找子串的算法
  • 位图格式详解
  • sockaddr和sockaddr_in详解
  • 全国最搞笑的名字都在这了,看了不准笑!
  • matlab中imfilter函数的使用
  • 什么是第三方支付通道接口?
  • 《Linux驱动:USB设备驱动看这一篇就够了》
  • 网络爬虫爬取常见网站数据