首页 > 代码库 > 初学者--如何正确的构建一个网页模板----在路上(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)