html网页制作教程

html网页制作教程,第1张

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

01

新建记事本

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

02

编写代码

打开记事本,编写代码,如下图所示:

03

修改后缀名

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

04

网页

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

05

运行网页

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

HTML文件制作方法如下:

一、打开简单的文本编辑器。大部分文本编辑软件都能编写HTML,不过,复杂的软件有自动格式功能,比较难组织HTML页面。

                                 

二、将文件格式改成“网页”(Web Page)、“.html”或“.htm”,存在容易找到的位置。上面三个选择是一样的,没有差别。

                                 

三、用网页浏览器打开文件,双击文件,它应该会自动在浏览器打开,但现在还只是个空白网页。

                                 

四、更新网页,查看已保存的更改。将<strong>Hello</strong>输入空白的文件。

更新浏览器上的空白网页,你应该可以看到网页上方有个加粗的“Hello”字眼。在本教程中,你随时可以测试新的HTML。只要保存.html文件,然后更新浏览器窗口,就能看到浏览器如何诠释HTML。

                                 

六、构建文档。删除HTML文档里的所有东西。这个HTML代码告诉浏览器你使用哪一版HTML,网页所有内容都在<html>和</html>标签之间。

                                 

七,添加head和body标签。HTML文档分为2个部分。“Head”部分是特别信息,例如网页标题。“Body”部分则包括网页内容。

                                   

扩展资料

一个网页对应多个HTML文件,超文本标记语言文件以.htm(磁盘 *** 作系统DOS限制的外语缩写)为扩展名或.html(外语缩写)为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件,只用修改文件后缀即可。

标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:<br/>),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

标记符<html>,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头而</html>,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

文本标记语言源程序的文件扩展名默认使用htm(磁盘 *** 作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于 *** 作系统或程序辨认,除自定义的汉字扩展名。在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。

超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。

完整的空格可使用特殊符号(实体符)“&nbsp(注意此字母必须小写,方可空格)”表示非换行空格;表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。

标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“&nbsp(注意此字母必须小写,方可空格)”。

许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行,标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。

HTML注释由"<!--"号开始,由符号”-->“结束结束,例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。

参考资料:百度百科--HTML

html css基础教程归纳如下:

第1、Html介绍

本章节主要讲解html和css样式的关系,以及html标签、html文件结构、head标签,最后讲解了在html中的注释代码的作用。

第2、认识标签(第一部分)

学完这一章节将对标签的使用有了一些初步的认识,可以使用标签制作出一篇简单的文章网页。下一章节将进一步学习另外一部分html标签。

第3、认识标签(第二部分)

本章节主要讲解列表、div及table标签使用,学完本章,可以在网页上展示一些信息列表及表格数据,使网页上的信息更加丰富

第4、认识标签(第三部分)

本章节主要讲解超链接标签、链接地址及图片标签,学习完这一章节可以把分散的单独的网页用链接标签有效的组织起来,达到网页之间可以相互跳转的作用。

第5、与浏览者交互,表单标签

每天都在网上冲浪,如果没有表单,人们就无法输入自己的个人信息来买东西,本章节主要从表单的作用、表单元素讲起,学习完本章,可以制出简单的用户登陆、注册页面。

第6、开始学习CSS,为网页添加样式

CSS是一个很神奇的东西,设计者可以通过修改样式表的定义而使网页呈现出完全不同的外观。本章就开始带领大家来学习CSS样式:先来认识CSS样式、了解CSS样式的优势、最后讲解CSS代码语法和CSS注释代码。

第7、CSS样式基本知识

这一章节主要讲解与CSS样式相关的基础知识:CSS样式的位置及相关的优先级,为后面的CSS样式具体学习打下基础。

第8、CSS选择器

本章主要介绍CSS的选择器,通过学习本章,能对元素进行样式的设置

第9、CSS的继承、层叠和特殊性

CSS中有一些概念是需要深刻理解的,此节开始将介绍CSS中的一些非常重要的概念包括CSS的继承、层叠和特殊性。

第10、CSS格式化排版

本章将详细介绍网页排版中主要格式化要素,帮助读者把CSS技术与网页编排紧密结合在一起,实现网页实用性与欣赏性相结合,实现出设计效果。

第11、CSS盒模型

盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系。本章将围绕盒模型的概念、结构、尺寸等基础知识展开研究,以便为后面的学习和日后网页设计奠定扎实的基础。

第12、CSS布局模型

现在可以用所需的知识进行真正设计了,学习完本章节可以运用所学习的知识实现网页的多列布局,本章将围绕流动模型、浮动模型、层布局模型等布局技术展开研究,以便为后面制作复杂的网页打下基础。

第13、CSS代码缩写,占用更少的带宽

虽然CSS文件或者嵌入的CSS都纯文本文件,为了减少css样式代码的编写量,代码缩写是很有必要的。这样可以使用户访问网页的时候占用更少的带宽。

第14、单位和值

本章节对单位如颜色的单位和值等时行详细讲解。

第15、css样式设置小技巧

本章节对在日常前端开发中常用到css样式设置小技巧进行了讲解。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8047044.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-13

发表评论

登录后才能评论

评论列表(0条)

保存