Web前端基础课程
第一阶段：Web前端开发环境搭建
- 操作系统操作常用高级设置和快捷键
- Sublime安装和配置
- Atom安装和配置
- WebStorm安装和配置
第二阶段：HTML5基础
- HTML基础
- 语义化标签与SEO
第三阶段：CSS3基础
- CSS属性基础
- CSS布局
- 面向对象的CSS
- less、sass、styleus、postcss *
- 第四阶段：JavaScript基础
- JavaScript语法基础
- JavaScript数组、字符串、流程控制语句、
- JavaScript高级简介
- 综合项目
第一节：HTML基础
- 什么是浏览器
- 什么是服务器
- 常见名词解释
- 认识网页
- 网页内容划分：结构、样式、行为
什么是浏览器
- 浏览器帮助用户进行浏览网页的软件
- 360双核浏览器、qq浏览器、
- 浏览器与浏览器内核：
- ie：trident、safari:webkit、ff:gecko、chrome,opera:blink
常用浏览器介绍
浏览器是网页运行的平台，常用的浏览器有
IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
图片1.jpg
-
IE浏览器由微软公司推出，有6.0、7.0、8.0、9.0、10.0、11.0等版本，最新的是IE11.0和斯巴达浏览器edge。
-
Mozilla Firefox，中文通常称为“火狐”，Firebug是火狐浏览器下的一款开发插件，是开发HTML、CSS、JavaScript等的得力助手。在实际网页制作过程中火狐浏览器是最常用的浏览器。
-
Google Chrome，又称谷歌浏览器，是由Google（谷歌）公司开发的开放原始码网页浏览器。
名词解释
-
Internet：因特网，互联网。可以实现全球信息互联的网络。
-
WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。
-
W3C：万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们后面学的html、css等标准都是由此机构主导制定。
-
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。
-
Web：web （互联网总称）web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。
-
DNS：DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）
-
域名： www.itcast.cn
什么是Web服务器和服务器
浏览器浏览页面背后的秘密（了解）：
-
浏览器接受用户操作→浏览器封装HTTP请求→连接服务器：DNS解析→发送请求Request→服务器接收请求→处理请求→返回响应报文→浏览器接收响应报文→渲染页面呈现
-
HTTP协议（了解，就业班详细讲）
认识网页
- 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
网页的组成
- HTML：页面结构
- CSS：页面样式表现
- JavaScript：交互行为
- Web标准：结构表现行为之间的关系
HTML部分
- HTML发展历史
- HTML的页面结构
- HTML语法
HTML简介
-
HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
-
HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。
-
HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
HTML发展历程
- HTML 1.0 超文本标记语言(第一版) -在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)
- HTML 2.0 -1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2 -1996年1月14日,W3C推荐标准
- HTML 4.0 -1997年12月18日,W3C推荐标准
- HTML 4.01(微小改进) -1999年12月24日,W3C推荐标准
- XHTML 1.0 -发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布
- XHTML 1.1 -于2001年5月31日发布
- HTML5.0 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成
HTML标准的选择
- 目前最新的HTML版本是HTML5。
- 部分国内的网站还是使用XHTML标准，但是HTML5标准是趋势
HTML语法
- HTML标签以 ”<“开头。
- 紧接着就是标签名（中间没空格）
- 标签名之后如果有属性的话，加空格然后是 属性名=""
- 如果有多个属性，属性间用空格隔开，空格可以有多个。
- 属性结束后可以加一个或多个空格。
- 然后是结束标签">",如果是闭合标签需要在标签名前加”/"，例如：</html>
- 单标签，斜线没有任何意义，可有可无。
- 标签中间可嵌套内容。
HTML整体结构标签
- Doctype标签，文档协议声明标签
- 文档协议声明标签，非常重要
- 协议不同影响整个页面显示的效果
- 目前主流用HTML5的协议文档
- html标签，文档标签
- head，文档头部标签
- body，文档内容部分标签
- p段落标签
- h1标题标签
- 案例：新闻详情页面
第三节：HTML头部标签
- doctype标签
- head标签
- title标签
- link标签
- meta标签
- script标签
- style标签
- <!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。主要用于浏览器解析文档标签的依据。
- 必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。
- <!DOCTYPE>标记和浏览器的兼容性相关，删除<!DOCTYPE>，就是把如何展示HTML页面的权利交给浏览器。这时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少种显示效果，这是不被允许的。
在sublime中
- html:xt + tab //输出xhtml 过渡标准
- html:xs +tab //输出xhtml 严格标准
- html:4t
- html:4s
- html:5
HTML基本文档格式<html> 标记
<html>标记位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。
<html>
所有的标签必须写在 两个闭合标签之间。
</html>
可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档
<html lang="zh-cn"></html>
HTML基本文档格式<head> 标记
<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后。
head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。
主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
HTML基本文档格式<meta>标记
<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文
GBK包含全部中文字符 繁体
BIG5 繁体中文
UTF-8则包含全世界所有国家需要用到的字符
从二进制说起，符号表示文字，表示的模式就是编码：联想电报
HTML文档头部相关标记—<title>
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
<title>网站标题名称</title>
title标签对于网站SEO至关重要，标题的好坏直接影响网站的SEO
SEO（Search Engine Optimization）：网站搜索引擎优化
Link标签
引入DNS预先解析
dns预解析(了解)
<link rel="dns-prefetch" href="http://mimg.127.net">
引入网站icon图标：
<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
引入css样式，【后面讲】
<link rel="stylesheet" href="css/bg.css">
HTML呈现标签
- body标签
- 标题标签h1-h6
- 段落标签：p
- 注释标签
- 换行标签 br
- 水平线标签 hr
HTML基本文档格式—<body> 标记
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。
标题标签： h1-h6，块级标签
<h1>我是页面内容的标题</h1>
标题作为页面的标题性的内容，一定要符合语义。标题1到6数字不是定义标题的样式大小，而是定义标题的在整个页面中的权重。
标题标签只能 嵌套 行内标签。
段落标记，行内标签
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。
<p>段落文本</p>
<p>是HTML文档中最常见的标记，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
段落标签也只能嵌套行内标签。
水平线标记<hr />
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：
<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。
HTML空格合并处理
为了方便开发人员开发缩进合理的HTML页面，浏览器解析渲染HTML时 换行符、连续多个空格等会合并成一个空格在浏览器里面进行显示。
如果需要换行怎么办呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<span>12</span>
<span>34</span>
</p>
</body>
</html>
换行标记<br />
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在word中直接敲回车键换行就不起作用了。
HTML常用标签
段落标签：p， <p>我是段落</p>。
水平线标签：hr <hr>
换行标签：br，<br>。普通的空格和换行会进行合并。
文本节标签：span，行内标签。
<em> 定义着重文字。 <i> 定义斜体字(不推荐)。
<strong> 定义加重语气。
<sub> 定义下标字*。
<sup> 定义上标字。
<del> 定义删除字
注释标签：<!-- 注释内容 -->
案例：复杂案例。
文本格式化标记
- 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
- 文本格式化常用标记
图片1.jpg
网友评论