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

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

时间: 2024-08-09 11:36:49

初学者--如何正确的构建一个网页模板----在路上(5)的相关文章

Html+css 一个简单的网页模板

一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title>网页</title> 6 <meta charset="UTF-8&qu

Django入门第一步:构建一个简单的Django项目

Django入门第一步:构建一个简单的Django项目 1.简介 Django是一个功能完备的Python Web框架,可用于构建复杂的Web应用程序.在本文中,将通过示例跳入并学习Django.您将按照以下步骤创建功能完备的Web应用程序,并一路学习框架的一些最重要的功能以及它们如何协同工作. 学习目标: 了解Django是什么以及为什么他是一个伟大的web框架 了解Django的体系结构以及与其他框架的对比 独立搭建一个简单的Django项目和应用程序(app) 2.为什么要学习Django

从零构建一个简单的 Python Web框架

为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何工作的很感兴趣,因为你想要成为一位更好的 web 开发者. 接下来的笔墨将着重于最后一点.这篇文章旨在通过对设计和实现过程一步一步的阐述告诉读者,我在完成一个小型的服务器和框架之后学到了什么.你可以在这个代码仓库中找到这个项目的完整代码. 我希望这篇文章可以鼓励更多的人来尝试,因为这确实很有趣.它让

spring-cloud 构建一个restful的web服务

构建一个restful的web服务 这篇文章告诉你如何通过spring创建一个"hello world"的restful的web服务 你会建立什么 你会建立一个接受HTTP GET请求的服务: http://localhost:8080/greeting 问候语以JSON的形式响应: {"id":1,"content":"Hello, World!"} 你可以自定义问候语与一个可选 name 参数的查询字符串: http://

如何用 Swift 语言构建一个自定控件

(via:破船之家,原文:How To Make a Custom Control in Swift) 用户界面控件是所有应用程序重要的组成部分之一.它们以图形组件的方式呈现给用户,用户可以通过它们与应用程序进行交互.苹果提供了一套控件, 例如 UITextField,UIButton,UISwitch.通过工具箱中的这些已有控件,我们可以创建各式各样的用户界面. 然而,有时候你希望界面做得稍微的与众不同,那么此时苹果提供的这些控件就无法满足你的需求. 自定义控件,除了是自己构建二外,与苹果提供

为 Drupal 7 构建一个新主题

主题解释了 Drupal 网站的用户界面 (UI).虽然主题结构并没有明显的变化,但 Drupal 版本 7 配备了一个新的主题实现方法.本文演示了如何创建一个新的 Drupal 7 主题. Drupal 主题的目标是将框架的处理逻辑和设计元素分开.为了做到这一点,Drupal 采用了一个复杂的主题系统,其中包括主题.主题引擎和挂钩.主题组件与 Drupal 核心系统和模块设计元素配合,创建具有独特外观的用户界面(单独 Drupal 页面和表单).由于将 Drupal 的业务逻辑从它的表示逻辑中

使用Maven构建一个简单的java工程

原文是我在学习Spring的过程中,在Spring的官网上看到的一个指南:BuildingJava Projects with Maven--http://spring.io/guides/gs/maven/#scratch.我也是刚接触Maven.看到这篇文章觉得非常简单,但又非常实用,尤其是对于像我这样的Maven初学者.基本上看了这篇后能大概知道Maven是个什么东西,干点什么事,并能够上手使用Maven做点小例子.所以忍不住就把它整理成中文,发出来分享一下,帮助初学者.并没有对原文完整翻

用Spring构建一个RESTful Web Service

本教程将手把手教你用Spring构建一个"hello world" RESTful Web Service. 你将构建什么 你将构建一个Web Service,用于接收HTTP GET请求,请求地址: http://localhost:8080/greeting 请求响应返回一段JSON格式的问候语: {"id":1,"content":"Hello, World!"} 你可以在请求中添加一个可选参数:name,定制问候语:

用 Go 构建一个区块链 -- Part 7: 网络

引言 到目前为止,我们所构建的原型已经具备了区块链所有的关键特性:匿名,安全,随机生成的地址:区块链数据存储:工作量证明系统:可靠地存储交易.尽管这些特性都不可或缺,但是仍有不足.能够使得这些特性真正发光发热,使得加密货币成为可能的,是网络(network).如果实现的这样一个区块链仅仅运行在单一节点上,有什么用呢?如果只有一个用户,那么这些基于密码学的特性,又有什么用呢?正是由于网络,才使得整个机制能够运转和发光发热. 你可以将这些区块链特性认为是规则(rule),类似于人类在一起生活,繁衍生