HTML学习笔记——标准网页设计+使用CSS、Javascript
一、标准网页设计
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)时使用此标签
(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"
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教程
最新文章
- Java多线程基础学习(二)
- (转载)Bash 中的特殊字符大全
- js 自带的 reduce() 方法
- 在CentOS 6 32/64 上安装 PPTP 方式 VPN 服务
- nanosleep纳秒级延迟
- CSS定位与浮动
- HDU4540+DP
- Java学习日志(20170111)
- PHP学习笔记-3
- 【javaFX学习】(二) 控件手册
- bzoj 2806: [Ctsc2012]Cheat
- xcode进行代码覆盖率测试
- P1308 统计单词数
- 查看指定库对应GCC版本
- CF1105E Helping Hiasat 最大团
- C# 反射机制以及方法
- webpack文件笔记
- JAVA操作mysql
- Java编程的逻辑 (49) - 剖析LinkedHashMap
- java- Collection Map集合
热门文章
- ns3加入模块之vanet-highway
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何查看错误代码
- lodash map
- Eclipse githup
- lucene: IO/FileNotFoundException:(Too many open files) 查询异常解决
- Python 解码 Unicode 转义字符串 (转)
- Javascript - demo 与 捷径
- Sql语句查询XML - 小结
- 170. Two Sum III - Data structure design【easy】
- python模块学习之collections