初学web前端-20170424

来源：互联网发布：说话技巧叶名琛知乎编辑：程序博客网时间：2024/06/08 06:46

一、认识web前端

1、什么是Web?

使用浏览器去访问的程序，Web程序，俗称网页

细分网站：电商网站，应用网站（OA办公系统、CRM客户管理系统 )，门户网站，可执行的桌面应用程序（exe）

2、什么是web前端？

web程序的代码存储在服务器端
代码分为两种：一种是运行在浏览器（客户端）；一种是运行在服务器端（后端程序）
运行在客户端的代码：前端代码运行在后端的代码：后端程序
3、完成的网站：前端+后台

二、需要学习的内容

1、静态页面编写--按照产品设计图来编写，开发网页（.html）文件，它可以在浏览器中运行
技术：HTML（5）, CSS（3）
2、添加页面功能：动态特性，页面交互
技术：javascript,JQuery.DOM
3、和服务器交互
技术：server,php,ajax
4、复杂开发：HTML5，框架技术（bootstrap,node.js,angular.js）,移动端，微信开发

三、学习方式

1、纯手写代码
2、学习难度：打字速度，英文单词
3、增加代码量

4月24日下午课程：

一、web基础知识

1、Internet

1、什么是Internet？

全球计算机互联网络，又称为国际互联网，简称互联网，因特网，交互网。

2、web程序？

web程序就是运行在Internet之上的一种应用程序，俗称网页。

3、web应用的作用

可以把各种信息和服务进行无缝连接，提供一个生动的用户界面。

4、工作原理

基于浏览器、服务器和通信协议来实现信息的传输和展示。
通信协议：http://
浏览器：IE,Chrome,firefox,Opera,safari

浏览器的功能：

(1)、向服务器发送请求，提交数据
(2)、解析执行HTML页面，提供生动形象界面给用户
服务器：接受前端的请求（后端程序完成）
服务器的功能：存储代码、存储数据、后端程序（用java,php,.net后端程序语言趋势线，
它们都直接操作数据库，并且进行业务逻辑处理，并将结果返回给前端）
前端进行数据的展示：HTML,CSS,JS（通过浏览器解析以后给用户看）

二、HTML概述

1、什么是HTML？

HTML（Hyper Text Markup Language）超文本标记语言

2、特点

1、以.html或.htm为后缀
2、由浏览器解析执行
3、可以嵌套脚本语言（Javascript，vbscript）
4、用带有尖括号的“标记”来标识

3、HTML基础语法

1、标记

什么是标记？
标记是由尖括号包围的关键词，并且是具有相应功能的符号。比如<a>
注意：标记必须用尖括号括起来

2、分类

1、封闭类型又称为双标记
语法：<标记></标记> 特点：必须有开始有结束，如果忘记结束，会影响其他的内容。
eg:<a>内容</a>
2、非封闭类型又称为单标记
语法：<标记>或<标记/>
eg:<br>或<br/> <img>或<img/>

3、元素

2、元素的属性和值

元素属性的作用用来修饰元素
语法：<标记属性=“值” 属性=“值” ...></标记>
eg:p元素的align属性值为center,id属性值为p1
<p align="center" id="p1"></p>

3、标准属性（通用属性）

id:元素在页面中的唯一标识
title:鼠标移入到文字上时，所提示的文本
class:CSS中，引入类选择器
style:CSS中，定义元素的行内样式

4、注释

语法：(英文状态下的符号)

注意：1、注释本身不能嵌套
2、不能出现在标记中

4、HTML标准结构

1、首先声明文档类型：<!doctype html>
2、HTML页面：由一对根标记组成
<html></html>紧跟在<!doctype html>之后
在根标记中包含两部分：
1、文件头<head></head>用于定义页面的全局信息
2、文件主体：<body></body>页面的主体内容

5、head元素

head元素是title,meta,script,style，link元素的容器。
1、<title>内容</title>定义网页的标题
2、<meta>定义网页的基本信息：编码格式，关键字，描述内容等
<meta charset="utf-8"> 编码格式
<meta name="keywords" content="关键字">
<meta name="description" content="描述内容">
3、<script></script>定义或引用js文件
4、<style></style>定义内部样式表
5、<link></link>引入外部样式表

6、body元素

body元素是定义页面主体内容
属性：
text:定义文本的颜色
取值：颜色的英文单词
bgcolor:定义页面的背景颜色
取值：颜色的英文单词

2 0