一、标准网页设计

1、标准网页概述：

　　标准网页设计要遵循，内容与表现相分离。

　   内容 + 表现 = 页面  ---  即 ：XHTML + CSS = PAGE

　　内容与变现相分离，也就是内容使用HTML、XHTML，而怎么对内容排版、显示使用CSS。

2、标准网页设计的优点：

　　（1）代码更少，更容易维护。

　　（2）页面下载更快，宽带要求更低，硬盘容量要求更少。

　　（3）排版更加方便。

　　（4）可以提高易用性和可扩展性(可以适应很多其它的设备:搜索蜘蛛/屏幕阅读器/打印机/手持设备/移动设备等)。

　　（5）内容与表现分离，使扩展更加简单，分工协作更加简单。

附注：

1、DOCTYPE 标签 -- 定义了标准文档的类型

  • DOCTYPE标签是单独出现的
  • 说明：
    • 文档类型，会使浏览器使用相应标准加载网页并显示
    • 文档类型定义在HTML文档的第一行，在html标签之前
    • 文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式，详见：浏览器模式
  • DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”

2、span和div -- CSS与HTML沟通的桥梁

　　HTML,XHTML只是负责显示内容.文字标签与字块标签一般都有意义,而span与div并没有什么意义,它们被广泛的与CSS联合使用.

　　span是内联的,代表一行.

　　div代表一块.(有点向标签p,块的前后总是和其它块隔开一个距离.)

示例：

 <div id="dreamdu">

     <p>学

         <span id="strong">

             之

         </span>路

     </p>

 </div>

二、HTML中使用CSS --- 定义CSS样式

在HTML中嵌入CSS共有三种方式：

1、外部引用CSS -- 在head标签中加载一个CSS文件 -- link标签

示例：

 <head>

     <link rel="stylesheet" type="text/css" href="style.css" />

 </head>
此例使用了link标签.style.css的内容如下
 abbr

 {

     font-size:12px;

 }

 .text10pxwhite

 {

     font-size:10px;

     color: #FFFFFF;

 }

附注：

link 标签 -- 当在文档中声明使用外接资源(比如CSS)时使用此标签

  • link标签是单独出现的
  • 属性
    • href -- 指定需要加载的资源(CSS文件)的地址URI
    • media -- 媒体类型
    • rel -- 指定链接类型
    • rev -- 指定链接类型
    • title -- 指定元素名称
    • type -- 包含内容的类型,一般使用type="text/css"

（1）rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系.

  • rel属性通常出现在a,link标签中
  • 属性值
    • alternate -- 定义交替出现的链接 -- 定义两种不同的样式,用户可以通过浏览器选择样式
    • appendix -- 定义文档的附加信息
    • bookmark -- 书签
    • canonical -- 规范网页是一组内容高度相似的网页的首选版本
      • 　　rel="canonical"属性让搜索引擎知道当前网站中的重复或相似网页中，哪一个页面才是站长想让其抓取与收录的
    • chapter -- 当前文档的章节
    • contents
    • copyright -- 当前文档的版权
    • glossary -- 词汇
    • help -- 链接帮助信息
    • index -- 当前文档的索引
    • next -- 记录文档的下一页.(浏览器可以提前加载此页)
    • nofollow -- 不被用于计算PageRank
    • prev -- 记录文档的上一页.(定义浏览器的后退键)
    • section -- 作为文档的一部分
    • start -- 通知搜索引擎,文档的开始
    • stylesheet --定义一个外部加载的样式表
    • subsection -- 作为文档的一小部分
  • rel是relationship的英文缩写

（2）rev 属性 -- rev属性,描述了href所指定文档与当前页面的关系. --- 同rel属性

2、内部引用CSS -- 直接把CSS内容写在HTML文件的head标签中 -- style标签

示例：

 <head>

     <style type="text/css">

     abbr

     {

         font-size: 12px;

     }

     .text10pxwhite

     {

         font-size: 10px;

         color: #FFFFFF;

     }

     </style>

 </head>

此例使用了style标签.

附注：

style 标签 -- 在文档中声明样式时使用此标签

  • style标签是成对出现的，以<style>开始,以</style>结束
  • 属性
    • media -- 媒体类型，参见CSS高级教程
    • type -- 包含内容的类型，一般使用type="text/css"

