前端的初步学习笔记(十一)

最新推荐文章于 2024-05-14 11:19:40 发布

Cx-dsy

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量40

点赞数

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/qq_65597708/article/details/132359641

版权

注：本次笔记不具备太多参考意义，建议跳过，原因是本次笔记仅作为参考网页制作某些注意事项

前端文件夹命名规范

名称	说明
项目文件夹	shoping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹	js

需要创建的文件

名称	说明
首页	index.html
CSS初始化样式文件	base.css
CSS公共样式文件	common.css

模块化开发

所谓的模块化:将一个项目按照功能划分，一个功能一个模块，互不影响
模块化开发具有重复使用、更换方便等优点

代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块。然后重复使用
这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
模块化开发具有重复使用、修改方便等优点

common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。

网站 favicon 图标

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上
目前主要的浏览器都支持favicon.ico图标

1)、制作favicon图标

把品优购图标切成png图片
把 png图片转换为ico图标，这需要借助于第三方转换网站，
例如比特虫：在线制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net

2)、favicon图标放到网站根目录下
3)、HTML页面引入 favicon图标

在html页面里面的<head> </head>元素之间引入代码

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

网站TDK三大标签SEO优化

SEO ( SearchEngine Optimization )汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度
页面必须有三个标签用来符合SEO优化
title、description、keyword

1.title 网站标题

title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
建议：网站名（产品名）–网站的介绍（尽量不要超过30个汉字）
例如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站

2.description 网站说明

简要说明我们网站主要是做什么的
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是..”、“我们提供.
”、“×××网作为..”、“电话:010.”之类语句
例如：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

3. keywords关键字

keywords是页面关键词，是搜索引擎的关注点之一
keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式
例如：

<meta name=“keywords" content="网上购物,网上商城手机,笔记本,电脑,MP3,CD,VCD,DV,相机数码配件,手表,存储卡,京东"/>

LOGO SEO 优化

logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字(网站名称），但是文字不要显示出来
方法1：text-indent 移到盒子外面(text-indent: -9999px)，然后 overflow: hidden，淘宝的做法
方法2：直接给 font-size: 0; 就看不到文字了，京东的做法
最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了

首页制作

网站的首页一般都是使用index命名，比如index.html或者index.php
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面

1.常用模块类名命名

以下是我们约定的命名模块，可以直接使用以下类名即可

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含 .dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright