title: 启程：WWW、HTML和CSS speaker: bugzhang url: https://github.com/CSU-Apple-Lab/Slides-for-Web-Class description：中南大学苹果实验室web开发教程第一节 transition: slide3 files: /css/theme.moon.css theme: moon highlightStyle: monokai_sublime date: 2016年12月3日

================================================================ [slide]

Web开发系列——第一节

`启程：WWW、HTML和CSS`

[slide]

1.1 对《社交网络》中开发的一些解释

Apache
wget
数据库
Mozilla
Fire Alarm System
Emacs
Perl

[slide]

1.2 关于课程

面向对象

从零开始学习web开发

学习目的

独当一面的完成中小型web应用的开发
后端组为移动开发提供可靠的接口，前端组与移动开发完成hybrid应用开发
让我们实验室更好的发展，形成开源极客的技术氛围

[slide]

学习内容

了解web世界，理解一些所用到的协议（tcp/ip协议栈）
掌握web开发的语言（html+css+js，php/node.js/python/java/etc.）
掌握开发工具（jetbrains系列/atom/sublime），命令行工具（bash），测试与调试工具(firebug)，代码托管工具（git与github），包管理器（npm与composer）
熟悉至少一个数据库（关系型mysql/postgresql/sqlite，非关系型mongodb，缓存数据库redis/memcached）
熟悉擅长一些开发框架（前端bootstrapt+angular.js，后端框架待定）
了解web架构，了解服务器运维（经典LAMP架构：linux+apache+mysql+php，高性能Nginx服务器，容器）

[slide]

1.3 关于我

Bugzhang，计科1402班
web前端开发者，也做设计
开源社成员（http://www.kaiyuanshe.cn/ ）
个人网站：http://www.bugzhang.com/

[slide]

2.1 WWW

WWW:World Wide Web 万维网
创始人：蒂姆·伯纳斯·李（英）
运行主机：NEXT主机

[slide]

一次对网站的访问，发生了什么？

[slide]

2.2 资源

访问时候服务器存储的所有的可被请求的文件

二进制文件（视频图片）
文本文件
脚本文件（.js）
页面文件（.html)
样式文件 (.css)
etc.

`游览器对这些资源进行处理就得了了网页`

[slide]

2.3 HTTP：超文本传输协议（转移）

HyperText Transfer Protocol

[slide]

2.4 其他相关

暂时只做了解，等需要时候会深入解释、配置及开发

域名、IP地址、端口、DNS
客户端（游览器）—— 前端开发
服务端（服务器）—— 后端开发

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.1 HTML 超文本标记语言

HyperText Markup Language

HTML是目前几乎所有网站编写格式化的语言，其作用是格式化网页的内容，比如标题、段落、按钮、图片

HTML经过游览器的转换就可以成为网页
HTML有很多版本，最新版本是是HTML5
HTML标准是由W3C（万维网联盟）组织制定的

HTML的特点

所有HTML都是纯文本的
HTML不是编程语言，是标记语言
HTML使用Tag（标签）进行标记，Tag的语法格式是
<tag>内容</tag>
分层级，层级之间靠标签的包含区分，为了方便也会缩进

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.2 第一个HTML文件

1   <!DOCTYPE html>
2   <html>
3   <head>
5       <title>csu苹果实验室(csuapple.com)</title>
6   </head>
7   <body>
8       <h1>我的第一个标题</h1>
9       <p>我的第一个段落</p>
10  </body>
11  </html>

<!DOCTYPE html>：声明了文档类型
<html></html>：描述了文档类型
<head></head>：描述文档的基本属性，其中<title>是必须元素，其他是非必须元素
<body</body>：描述文档的可见内容，是文档的主体
<h1></h1>：h1标签表示这是一个标题
<p></p>：p标签表示这是一个段落

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.3 `<head>`标签

