web前端学习笔记：初识Web前端开发-CFANZ编程社区

行业发展与岗位变化

Web访问流程

网站-----网站与Web应用

网页设计师/网页制作员-----Web前端工程师

PC端-----移动端

Web端产品开发流程

相关理论--Web标准

Web 标准 ---- 一系列标准的集合

结构化标准语言主要包括XHTML 和 XML ，

表现标准语言主要包括CSS ，

行为标准主要包括对象模型（如 W3C DOM ）、 ECMAScript 等。

HTML 语言简介

HTML的基本语法

HTML文件由标记和文本组成，格式为：

<标记> 在浏览器中显示的文本 </ 标记 >

标记名和“<>”之间不能有空格

属性通过属性控制各种输出效果，格式为：

<标记属性1 ＝属性值属性 2 ＝属性值 …>

受到属性影响的文本

</标记>

例如： <p style=“color: red;"> 属性示例 </p> 属性之间没有顺序，且只能加于起始标记中。

标记可以分为单标记和双标记两种：

单标记单独使用，如：<br>

双标记成对使用，如：<head>…</head>

为了符合xml的规范，如果是单标记，则在开始标记中加/ 如<br/>

对于同一段文本，可以使用多个嵌套标记来共同作用，产生一定的效果，但需要注意标记出现的顺序。

<head><title>网页标题</head></title> （错误）

HTML语言不区分大小写

HTML注释

HTML的注释标记为“”可以插入到HTML文本的任何地方

例如：

HTML注释将发送到客户端浏览器，但不显示这与后面课程将要讲解的JSP注释不同：JSP注释的内容不会发送到客户端，但在注释出现的位置出现一个空行

HTML文件的基本结构

HTML文件以<html>开头，以</html>结束

HTML文件包括头部<head>和主体<body>两个部分

基本结构为：

<HTML>

<HEAD>

</HEAD>

<BODY>

<h1>我是第一个标题</h1>

<p>我是第一个段落。</p>

</BODY>

</HTML>

DOCTYPE 声明了文档的类型

<html> 标签是HTML页面的根元素，该标签的结束标志为 </html>

<head>标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。

<title>标签定义文档的标题

<body> 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>

<h1> 标签作为一个标题使用，该标签的结束标志为 </h1>，--Html标题

<p> 标签作为一个段落显示，该标签的结束标志为 </p>--p标签用法

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3>洋葱数学_数学知识点一学就懂</h3>

<p>洋葱数学初中微课视频,再难的知识点也能学明白!洋葱数学初中微课视频,再难的知识点也能学明白!</p>

</body>

</html>

CSS ：层叠样式表 (Cascading Style Sheets)

• 样式（ Style ）定义如何显示 HTML 元素

• 样式通常存储在样式表中

• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

• 外部样式表可以极大提高工作效率：通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面布局的外观。

• 外部样式表通常存储在 CSS 文件中

• 多个样式定义可层叠为一

<style>

body{font-size:14px;}

h3{font-size:16px; color:#0000cc;}

</style>

JavaScript

JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行。

JavaScript 被设计用来向 HTML 页面添加交互行为；是一种脚本语言（脚本语言是一种轻量级的编程语言）；由数行可执行计算机代码组成；通常被直接嵌入 HTML 页面；是一种解释性语言（就是说，代码执行不进行预编译）。

var oP=document.getElementsByTagName("p")[0];

oP.onclick=function(){

alert("hellow world!");

}

</script>

使用的工具

• 浏览器建议谷歌浏览器 F12

• 编辑器

• 可以使用任一文本编辑器，如记事本等

• 不建议用软件生成代码

• 本课程使用： HBuilder

• 效果图的切图与信息获取

• Photoshop

• 尺寸的获取

• 拾取颜色

切取图片

基本结构

•站点结构

• 若干 HTML 文件

• 素材文件夹 -images files

• 样式文件夹 -styles

• 脚本文件夹 -script

• 界面的基本结构 -HTML

• 由浏览器识别解释

• 标记对 < 标记名 > 内容 </ 标记名 >

• 文档类型声明编码方式

<title>元素

样式的使用

• 层叠样式表：在元素上层叠应用的样式命令集合

• 作用：设置显示效果

• 基本格式一：样式属性名 : 样式属性值 ;

• 如： width:200px;

• 添加到界面的方法

• 标签属性

• <head></head> 之间

• 外部样式

参考网站

www.w3school.com.cn

协议	主机	路径
http	www.baidu.com	index.htm