注：style标签应该在head标签内部.

3、内联引用CSS -- 使用style属性对标签加载样式 -- style属性

内联引用可以把CSS样式直接作用在HTML标签中.

示例：

 <p style="font-size: 12px;color: #000;">使用CSS内联引用表现段落</p>

此例使用了标签的style属性.

CSS学习请移步：CSS教程

三、HTML中使用Javascript --- 增加动态功能

　　JavascriptT是一种客户端脚本语言，可以帮助HTML实现一些动态的功能。

示例：加载一个javascript文件

 <head>

     <script type="text/javascript" src="dreamdu.js"></script>

 </head>

Javascript学习请移步：Javascript教程

HTML学习笔记——标准网页设计+使用CSS、Javascript的更多相关文章

  1. ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则

    ASP.NET MVC 学习笔记-7.自定义配置信息   ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...

  2. thinkphp学习笔记5—模块化设计

    原文:thinkphp学习笔记5-模块化设计 1.模块结构 完整的ThinkPHP用用围绕模块/控制器/操作设计,并支持多个入口文件盒多级控制.ThinkPHP默认PATHINFO模式,如下: htt ...

  3. 网页设计（CSS&JS）

    实验一  简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...

  4. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...

  5. 学习笔记 第七章 使用CSS美化超链接

    第7章  使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1  定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...

  6. 学习笔记 第六章 使用CSS美化图片

    第六章  使用CSS美化图片 6.1  在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...

  7. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  8. HTML5学习笔记（七）：CSS盒子模型

    在CSS中,盒子模型有W3C标准盒子模型和IE盒子模型两种,这里所谈的是基于W3C标准的盒子模型. 所有HTML元素都可以看作盒子,即所有HTML标签都支持盒子模型的属性,在CSS中,"bo ...

  9. HTML学习笔记（三）样式CSS

    1.样式 外部样式表(通过css文件定义样式,整体样式) 当样式需要被应用到很多页面的时候,使用外部样式表,在 head 部分<link>. <head> <link r ...

随机推荐

  1. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-Switch Case语句是否会自动跳转到下一个

    在C#中,每一个case后面必须有break,所以输出1,也就是如果a=0,则只会执行case=0的那一段,当等于1之后不会继续.   在TwinCAT中,虽然CASE语句没有break,但是实际上不 ...

  2. 微信小程序 - 更改button状态

    wxml <button class='yes-orders' style='{{status_css}}' bindtap='clickExpress'> {{statusOrders} ...

  3. openerp config file

    [options] addons_path = /bin/openerp/addonsadmin_passwd = admincsv_internal_sep = , db_host = False ...

  4. linux c 获取网卡状态（UP or DOWN）

    源代码例如以下: #include <sys/socket.h> #include <sys/ioctl.h> #include <linux/if.h> #inc ...

  5. Centos 7 安装 Mysql5.7（压缩包方式）

    今天装的了mysql,遇到了很多问题,好在最后一一解决了,现在记录在此,防止日后老路重走... 1.下载 当然是去官网,下一个linux下的版本,64位的 tar.gz,好吧这里贴个名字——[mysq ...

  6. IOS下拉放大图片

    代码地址如下:http://www.demodashi.com/demo/11623.html 一.实现效果图 现在越来越多的APP中存在下拉放大图片的效果,今天贡献一下我的实现这种方法的原理,和我遇 ...

  7. RapidIOIP核的验证方法研究_王玉欢

    RapidIOIP核的验证方法研究_王玉欢 https://wenku.baidu.com/view/0fd3c925d4d8d15abf234e73.html

  8. Sql常用语法总结

    SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...

  9. [c#.Net]正则表达式 记录

    @符号c#字符串前使用@符号,“@”表示,跟在它后面的字符串是个“逐字字符串”. string x="D:\\My Huang\\My Doc"; string y = @&quo ...

  10. Google glog error LNK2001: unresolved external symbol "__declspec(dllimport) int fLI::FLAGS_XXXX 错误的解决。

    想在 windows 下使用 glog,使用类似 FLAGS_max_log_size 来设置参数,结果编译报错. 解决办法是在 项目属性 -> C/C++ -> Preprocessor ...