web前端技术(一) 之从小白到大牛
web前端技术(一)
第一章 web前端基础
目录
- web前端技术(一)
- 前言
- 一、前端技术的基础是什么
- 二、前端基础学习
-
- 1.HTML
-
- 1.1HTML文件的创建
- 1.2HTML文档的结构
- 1.3HTML标签
- 1.4常用标签
- 1.5表单
- 1.6 a标签
- 1.7图片标签
- 1.8 列表
- 1.9 多窗口框架 frameset 4.0 版本 H5版本
- 1.10 常用标签 特殊意义的标签
- 1.11 视频和音频
- 2 XHTML
- 3.css(层叠样式表)
-
- 3.1 什么是CSS (层叠样式表)
- 3.2、为什么使用CSS
- 3.3、CSS作用
- 3.4 CSS的基本结构
- 3.5选择符
-
- 1.标签选择符
- 2. id选择符
- 3.类选择符
- 4.通配符选择器
- 5.包含选择符
- 6.选择符分组
- 7.标签指定式选择符
- 8.8．组合选择选择符
- 3.6 css 的引入方式
-
- 1.行内样式
- 2.内嵌样式
- 3.外链样式
- 4.导入样式
- 3.7 CSS样式的特点
-
- 1、继承：
- 2、层叠：
- 3.8 伪类
前言
在大众的眼中前端就是做做网页，做做界面，麻烦但是没有什么难度。涉及到的知识也不过只有HTML，CSS，JAVAScript等没有什么难度的知识，但事实并不是这样。 前端涉及到的知识远不如此，前端要需要的交互问题所以各种网络协议如 Http UDP TCP 等也就必须要掌握，在前端与后端的交互上的流畅你也必须要掌握一门应用级语言如Java Python 等 数据结构和算法是一系列交互与运行的基础，所以学习前端技术不仅只是学习设计网页的html语言，也必须要懂得前后台交互的相关知识。一、前端技术的基础是什么
HTML+CSS+JAVASCRIPT
HTML又被称为超文本语言html5—XHTML HTML4.0版本等，在制作web网页时HTML语言常被用来制作网页的结构
CSS 层叠样式表 一般用于一个界面的布局表现
JAVAscript 脚本语言 用来决定一个网页有哪些交互行为
如果把一个web网页分解成三层那么可以分为
结构层：HTML 超文本语言
表现层：CSS 层叠样式表
行为层：javascript 脚本语言
以上三种语言可以算是web前端的基础
二、前端基础学习
1.HTML
1.1HTML文件的创建
1.首先我们用到的Sublime Text 3的编程工具，在创建文件之前应该做好准备，从一开始养成一个良好的习惯我们会一生受益。首先在已知的目录下面创建自己的工程项目文件夹，然后在文件夹中创建图片文件夹（image）视频文件夹（video）层叠样式表文件夹（css）脚本语言文件加（js）。正式学习之前的准备工作就做好了。
2.创建HTML文件保存时后缀加上.html如：book.html
3.创建好HTML文件之后，在代码栏输入！再按下tab键就得到了
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
body>
html>
1.2HTML文档的结构
!DOCTYPE 声明
表示声明文档的类型为htm- ---MIME类型l。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
在HTML 4.01 中， 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 声明，分别是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
（MIME类型：所有的文件在网络上 用于显示还是用于下载都存在自己响应的类型）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
body>
html>
1.3HTML标签
html的标签类型大致分为两种：单标签，双标签。
单标签 如： 等；
换行
双标签 如：等；
Tag -----标签
Meta -----源 metadata 源数据
元素节点
Lang=“utf-8” 属性节点
文本 文本节点
乱码一般出现原因：字符集不统一
当我们在国内打开的浏览器的默认的编码格式都是GBK 需要把原有的GBK的格式修改成全球统一的格式 —UTF-8
1.4常用标签
标题
HTML 标题（Heading）是通过
标签来定义的.
<hn> 标题hn>
<hn> 标题hn>
n=1-6
标尺线
<hr>
段落
行的控制
<p>内容< /p>
align 属性节点
3个值 left center right
区域划分
<div> 内容div>
等
在html中表示颜色的三种方式：
rgb(255,255,255) 0-255 r-red g-green b- blue
#000000~#ffffff 以十六进制的方式去表示颜色
使用颜色的单词 英文 如：pink orange yellow black white gold
Body 属性
text 用于表示正文的文本颜色
bgcolor 用于表示背景颜色
background 用于表示文档的背景图像 一般不会使用图片作为页面的背景
相对路径时 ./ 当前路径 …/ 当前路径的父路径
1.5表单
表单是一个包含表单元素的区域。
表单元素是允许用户在创建的表单中输入内容,比如：文本(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。（常用来如：登录，注册界面等；）
表单使用表单标签 来设置:
<form action="" method="">
<input>
form>
在表单中的 常用input类型
Text ----文本框
Password ----密码框
Checkbox —多选框
Radio ----单选框
Submit ----提交按钮
Reset ----重置按钮
File -----文件上传
Method
Method的提交方式来源于HTTP协议
一共可以大致分为9种
1.get 请求指定页面的信息，并返回实体主体（幂等）
2.post 向指定资源提交数据进行处理请求，数据存在请求体（非幂等）
3.head 类似get，但不返回具体内容，用于获取报头（幂等）
4.put 完整替换更新指定资源数据，没有就新增（幂等）
5.delete 删除指定资源的数据（幂等）
6.patch 部分更新指定资源的数据（非幂等）
7.options 允许客户端查看服务器的支持的http请求方法
8.connect 预留给能将连接改为管道的代理服务器
9.trace 追踪服务器收到的请求，用于测试或诊断
常用的方式只有get与post两种请求方式
1.Get请求和post请求有什么区别？ 面试题
安全：默认为get方式
Post请求提交时路径上没有属性的信息 相对安全
Get 请求提交路径上存在属性的信息 不安全
因为get请求在路径的地址上存在属性值 url的地址是有限制的
最大为64kb
2.什么时候使用get请求 什么时候使用post请求？
要根据数据性质 — 热数据 安全度不重要的数据 使用get和post都可以
如果数据的性质需要安全性比较高时 那么一定要使用post
在写文件上传的功能时 请求必须是post的提交方式
1.6 a标签
html页面跳转：
- a标签进行页面跳转 属于get请求方式
超链接标签，一般用于网页之间的跳转
- 使用a标签进行外部跳转 ----外链接
- 使用a标签跳转到网页的内部 ----锚点
<a src=" 网页地址" >可点击的显示文本a>
Body中有三个关于a标签的另外三个属性
alink 活动链接（当鼠标点击时）
link 未访问链接（当台pc未访问过的链接）
vlink 访问链接（当台pc已访问过的链接）
1.7图片标签
<img src=" 图片地址" width="宽" height=" 高">
用于页面中图片的导入
在图形标签中
usemap 用于做位图 map ----映射
map 位图
area 规定位图区域
<img src="./image/1.jpeg" alt="图片" usemap="#first" border="1px">
<map id="first" name="first">
<area
shape="circle"
coords="230,280,50"
href="http://www.baidu.com/">
area>
map>
1.8 列表
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用
<ul>
<li>Coffeeli>
<li>Milkli>
ul>
HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
如；
<ol>
<li>Coffeeli>
<li>Milkli>
ol>
定义列表
<dl> 表示定义列表
<dt> 定义的项目
<dd> 定义项目的描述
reversed 降序
start 起始计数
type 数字 字母A-Z 罗马字符I II III IV V VI VII VIII
1.9 多窗口框架 frameset 4.0 版本 H5版本
<iframe src="URL">iframe>
多窗口的框架标签 里面的每一个窗口都是一个单独的frame
注意：标签不能和body标签连用
1.10 常用标签 特殊意义的标签
用于描述地址 默认斜体
用于描述文章的标题
为了让程序员能够通过代码看清楚代码的含义
并没有什么实际的含义
类似于这样的标签他们的作用 和div是相似的 提高代码的阅读能力
内联元素 XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本 html 也可以存在 任意的单词的标签 xml 标签 可以用任意单词来进行定义的 CSS：全名Cascading Style Sheet 又被称为层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 在制作网页时可以实现内容与样式的分离，便于团队开发 样式复用，减少代码量，便于网站的后期维护 页面样式的精确控制，让页面更精美 页面外观美化 布局和定位 在style标签中定义你需要的样式 标签选择符： 以标签命名的选择符 定义所有p标签的样式 id选择符: 通常用于描述一个标签具有唯一的样式 定义id为first的所有便签 类选择符也叫class选择符 类选择符：通常用于修饰一组或者一系列具有相同样式的标签 中p属于one类，定义所有属于类one的标签 选择符的优先级：行内 > Id > class>标签 对页面中所有的标签都起作用 语法 e1 是e2的父节点标签 标识： , 逗号 标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符 前面的1-7种组合性使用 在 标签中写入style属性 不需要其他定义 写在html文件中 用link标签把；另外的css格式的文件链接起来 是内嵌样式和外链的样式的混合 （ 不太常用） 优先级：在运用四种样式时的优先级是不固定的，采取就近原则以哪种方式举例修饰的目标最近，那么谁的优先级就越高 网页中子元素，将继承父元素的样式 网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式 Body 标签 link alink vlink 未访问的链接 已访问的链接 鼠标移动到链接上 鼠标按下到链接上
块状元素
内联元素
通常用于修饰文本 默认不具有任何样式 可以通过css来添加样式1.11 视频和音频
视频
音频
用法类似于img标签<video src="地址" controls="controls">video>
<！---- controls是添加控制单元 ---->
<audio src="地址"
controls="controls">audio>
2 XHTML
从语法上对html进行更严谨的规范。
默认把他们当成文本标签
DTD的命名规范 规范了标签的内容3.css(层叠样式表)
3.1 什么是CSS (层叠样式表)
3.2、为什么使用CSS
3.3、CSS作用
3.4 CSS的基本结构
<style type="text/css"> 样式style>
3.5选择符
1.标签选择符
p{
color:gold;
}
2. id选择符
标识是 ##first{
color:green;
}
注意#后为自己定义无固定3.类选择符
标识是 ..class{
color:green;
}
<p class="one">bluep>
<p class="one">yellowp>
4.通配符选择器
*{ color:red;}
一般情况下 在css页面刚开始的时候 描述通用属性5.包含选择符
e1 e2{属性：值}
标识：空格6.选择符分组
用它可以替代 通配符选择符body,h1,div,ul,li{
color:red;
}
7.标签指定式选择符
8.8．组合选择选择符
h1.p1,h1#content{}
3.6 css 的引入方式
1.行内样式
如：<h1 style="color:red">我只要你h1>
2.内嵌样式
<style type="text/css">
p{
color:gold;
}
#first{
color:green;
}
.blue{
color:blue;
}
style>
3.外链样式
<link rel="stylesheet" type="text/css" href="./css/1.css">
4.导入样式
<style type="text/css">
@import url(./css/1.css);
style>
3.7 CSS样式的特点
1、继承：
例如：要控制段落p中的文字大小，可以直接给body标记加样式。2、层叠：
后面定义的样式，会覆盖前面定义的样式3.8 伪类
在css有相应的伪类去替代他们a:link{color:#ff0000}
a:visited{color:#00ff00}
a:hover{color:#ff00ff}
a:active{color:#0000ff}