html网页制作教程

html是编程语言之一。下面，我们来看看html网页制作教程吧。

01

新建记事本

在桌面上，新建一张记事本，如下图所示：

02

编写代码

打开记事本，编写代码，如下图所示：

03

修改后缀名

把记事本修改后缀名为.html，如下图所示：

04

网页

在桌面上就会有一张网页，如下图所示：

05

运行网页

最后在浏览器上运行该网页，如下图所示：

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

具体代码：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'

}

网页制作教程如下

(1) HTML：超文本编辑语言hyper text markup language(编写网页)

文本：用来描述数据，特别单调，只能输文字，不能变彩色，不能插入图片。超文本：丰富多彩的的展示文件

(2)www 【w(world)w(wide)w(web)万维网，因特网】

含义：建立在Internet上面的，全球的，交互的，多平台的，分布式的信息资源网络多平台的： *** 作系统 【window linux(Android) unix(iOS)】交互的：阅读、发表【CSDN】分布式的：有多台服务器为网络进行服务。

(3)万维网的组成：URL 【Uniform Resource Locator(统一资源定位符)网站】

HTTP【hypertext transfer protocal超文本传输语言】

(4)W3C 【HTML的标准制定者和维护者】

二、标签：【以尖括号开始，尖括号之间描述信息，就叫标签】列子： 对 错 对，分类：开始标签 结束标签

三、HTML文档结构

人=头(head)+身体(body）头>身体>人

四、记事本开发网页步骤

(1)新建文件.txt

(2)更改后缀【.hmtl】或【.htm】------[选中文件，点击f2--快捷方式]

(3)后缀名作用：告诉Windows系统，用什么样的程序打开文件。

(4)源代码：记事本打开 执行结果：网页打开

五、HTML注意事项

(1)标签成对出现。

(2)标签具有嵌套型

(3)排版问题：子标签的父标签之间应该有8个空格：一个tab键

(4)html不区分大小写，最好全部用小写

(5)标签有属性

tips:注意事项a：h1 align 中间要有空格；b：属性名：align 属性列：center 属性列要加"",之间要加 =

(6)注释

(7)换行和空格不管用【如何换行】

六、网页的基本标签

(1)头部标签：

(2)text 设定文字颜色

[或者使用颜色代码]：使用#和十六进制数据组成

(3)【背景颜色】：bgcolor 【背景图片】：

(4)文字标记：hello world

(5)hfbasbhgdshbfshp标签前后自动换行 且有align 三个属性【left center right】

(6)标题-------可以一直到6，并且自动换行也有align属性【left center right】

(7)空格： 版权符号

(8)文字修饰标记：加粗 加斜体 加下划线 删除线

(9)支持的图片：常用.jpg .gif .png

(10)如何引入图片 单个标签

(11)超级链接【从一个网络跳到另外一个网页】： 【非常重要的属性 href 要链接到的地址】

---