Web前端开发的第一阶段.docVIP

HTML入门 安装工具 编辑器 —— Sublime Text 安装插件： 按Ctrl+`（Esc下方的按钮）调出console ；复制：import urllib2,os;pf=Package Control.sublime-package;ipp=sublime.installed_packages_path();os.makedirs(ipp) if notos.path.exists(ipp) else None;open(os.path.join(ipp,pf),wb).write(urllib2.urlopen(/+pf.replace( ,%20)).read())到代码底部命令行中 ；按回车键执行；重启Sublime Text；浏览器 —— Chrome、Safari 、Firefox 、360浏览器、遨游等。 图形工具 —— PhotoShop 版本管理工具 —— TortoiseSVN SVN是什么？意义何在？ SVN是版本管理工具。当大家都在共同开发一个项目的时候，可以有效避免协作开发中的代码冲突问题；历史版本的保存也使得项目变得有据可查，当项目需要回滚到之前版本的时候，可以轻松的找到代码。此外一些开源项目也在使用SVN，这是一个使协同开发和版本维护变得方便的工具。 环境集成工具 —— WAMP 创建项目文件夹（名字自起） 创建html文件 （常起名 index.html，一个项目有多个html文件） 创建项目文件夹 创建css文件夹（用来放css层叠样式文件） 创建images文件夹（用来放网页中需要的图片） HTML介绍 HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言。 HTML语言是一种标记语言,不需要编译,直接由浏览器执行。 HTML文件是一个文本文件,包含了一些HTML元素,标签等。 HTML文件必须使用html或htm为文件名后缀。 HTML是大小写不敏感的,HTML与html是一样的。 HTML是由W3C的维护的。 前端介绍 前端页面=结构html+样式css+行为js 2 HTML结构 2.1 HTML结构 头部head+身体body head head 标签用于定义文档的头部，它是所有头部元素的容器。 head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、 编码格式等；绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 title 定义文档的标题，它是 head 部分中唯一必需的元素。 meta charset=UTF-8 —— 声明文档编码格式 为 UTF-8 title 文档标题 /title ——— 网页名称 link rel=stylesheet href= 外链样式表地址 —— 链接样式表 style type=text/css css样式 /style —— css样式 script type=text/javascript 定义客户端脚本 /script base href=全站默认地址/ meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 body body 元素定义文档的主体。 body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） 网页需展示的内容需嵌套在body标签中。 2.2 HTML标签 HTML标签是HTML语言中最基本的单位，也是最重要的一部分。浏览器以某种方式显示相应的标签样式。 HTML标签特点 由尖括号包围的关键词，比如 html。 通常是成对出现的，比如 div 和 /div。 标签对中的第一个标签是开始标签，第二个标签是结束标签。 开始和结束标签也被称为开放标签和闭合标签。 也有单独呈现的标签，如：img src=images/1.jpg /等。 一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如h1标题/h1和 input type=text value=按钮 /。 块属性标签 h1 - h6： 标题 p： 段落 br/ ：换行，空标签 div : 无实际意义（通常用作装其他标签的盒子） dl:定义列表（结合dt和dd使用） dt:定义列表中的项目 dd:描述列表中的项目 ol:有序列表（结合li使用） li：定义列表项。有序列表可以是数字或字母顺序。 ul : 无序列表 （结合li使用） li：定义列表项 table : 表格（结合tr、t