1   <head>
2       <meta charset="utf-8">
3       <title>CSU苹果实验室</title>
4       <meta name="description" content="移动开发，web开发，开源社区，碉堡，csu最强开发">
5       <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
6       <!-- 引入资源文件 -->
7       <link rel="stylesheet" href="app.css" />
8       <link rel="shortcut icon"href="myicon.ico">
9       <script src="phone-list/phone-list.module.js"></script>
10  </head>

<meta>：文件描述，具体charset="utf-8"值得是文件编码，content常被用来做关键字优化，用以SEO
<title>：文件标题
<link>：文件链接，一般用来链接css样式表，或者按钮
<script>：指定脚本，默认脚本语言是javascript，所以通常不指定脚本类型为javascript，通常script被引入在body底部，原因我会在js阶段说明，涉及游览器处理与性能优化
：注释元素

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.4 `<body>`标签

3.4.1 常见行级元素：

<a>：标签可定义锚，即链接
<br>：换行符
<code>：定义代码
<img>：插入图像
<input>：输入框
<label>：为输入框进行标注
<select>：单选
<span>：组合同一行内元素用

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.4.2 常见块级元素

<h1><h2><h3><h4><h5>：标题，层级上由大到小，默认也体现在大小上由大到小
<div>：分区快，或者说是将一堆元素进行整合
<form>：表单
<hr>：水平线
<table>：表格
<th>：表头，通常就是列名
<tr>：表格中一行
<li>：列表

3.4.3 可变元素

<button>：按钮
<iframe>：创建包含另外一个文档的内联框架（即行内框架），可以作为视频等流媒体的一个容器

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.5 标签的属性

属性是 HTML 元素提供的附加信息。

3.5.1 属性特点

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"

3.5.2 属性名与属性值

属性值应该始终被包括在引号内。
双引号是最常用的
属性规定使用小写

[slide data-transition="vertical3d" style="background-color:#1671ce"]

3.5.3 实例

<div class="iconbox_wrapper">
    <div class="icon_title_wrap">
        <div class="ico"><img src="http://of8t6pu0g.bkt.clouddn.com/icon16.png" class="icon_def" width="80" height="80" alt="">
            <img src="http://of8t6pu0g.bkt.clouddn.com/icon16.png" class="icon_retina" width="80" height="56" alt="">
        </div>
        <h5 class="iconbox_title">发挥创造的价值</h5>
    </div>
    <div class="iconbox_body">
        <p>编码未来，创造价值，我们用心写好每一行代码，开发无境界，创造不可能。</p>
    </div>
</div>

公共属性:适用于几乎所有元素的属性

id：标注元素的id，相当于名字，一个id必须对应唯一的元素
class：标注元素的class，即类型，一个类可以对应多个元素，一个元素可以有多个类
style：一种css的写法，定义元素的行内样式

非公共属性:每个元素都有自己的不同的属性，必选或可选。非常多，等需要用的时候按需掌握。例如：width="80" height="56"，就是属于img标签的特有属性，表示宽度和高度。

[slide data-transition="circle" style="background-color:#6b9b98"]

4.1 CSS 层叠样式表

Cascading Style Sheets

HTML自身表现能力很弱，需要一种语言对其样式进行表现，HTML4.0时候，W3C加入了CSS用来解决这个问题。用来定义诸如位置、大小、颜色、文字、背景等效果。

[slide data-transition="circle" style="background-color:#6b9b98"]

