zoukankan      html  css  js  c++  java
  • 初学者如何正确的构建一个网页模板在路上(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的各种样式属性。

    ---------------------------------------------------共勉---------------------------------------------------------

           

    总得做点儿什么
  • 相关阅读:
    PS常用美化处理方法大全
    FastReport.Net使用:[32]对话框使用2
    FastReport.Net使用:[31]使用带参查询及存储
    FastReport.Net使用:[30]对话框使用
    FastReport.Net使用:[29]调用存储过程1
    FastReport.Net使用:[28]数据合并
    FastReport.Net使用:[27]样式使用
    FastReport.Net使用:[26]数字格式
    FastReport.Net使用:[25]除数0处理方法
    FastReport.Net使用:[24]其他控件(邮政编码(Zip Code),网格文本(Cellular Text)以及线性刻度尺(Linear Gauge))
  • 原文地址:https://www.cnblogs.com/gengaiwei/p/6182781.html
Copyright © 2011-2022 走看看