编写⽹页项⽬的基本步骤——Html
编写⽹页项⽬的基本步骤——Html
开⼯前准备⼯作
创建⼀个⽂件夹，命名为项⽬名字，然后在⽂件夹⾥再创建⼀个⾸页⽂件：index.html，⼀个装css的⽂件夹：css：⽂件夹内再创建两个⽂件⼀个装⾸页样式的css⽂件、⼀个装公共样式的css⽂件，⼀个装图⽚的⽂件夹：images，如果还需要js，再创建⼀个js⽂件夹。
编写⽹页
从头部开始
⼀个⽹页的头部，⾸先需要标题：title，标题是描述了⼀个⽹页的主题。如下图，以⼩⽶官⽹为例，⽹站标题还有个logo，这个logo是需要引进来，⽤⼀个标签。
<link rel="icon" href="favicon.ico" type="image/x-icon"
rel：声明是标题logo ，href：图⽚地址，type：说明是什么类型
<link ref="shortcut icon" href="favicon.ico" type=""image/x-icon"
这个是说明图标可以在收藏夹⾥展⽰
[外链图⽚转存失败，源站可能有防盗链机制，建议将图⽚保存下来直接上传(img-2Ya8DtMc-1586167026377)
(C:\Users\FL\AppData\Roaming\Typora\typora-user-images\image-20200406160431357.png)]
还需要meta包裹的内容
<meta name="keywords" content="⼩⽶..."
这个是关键字，说明⼀个⽹页内容包含的核⼼搜索关键词
<meta name="description" content="⼩⽶官⽹"
这个是⽹站信息描述，作为搜索结果中的页⾯内容摘要显⽰。
⽹站头部内容是给浏览器看的，便于搜索引擎可以搜索到⽹页。
<link rel="stylesheet" href="css/index.css"
链接外部css样式
<script src="js/index.js"></script>
链接外部js代码
⽹页主体
分析页⾯的结构，划分页⾯区域。如：确定版⼼宽度，后⾯布局以版⼼宽度为基础。
编写公共样式css⽂件
清除外边距：
body,p,ul,h1,h2,h3,h4,h5,h6,dl,dd {
margin: 0;
}
清除内边距：
网页float是什么意思
ul,ol{
padding: 0;
}
清除a标签下划线
a{
text-decoration: none;
}
清除列表样式
li{
list-style: none;
}
左右浮动
.fl{
float: left;
}
.fr{
float: right;
}
公共样式不管拿到哪⾥都可以使⽤，所以专门放在⼀个⽂件⾥。
如有别的需要，继续添加。
阿⾥图标的使⽤
阿⾥图标是⽮量图，放在⽹页⾥⾯不管是放⼤还是缩⼩，图⽚都不会失真。⽤于⼩图标的显⽰下载之后，解压到项⽬⽂件⾥
点开⽂件夹
demo_index.html是使⽤说明⽂件，点开之后会有详细使⽤的办法。
我选⽤字体样式的引⼊⽅法。
复制，这是css样式。
这⾥有个问题要注意，复制完之后的代码url是⽂件所在地址，如果放⼊了font⽂件下，需要将url⾥⾯的添加上"…font/"。复制，这是css样式。
复制，在相应的页⾯html⽂件的内容⾥添加代码
如果还没发现出现可能是颜⾊和背景颜⾊⼀致了。
⼩图标的代码：
代码后⾯的分号不能去掉。
最后讲⼀个vh和vw
1vw=1%的视⼝宽度
1vh=1%的视⼝⾼度
所以100vw就是会横穿整个视⼝宽度，⽆论是你放⼤还是缩⼩整个页⾯的时候，它都会横占整个视⼝宽度。width=100%只是占满当前页⾯的宽度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。