整合营销服务商

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

免费咨询热线:

第二期html基础 惊!学习了这些知识居然可以做网页啦

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

<!--内容打这里-->这个才是备注标签不是//

首先我们先来学习上节课留下的剧透,分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿,其实他还有兄弟姐妹啦~

看图,代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~


源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>页面标题</title>

</head>

<body>

<!--标题标签是h1~h6-->

<h1>1</h1><!--最大-->

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6><!--最小-->

</body>

</html>

如图所示,h1标签是最大的,h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~


2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!--千万要记住内容是写在标签里面的哦~-->

<!--段落标签是独占一条的哦-->

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码:

<a href="https://www.baidu.com">百度</a>

href是什么东西啊?是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片,是不是有点小意思~


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a><!--只有同一个项目下面的网页才能相互跳转-->

</body>

</html>


4.图像标签 img标签

图像标签标签如其意,就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

<img src="img/OIP-C.jpg" alt="山"/>

src就是用来放图片的地址的,他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

我们把图片的地址破坏后,就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下,老师~~~我不知道

看视频

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk,好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦,有什么不懂的可以留言包回答的。

加油呀,每天学一点争取做出属于自己的一个网页~

上一期

TML是制作网页的基础,我们在网站建设中谈论的静态网页就是基于HTML的网页。

早期的网页直接用HTML代码编写,但现在有许多智能网页制作软件(常用的如frontpage,dream weaver等)通常不需要手动编写代码,而是由这些软件自动生成。虽然不需要自己写,但是理解HTML代码仍然是非常重要的。

了解HTML是什么?它是学习网站建设的重要技术基础知识

下面我们自己可以动手创建一个非常简单的网页,首先我们让计算机显示扩展,方法是打开我的电脑,然后现在栏目工具》文件夹选项》查看》高级设置中找到《隐藏已知文件类型的扩展名》将其不勾选,并单击“应用”以确认设置。然后在桌面上创建一个新的TXT文件,将此文件命名为“xxx.html”(扩展名也可以是htm),这样你就可以用浏览器打开它,你就会看到自己制作的最简单的页面。

进一步的简单理解什么是html?

html是一种超文本标记语言,即html(hypertext markup language),是一种用来描述网络文档的标记语言。在页面的开头和结尾使用<html></html>标签。

总结:

1)HTML是我们常说的静态网页;

2)HTML是以Html或htm为扩展名的文件;

3)HTML某些标签代码规则,让内容在浏览器中呈现出我们所需要的样式;

4)HTML可以使用记事本创建,并以.html或.htm为扩展名保存。

html文件中的代码由具有一定的规则规律标签与内容组成。以指定的HTML结构和内容形成完整的html文件。我们可以直接使用浏览器来打开,查看网页效果。

如果您想在浏览器中显示各式各样的网页,我们就需要html文件(HTML基本结构+内容+标签)和css文件(css样式)来实现我们需要的漂亮网页。

HTML基础学习教程

动力节点老杜讲解的html学习教程,非常详细全面,完全适合小白入门

内容:讲解了HTML基础语法、HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点。

通过html教程的学习之后,不但可以开发基本的网页,还可以看懂别人编写的HTML页面。

HTML完整资料下载:
http://www.bjpowernode.com/?toutiaoweb.chai

HTML课程目录

1.HTML教程:课程内容概述

2.HTML教程:BS结构介绍

3.HTML教程:软件环境准备

4.HTML教程:HTML概述

5.HTML教程:我的第一个HTML

6.HTML教程:HTML的基本标签

7.HTML教程:HTML的实体符号

8.HTML教程:HTML的表格

9.HTML教程:HTML的单元格合并1

10.HTML教程:HTML的单元格合并2

11.HTML教程:thead tbody tfoot

12.HTML教程:背景色和背景图片

13.HTML教程:HTML图片img标签

14.HTML教程:HTML超链接

15.HTML教程:超链接的作用-request和response的概念

16.HTML教程:HTML列表

17.HTML教程:form表单初步

18.HTML教程:用户注册表单的实现

19.HTML教程:下拉列表支持多选

20.HTML教程:form的file控件

21.HTML教程:隐藏域hidden控件

22.HTML教程:隐藏域hidden控件2

23.HTML教程:readonly和disabled

24.HTML教程:控件的maxlength属性

25.HTML教程:HTML文档中节点的id属性

26.HTML教程:div和span在网页中的应用

海绵宝宝】html网页设计与制作期末大作业

本文为动漫海绵宝宝网页设计实例,应用html+css,div+css布局,页面简单,代码精简,设置菜单、链接、视频等,适用于初学者、大学生网页课程作业设计等,供大家参考。

网页文件



网页效果

以下为网页正文(节选示例):