您的位置：首页 > Web前端 > CSS

Web前端：HTML~CSS~JS

2016-06-15 21:42 656 查看

　网页主要由3部分组成：结构、表现、行为。目前网页的新标准是W3C，模式是HTML、CSS、JavaScript，这是前端开发最核心的3个技术。前2个技术的最新版本分别为HTML5、CSS3。

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为”

前端开发其他技术

Ajax

　异步JavaScript和XML，Asynchronous Javascript And XML，一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，即在不重新加载(刷新)整个网页的情况下，仅更新网页的某部分。

　Ajax是前后端交互的技术，主要实现在前端。

SEO

　搜索引擎优化，Search Engine Optimization，专门利用搜索引擎的搜索规则使网站在搜索结果的前面，提高访问量。

HTML

　超文本标记语言，Hyper Text Markup Language，为“网页创建和其它可在网页浏览器中看到的信息”设计的一门描述性标记语言，超级文本标记语言是万维网(Web)编程的基础。HTML 使用标记标签(HTML 标签，HTML tag)来描述网页。　　

　HTML结构

　　·. 头Head部分：提供关于网页的(公共)信息；

　　<head> 元素是所有头部元素的容器，包含脚本、指示浏览器在何处可以找到样式表、提供元数据(metadata)信息等，<title>、<base>、<link>、<meta>、<script> 以及 <style>可以添加到 head 部分。

　　·. 主体Body部分：提供网页的具体内容；　　　　

<html> 与 </html> 描述网页，定义HTML文档
<body> 与 </body> 可见的页面内容，文档主体
<h1> 与 </h1> 显示标题，有h1-h6
<p> 与 </p> 显示段落

　特点

　　·　简单易扩展：版本升级采用超集方式；

　　·　平台无关性：网络的通用语言；

　样式

　　根据样式表对文档进行格式化，插入样式表的3种方法：

　　a. 外部样式表：一表多用，通过更改一个文件来改变整个站点(多个页面)的外观。　

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

　　b. 内部样式表：针对单个文件(页面)需要特别的样式。

　 <head>
　　 <style type="text/css">
　　　 body {background-color: green}
　　　 p {margin-left: 20px}
　　 </style>
　 </head>

　　c. 内联样式：特殊的样式需要应用到个别元素，在相关的标签中使用样式属性。

<p style="color:blue; margin-left:20px">This is a Paragraph.</p>

　URL - 统一资源定位器

　 Uniform Resource Locator，URL 不能包含空格，用+代替，遵循以下语法规则：

　 <a href="scheme://host.domain:port/path/filename">自定义文本</a>

　　- scheme：定义因特网服务的类型，最常见的类型是 http

　　- host：定义域主机（http 的默认主机是 www）

　　- domain:port：定义因特网域名和主机上的端口号（http 的默认端口号是 80）

　　- path：定义服务器上的路径（如果省略则文档必须位于网站的根目录中）

　　- filename：定义文档/资源的名称　

XHTML

　可扩展超文本标签语言（EXtensible HyperText Markup Language），XML+HTML，XML 描述数据，HTML 显示数据。与 HTML 4.01 几乎相同，是一个 W3C 标准，XHTML 是更严格更纯净的 HTML 版本，目标是取代 HTML，是作为一种 XML 应用被重新定义的 HTML。

　特点

　　·　元素必须被关闭且要正确嵌套；　　

　　·　XHTML 文档必须拥有根元素，嵌套于<html> 根元素中，<html> 标签内的 xmlns 属性是默认必需的；　

　　·　属性不能简写，属性名称(标签)必须小写，属性值必须加引号，id 属性可以代替 name 属性；　

　　·　XHTML DTD 定义了强制使用的 HTML 元素；　

　所有 XHTML 文档必须进行文件类型声明（DOCTYPE declaration）。文件类型声明并非 XHTML 文档自身的组成部分，不是 XHTML 元素，也没有关闭标签。在 XHTML 文档中必须存在html、head、body元素， title 元素必须位于 head 元素中。

　XHTML结构

　　· !DOCTYPE

　　　　文档类型声明，用于验证XHTML文档。

　　· head

　　· body

HTML-5

CSS

　层叠样式表，Cascading Style Sheets，一种用来表现HTML或XML等文件样式的计算机语言，真正可以做到网页表现与内容分离的一种样式设计语言，是目前基于文本展示的最优秀的表现设计语言。

　特点

　　·　表现与内容“解耦合”，后期易维护和改版；

　　·　精简代码，减小网页文件大小，加快网页加载速度；

　　·　对象位置排版像素级的精确控制；

　　·　层叠性和继承性；

CSS-3

JS

　JS，即JavaScript，一种脚本语言，弱类型、动态类型的语言，网站的动态性更强。

jQuery

　jQuery=JavaScript+Query是辅助JavaScript开发的轻量级JS函数库，兼容CSS3，免费开源、使用MIT许可协议。核心理念是write less,do more(写得更少,做得更多)。

简化JavaScript编程；

DOM优先，用户交互；

AngularJS

　Google推出的一款完整的Web应用开发框架，提供一系列兼容性良好并且可扩展的服务，包括自动化双向数据绑定、依赖注入、MVC设计模式和模块加载等。

关注数据展示本身，动态操作网页元素强调开发效率。

TypeScript

　JS的超集(SuperSet)，兼容并扩展了JavaScript的语法，由微软开发的开源语言，使用Apache授权协议。

新增可选类型、类和模块，支持基于类的面向对象编程；

新增类型注解提供编译时的静态类型检查；

可编译成标准可读的JavaScript，支持开发大规模JavaScript应用；

参考：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航