8. html项目结构和图片标签

HTML教程入门

html项目结构:Web项目除了可以包含静态资源(例如,图像和HTML 文件)外,还包括定义Web应用程序目录结构,该目录结构指定Web 内容文件、类文件、类路径。index.html文件将包含网页的HTML代码,而resources文件夹将包含HTML文件(CSS文件,图像等)所需的所有必要资源。 接下来,打开新创建的资源文件夹。

html项目结构

1、清晰易懂的项目结构

最好实践方法:
1、图像,CSS文件和JavaScript文件发别放到自己的文件夹中;
2、这节课教你们如何组织项目结构,确保所有的html和css文件结构整齐清晰,在实际项目中,我们通常把样式表,图片,js独立分开;

我们上一节课做的webroot项目,文件和文件夹没有认真的组织过,所以看起来有些乱,跟自己平时做时间项目有点不太习惯:

1、让我们开始整理webroot项目:
1、创建css文件夹,img文件夹,js文件,接着把样式表放到css文件夹;
2、回到index.html的更新css文件路劲;
3、每个项目开始的手动创建css文件夹,img文件夹,js文件;

图片标签

这个知识点是我们要实现在HTML页面上显示图片:

1、找我们项目的图片文件夹,拖拽个图片到img文件夹;

2、html图片元素是:img

1、safdafdafadsfa,之前课程学习过的p、h、a等元素对比;没有展示。

2、元素是自关闭的;

3、
1、引用文件夹图片:

1、引用图片的方法src属性=”图片路径” ;
2、让alt( alternate text )属性=”描述图片”,带有指定替代文本的图像。
假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:
网速太慢
src 属性中的错误
浏览器禁用图像
用户使用的是屏幕阅读器

2、引用网络图片:

1、找到网络图片的路径:
复制图片路径到src;

3、在实际项目中通常不见这种操作,网络图片别人网站故障了就看不到了,通常我们把图片下载保存到自己本地项目:

1、保存图片的方法,通常要得别人同意,否则别人会追究你的责任;

4、 图片元素,声明src(source)图片路径,引用图片保存的路径,然后用alt元素替代文本,自关闭。

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年8月1日

Previous Story

HTML教程入门

7. html第一个css层叠样式表

css层叠样式表:一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.

...

Next Story

HTML教程入门

9. html用div的作用

div的作用:div可定义文档中的分区或节(division/section)。 div标签可以把文档分割为独立的、不同的部分。 它可以用作严格的组织工具,并且不使用任何格式与其关联。

...