首页 > 代码库 > 初学者--如何正确的构建一个网页模板----在路上（5）
初学者--如何正确的构建一个网页模板----在路上（5）
一.基本网页模板，一般包括六大部分文档：
在你的文件夹中一般包含六个文档：index.html、css、js、img、lib（前提是你已经学过了bootstrap）、fonts
（在这只简单介绍一下，后续会把每个部分所涉及到的有关内容写出与你分享）
（一） . index.html（结构框架--结构层 从语义出发，描述网页结构的）
超文本标记语言、英文全拼：HyperText Markup Language。负责网页的语义描述。
HTML基本骨架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Doctype：文本类型 如果仅写：html那么这代表是html5的网页类型，它符合w3c的标准。
Html：根目录标签，包含了网页的所有内容
Head：负责页面的属性配置，不做任何显示性内容操作。
Meta：翻译为“元”，代表基本属性。
<meta name="keywords" content=""/>
Keywords：网页搜索关键字，搜索这些关键字可以找到我们的网页
<meta name="Description" content="" />
Description：网页描述，提供给用户看到页面的介绍，利于搜索引擎优化（SEO）
Charset：字符集，它是告诉浏览器当前网页使用的是哪一种编码标准。
补充一下：能够支持中的编码有两种：
第一种utf8国际编码
第二种gb2312中文编码，中文的文本库加上外语的一些通用字符语言
Utf8编码>gb2312编码（文本库内容），utf8每个汉字占用3个字符，在gb2312种只占2个字符。
使用gb2312优点： 小，速度快！
注意：文本保存的编码格式一定要和页面内部声明的编码格式完全相同，不然会出现乱码！！！！
Title：网页标题、搜索引擎优化。
Body：网页内容标签，其实就是一个大的容器。我们所有语义化标签都在body中。
（二）.css（样式设置--样式层 从审美出发，美化页面）
CSS英文全拼：cascading style sheet层叠样式表。
在html中使用：要在head中写style标签，所有样式放在style标签中。
css三原则：叠加原则、优先级原则、就近原则（代码的进）
先看多个选择器间有无冲突，如果属性没冲突，则实现属性叠加。
如果有属性发生冲突，按照选择器的优先级（权重）来判断属性的优先选择。
如果仍然有选择器优先级相同并且属性冲突，实现就近原则（CSS里面代码最晚的为主）
<style>
h1{
color: red; 设置文本颜色
font-size: 30px; 设置文本大小
设置背景颜色
}
span{
color: blue;
font-weight: bold; 设置文本粗体
font-style: italic; 设置文本斜体
注意：凡是font开头的想要设置默认的样式则使用normal
text-decoration: underline; 设置文本下滑线，如果去除下滑线则用none这个属性
}
li{
color: orange;
}
#fly{
color: blue;
font-size: 40px;
}
</style>
（三）.js（逻辑行为--行为层从交互出发，提升用户的体验）
JavaScript又称JS，是一种脚本语言。用来制作web页面的交互效果，提升用户的体验的。
例如一些小广告、轮播图、tab按钮组、瀑布流...都是js来做的
有人会想js和java一样吗？其实
没有关系，完全没有关系。当时就是为了吸引程序员的注意。刚开始的时候属于页面“牛皮癣”,制作小广告啊、弹窗啊、漂浮广告等。
（四）.img（图片存储）
Img：英文全拼image-图像。
Src：英文全拼 source-来源路径，这个属性我们写图像的路径。
绝对路径：当前文件所在你计算机的完整路径。
相对路径：首先要有参照路径，参照路径就是当前html页面所在的文件路径。然后根据参照路径查找图片路径
Img标签在写路径时一定要加上扩展名，而且能够支持的图片类型有：jpg、jpeg、png、bmp、gif。 最好加 上width和height属性，这是为了性能考虑。
（五）.lib（bootstrap存储库）
lib就是从bootstrap中引用的库，一般包括从bootstrap中下载的dist（css、fonts、js）、 jQuery两部分， 而且要注意的是，如果下载的是源码，那所下载的css、js中引用的是.css，而非min.css
（六）.fonts（字体相关设置）
涉及到字体大小啊，字体颜色啊...简言之就是各种有关font的各种样式属性。
---------------------------------------------------共勉---------------------------------------------------------
初学者--如何正确的构建一个网页模板----在路上（5）