整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

教你5分钟写一个属于自己的网页

教你5分钟写一个属于自己的网页

今我们在互联网上每天都在浏览各式各样的网页,网页已经成为了我们获取信息的主要载体。想要知道一个简单的网页是怎么写出来的吗,下面跟着我动手实际操作一下吧。

1.在电脑桌面右键新建一个文本文件,在里面输入网页的基本结构如下。


网页最主要的框架就是这样,有head标签,body标签,然后最外层是html标签。

head标签里面的title标签相当于你的网页的题目,在浏览器中显示如下:


body标签主要就是存放网页中的内容,你所看到的文字和图片就是写在这个标签里面的。

2.下面就可以开始搭建一个属于你自己的简单的网页了。


body里面的h标签里面的文字相当于你文章的题目,h1相当于主标题,h4相当于副标题。h标签有h1~h6,数字越小标题的字号也就越小。p标签里面存放的文字就像是你文章的一个个段落,他会进行换行。

3.最后点击文件保存,将文件的后缀由.txt改为.html,双击就可以在浏览器上看到最后的效果了。


小伙伴们学会了吗,赶快去创建一个属于你自己的网页吧。

 用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ? ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的。

  一、网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

  二、网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

  三、网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

  四、网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

  五、网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。 其中: (1) html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

本的网页结构

网页基本结构:

<html>
	<head>
        <title>这是网页标题</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta name="keywords" content="这是关键字"/>
        <link href="css文件路径" rel="stylesheet"/>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <body>
        
    </body>
</html>

常见网页标签:

标签

含义

常用属性

a

超链接

href / target / title

img

图片

src / alt / title / width / heiht

h1-h6



p



br



hr



em



strong



i



span



div



CSS美化网页

css样式使用方式

  1. 行内(内敛)样式
  2. 内部样式
  3. 外部样式

css基本选择器

  1. ID - > #
  2. CLASS -> .
  3. 标签 -> 标签名

优先级

  1. ID > CLASS > 标签 (在同一个元素上的ID , CLASS比较)
  2. 行内 > 内部> 外部
  • *important 最高级别
  • 高级选择器:

    1. 并集选择器
    2. 交集选择器
    3. 后代选择器
    4. 子元素选择器
    5. 兄弟选择器
    6. 属性选择器

    前提: 非继承属性 > 继承属性(除此条件外,基本可以适应以下计算规则)

    ID

    CLASS

    标签

    100

    10

    1

    文本样式

    样式

    含义

    属性值

    字体样式

    列表与表格

    表单

    盒子模型

    浮动

    定位