6.28—050—周五 | 易学教程

今日所学内容：前端

　　　　一、HTML5

　　　　　　1、转义字符

　　　　　　2、指令

　　　　　　3、标签

　　　　二、css

　　　　　　1、css 书写位置行间式 | 内联式 | 外联式

前端:

　　学习前端目的：为我们开发的应用程序提供一个与用户进行交互的界面

　　前端分类：HTML5、CSS3、JavaScript三大部分

　　学习内容：HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容

一、HTML5

　　什么是HTML5 (HyperText Mark-up Language)

　　HTML5就是html语言，是一种标记语言，数字5是该语言的版本号；html语言开发的文件是以.html为后缀，制作运行在浏览器上展现给用户使用的前端界面，采用的语言是超文本标记语言(HyperText Mark-up Language)。

　　注：.html文件可以双击直接在浏览器中打开，被浏览器解析后显示给用户查看

　　如何学习HTML

　　学习方向：掌握转义字符、指令和标签三大组成部分

　　学习目的：通过标签知识完成搭建页面整体架构

1、转义字符

　　像后台开发语言的特殊字符\n一样，会被解析为换行，html5中也有很多特殊字符数字的组合，会被解析为特殊的含义

　　　　空格：&nbsp | 字符"：&quot | 字符&：&amp | 字符<：&lt | 字符>：&gt

2、指令

　　被<>包裹，以!开头的特殊符号，称之为指令。

　　指令中不区分大小写，前端需要掌握文档指令和注释指令两个即可。

　　1）文档指令：<!DOCTYPE html>
　　　　-- 需要出现在一个html文件的最上方，代表该文件采用html5语法进行编写文件的

2）注释指令：
　　　　--

3、标签 ——（重点）

　　被<>包裹，以字母开头，可以结合数字、- 连接符等合法字符的特殊字符，称之为标签

　　标签中不区分大小写，帮助我们来更好的显示页面内容，标签有系统标签与自定义标签两种，html5中建议使用系统标签，标签名都采用小写即可

页面结构相关的系统标签
　　1. 页面根标签：<html></html>
　　2. 页面头标签：<head></head>
　　3. 页面体标签：<body></body>
　　4. 页面标题标签：<title></tile>
　　5. 元标签：<meta />
　　6. 链接标签：<link />
　　7. 样式标签：<style></style>
　　8. 脚本标签：<script></script>

简单的系统标签
　　1. 标题标签：<h1></h1> ... <h6></h6>
　　2. 段落标签：<p></p>
　　3. 换行标签：<br />
　　4. 分割线标签：<hr />
　　5. 行文本标签：<span></span>
　　6. 斜体标签：<i></i>
　　7. 加粗标签：<b></b>
　　8. 图片标签：<img />
　　9. 超链接标签：<a></a>
　　7. "架构"标签：<div></div>

复杂的系统标签
　　1. 无需列表标签：<ul><li></li></ul>
　　2. 表格标签：<table></table>
　　3. 表单标签：<form></form>

标签部分：
　　1. table表格标签
　　2. caption表格标题标签
　　3. thead表格头部区域标签，tbody表格主体区域标签，tfoot表格尾部区域标签，均可以省略别写
　　4. tr表格行标签
　　5. th表格标题单元格标签，td表格普通单元格标签

全局属性部分：
　　1. border表格的边框宽度
　　2. cellspacing单元格直接的间距
　　3. cellpadding单元格内部的间距
　　4. rowspan合并行单元格
　　5. colspan合列行单元格

标签部分：
　　1. from表单标签
　　2. text普通文本标签
　　3. input输入标签，通过全局属性type的值来确定具体是什么类型的输入标签
　　4. select表单中的列表标签，option列表项标签
　　5. textarea文本域标签
　　6. button按钮标签

　　form全局属性
　　　　1. action：提交表单数据给后台的地址
　　　　2. method：提交数据的方式(get或post)
　　　　3. enctype：提交数据的编码格式

　　form子标签全局属性
　　　　1. type：标签的类型
　　　　2. name：将该标签提交给后台标识数据的key (不设置name的标签的内容无法提交给后台)
　　　　3. value：该标签提交给后台的数据或是该标签的显示内容

　　input标签tpye属性值与分类
　　　　1. text：普通文本输入框
　　　　2. password：密文文本输入框
　　　　3. radio：单选框，该类型input标签有个全局属性checked，属性值省略，代表单选框默认选中状态
　　　　4. checkbox：复选框，该类型input标签也有个全局属性checke用同单选框，多个复选框用name值来标识属于同一组复选框，如都代表爱好的复选框的name都应该叫hobby
　　　　5. file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表同时可以选取多文件提交给后台
　　　　6. submit：提交表单信息给后台，用value设置提交按钮的显示内容

　　button标签tpye属性值与分类
　　　　1. button：不同按钮，默认点击后无任何操作
　　　　2. reset：重置按钮，默认点击后会还原表单的所有操作
　　　　3. submit：提交按钮，和type为submit的input标签功能一样，将表单信息提交给后台

二、css3 ——Cascading Style Sheet

　　什么是css语言：

　　css语言开发的文件是以.css为后缀，通过在html文件中引入该css文件来控制html代码的样式（css语言代码也可以直接写在html文件中），采用的语言是级联样式表

　　如何学习css

　　1）：学习方向：从css代码书写位置、css选择器和css具体样式设置三部分进行学习

　　2）：学习目的：能够完成页面样式布局和位置布局

1、css 书写位置

　　css是来控制页面标签的样式，但是可以根据实际情况书写在不同的位置，放在不同位置有不同的专业叫法，可以分为行间式、内联式和外联式三种。

　　1）行间式

　　　　css样式书写在标签的style全局属性中，一条样式格式为样式名: 样式值单位;，可以同时出现多条样式

　　2）内联式