需要请注明转载谢谢!!!
1.软件开发流程.
1).前端写静态页面, 全部交给后端,后端能看到前端代码,进行修改变为动态页面(JSP)后端会出现不规范写法,虽然能用,但导致页面效果差,客户满意度低. 现在不使用!
2).前端写静态页面,代码不交给后端,后端看不到.前端定制规范要求要求后端给对应接口就可以了. 现在主流这种开发!
3).前端写完静态页面,再用Node.js写服务端,全部由一个人操作.进行全栈开发.这样人很厉害.有些大公司这样做.小范围使用!
2.什么是结构、表现、行为?
结构
HTML用于描述页面的结构
表现
CSS用于控制页面中元素的样式
行为
JavaScript用于响应用户操作
3.什么是Html
HTML
• HTML（Hypertext Markup Language）
超文本标记语言。
• 它负责网页的三个要素之中的结构。
• HTML使用标签的的形式来标识网页中的不
同组成部分。
• 所谓超文本指的是超链接，使用超链接可
以让我们从一个页面跳转到另一个页面。
• 一个最基本的HTML页面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <h1>网页正文</h1> </body> </html>
标签
• HTML中的标记指的就是标签。
• HTML使用标记标签来描述网页。
• 结构：
<标签名>标签内容</标签名>
<标签名 />
元素
• 我们还将一个完整的标签称为元素。
• 这里我们可以将元素和标签认为是一个同义词。
<h1>一级标题</h1>
上边的h1我们就称为元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素。
<body>
<p><em>内容</em></p>
</body>
• body也是一个元素。
• body是p和em的祖先元素。
• p和em是body的后代元素。
属性
• 可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称/值对的形式出现。
• 比如：name=“value”
• 有些属性可以是任意值，有些则必须是指定值。
<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />
常见属性
• id
– id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
• class
– class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组
可以出现相同的class属性，可以为一个元素指定多个class。
• title
– title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
html5
• 我们会发现html4.01和xhtml的文档声明十
分的麻烦。不过不用担心，以上的内容都
不是我们使用的，我们使用的是html5的文
档声明，而且非常简单：
<!DOCTYPE html>
不写上面标签会出现怪异模式
• 为了兼容一些旧的页面，浏览器中设置了
两种解析模式：
– 标准模式（Standards Mode）
– 怪异模式（Quirks Mode）
• 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。
• 避免的最好方式就是在页面中编写正确的doctype。
乱码
• 如果我们保存文件时使用utf-8进行编码，而浏览器读取页面时使用gb2312，这样会导致页面中的内容不能正常显示，就是我们所说的乱码。
• 所以我们只需要统一两者使用的字符集就可以解决乱码问题。
• 这里为了页面有更好的使用性，我们一般使用utf-8。
解决
• 保存文件的编码我们直接通过编辑器即可
指定，接下来就是要告诉浏览器使用什么
字符集去解析文件。
• 在html5中只需要使用meta标签即可完成
这个任务：
<meta charset="utf-8" />
常用标签:
<html>
• 作用：
– <html>标签用于告诉浏览器这个文档中包含
的信息是用HTML编写的。
• 用法：
– 所有的网页的内容都需要编写到html标签中，
一个页面中html标签只能有一个。
– html标签中有两个子标签head和body 。
<head>
• 作用：
– <head>标签用来表示网页的元数据
head中包含了浏览器和搜索引擎使用的其他不可见信息。
• 用法：
– head标签作为html标签的子元素的出现，一个网页中只能有一个head。
<title>
• 作用：
– <title>标签表示网页的标题，一般会在网页的标题栏上显示。
– title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。
• 用法：
– 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。
<body>
• 作用：
– <body>标签用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
• 用法：
– body标签作为html的子标签使用。
<h1>~<h6>
• 作用：
– h1~h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。
– 标题标签相当于正文的标题，通常认为重要性仅次于页面的title。
– 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。
<p>
• 作用：
– <p>标签表示网页中的一个段落。
– 一般浏览器会在段落的前和后各加上一个换行，
也就是段落会在页面中自成一行。
<br />
• 作用
– <br />标签表示一个换行标签，使用br标签可以使br标签后的内容另起一行。
<hr />
• 作用：
– <hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。
<img />
• 作用：
– < img />标签是图片标签，可以用来向页面中引入一张外部的图片。
• 属性：
– src
• 指向一个外部的图片的路径。
– alt
• 图片的描述
<a>
• 作用：
– <a>标签是超链接标签，通过a标签，可以快速跳转到其他页面。
• 属性：
– href
• 指向一个链接地址
– target
• 设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。
实体
• 在HTML中预留了一些字符。
• 这些预留字符是不能在网页中直接使用的。
• 比如<和>,我们不能直接在页面中使用<和>号，因为浏览器会将它解析为html标签。
• 为了可以使用这些预留字符，我们必须在html中使用字符实体。
• 语法: &实体名;
字符实体
• 小于号< – <
• 大于号> – >
• 空格 –
• 和符号& – &
• 版权© – ©
• 引号” – "
• 注册商标® – ®
• 商标™ – ™
文本编辑器
• 在windows中我们只需要使用最简单的记事本就可以完成所有的网页的开发。
• 但是一般我们会使用一些具有提示功能的纯文本编辑器：
– Notepad++(免费)
– Sublime(收费)
• 当然还有很多其他的工具。
IDE
• IDE（集成开发工具）
• IDE拥有比纯文本编辑器更加强大的提示功能，也是我们开发中用的比较多的工具。
– DreamWeaver（收费）
– WebStorm（收费）
– Hbuilder（免费）
• 当然也有其他的IDE。