4.1 CSS的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用方式</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .type2{margin-left: auto;margin-right: auto;text-align: center;background-color: #06b6ef;}
        .type2 h3{font-family: "YaHei Consolas Hybrid", STHeiti, "Microsoft Yahei", Arial, Helvetica, sans-serif;}
        #green{color: #00a86d;}
    </style>
</head>
<body>
    <div class="type1">
        <h2>使用方式1</h2>
        <h3 id="green">将样式写在head里</h3>
    </div>
    <div class="type2">
        <h2>使用方式2</h2>
        <h3>通过link标签引入，要指定rel="stylesheet"，在href里写上css的相对地址</h3>
    </div>
    <div class="type3" style="background-color: #ae81ff">
        <h2 style="font-size: 20px">使用方式3</h2>
        <h3 style="margin-left: 20%">通过表情的style属性指定该标签的样式</h3>
    </div>
</body>
</html>

[slide data-transition="circle" style="background-color:#6b9b98"]

4.2 CSS选择器

主要分三类

id选择器： #id名 { 属性名:属性值; }
class选择器：.class名 { 属性名:属性值; }
标签选择器：标签名 { 属性名:属性值; }

通过组合可以组合出以下几种

后代选择器: 父代名后代名 { 属性名:属性值; }
子代选择器: 父代名>子代名 { 属性名:属性值; }
群组选择器: #name1, .name2, #name div { 属性名:属性值; }
伪类选择器: name:伪类
通用(通配符)选择器: * { 属性名: 属性值; }

[slide data-transition="circle" style="background-color:#6b9b98"]

4.3 推荐的CSS格式

4.3.1 书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

.example{
    width: 400px;
    display: inline-block;
    font-size: 12px;
    color: #00a86d;
    background-color: #999;
}

[slide data-transition="cards" style="background-color:#6b9b98"]

4.3.2 书写和颜色使用缩写，去掉小数点的0

.example{
    margin:20px;
    border-top:0
    background:#999
}

4.3.3 注意事项

1.一律小写;
2.尽量用英文;
3.尽量不缩写，除非一看就明白的单词。

[slide data-transition="cards" style="background-color:#ae81ff"]

课程安排	课程名	课程内容	难度
第一节	启程	www、html、css	1
第二节	新世	html5、css3、bootstrap、git	2
第三节	初战	电商主页开发实战	3
第四节	征服	javascript、browser	4
第五节	进化	dom、jquery、ajax、json	4
第六节	重构	前后端初步分离的开发实战	4
第七节	绑定	vue.js与前端mvvm架构模式	5
第八节	全栈	node.js、express框架、npm包管理器	5
第九节	统治	react native、hybrid	5
第十节	终结	组件式全栈开发跨全平台应用	5

[slide data-transition="circle" style="background-color:#ae81ff"]

谢谢大家

很多地方有不足，之后能和大家一起继续研究前端开发

FilesExpand file tree

1.0_web_base.md

Latest commit

History

1.0_web_base.md

File metadata and controls

Web开发系列——第一节

启程：WWW、HTML和CSS

1.1 对《社交网络》中开发的一些解释

1.2 关于课程

面向对象

学习目的

学习内容

1.3 关于我

2.1 WWW

一次对网站的访问，发生了什么？

2.2 资源

访问时候服务器存储的所有的可被请求的文件

游览器对这些资源进行处理就得了了网页

2.3 HTTP：超文本传输协议（转移）

HyperText Transfer Protocol

2.4 其他相关

3.1 HTML 超文本标记语言

HyperText Markup Language

HTML的特点

3.2 第一个HTML文件

3.3 <head>标签

3.4 <body>标签

3.4.1 常见行级元素：

3.4.2 常见块级元素

3.4.3 可变元素

3.5 标签的属性

3.5.1 属性特点

3.5.2 属性名与属性值

3.5.3 实例

4.1 CSS 层叠样式表

Cascading Style Sheets

4.1 CSS的使用方式

4.2 CSS选择器

主要分三类

通过组合可以组合出以下几种

4.3 推荐的CSS格式

4.3.1 书写顺序

4.3.2 书写和颜色使用缩写，去掉小数点的0

4.3.3 注意事项

谢谢大家

很多地方有不足，之后能和大家一起继续研究前端开发

`启程：WWW、HTML和CSS`

`游览器对这些资源进行处理就得了了网页`

3.3 `<head>`标签

3.4 `<body>`标签