概述

1.什么是前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页，随着互联网技术的发展，html5,css3,前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的体验。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript.

广义前端：所有用户可以直接看见并交互的界面
狭义前端：浏览器上运行的用户交互界面

2.前端开发的技术栈

HTML

超文本标记语言 Hyper Text Markup Language
"超文本"就是指页面内可以包含图片，链接，甚至音乐，程序等非文字元素
负责完成页面的结构

CSS

级联样式表 Cascading Style Sheet
负责页面的风格设计，样式，美观

JavaScript

浏览器脚本语言，可以编写运行在浏览器上的程序
编程语言
负责编写页面特效，调用浏览器的API（BOM），操作改变页面内容（DOM），从后端获取数据（ajax），渲染页面等
JQuery是javascript的一个库
Vue,Angular,React等是javascript框架

第一章前端三剑客（HTML、CSS、JavaScript）

HTML

html为页面前端的主体，由标签，指令，转义字符（实体）组成。

标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统标签，自定义标签

指令：被尖括号包裹，由!开头的标记。eg:<!doctype html> <!-- -->

转义字符：被&与;包裹的特殊字母组合或#开头的十进制数。eg:< > &nbsp;

1.1 HTML5

是用来制作网页的标记语言
是超文本标记语言
是标记语言，不需要编译，直接由浏览器执行
是一个文本文件，包含一些HTML元素，标签等
是大小写不敏感的，HTML与html是一样的
是由W3C的维护的
是通向web技术世界的钥匙

1.2 发展历史

① html1：在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）

② html2：1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

③ html3.2：1997年1月14日，W3C推荐标准

④ html4.0：1997年12月18日，W3C推荐标准

⑤ html4.01(微小改进)：1999年12月24日，W3C推荐标准

⑤ html5：2014年10月28日，W3C推荐标准(h5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。)

1.3 html5的优点

提高可用性和改进用户的友好体验
有几个新的标签，这将有助于开发人员定义重要的内容
可以给站点带来更多的多媒体元素（视频和音频）
可以很好的替代FLASH和Silverlight
当设计到网站的抓取和索引的时候，对于SEO很友好
将被大量应用于移动应用程序和游戏
可移植性好

1.5 HTML标签

标签是HTML中最基本单位，也是最重要组成部分
通常要用两个角括起来：<和>
标签都是闭合的（两种形式：成对或不成对）
双标签（成对）：<标签名>内容</标签名> 如:<table></table>即分起始和结束
单标签（不成对）：<标签名/> 如 <br/> ,<hr/>
标签是大小写无关的，<body> 跟 <BODY>表示意思是一样的，标准推荐使用小写，这样符合XHTML标准
对于HTML标签来讲，最重要的是语义

1.6 HTML标签属性

HTML属性一般都出现在HTML的开始标签中，是HTML标签的一部分

标签可以有属性，它包含了额外的信息，属性的值一定要在双引号中
标签可以拥有多个属性
属性由属性名和值成对出现

<标签名属性名1=“属性值”，属性名2=“属性值”...属性名N=“属性值”>
输出内容
</标签名>

1.7 HTML实体

1.8 文档类型

<!-- 标签语法规范 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

CSS

标记语言为非编程语言，不具备编程语言具备的程序逻辑
css为前端页面的样式，由选择器、作用域与样式块组成

选择器：由标签、类、id单独或组合出现
作用域：一组大括号包含的区域
样式块：满足css连接语法的众多样式

2.1 css发展史

① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

② 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

③ 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

④ 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

⑤ CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

JavaScript

实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑

　js为前端页面的脚本，由DOM、BOM与ES组成

DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
BOM：浏览器对象模型(Browser Object Model)，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
ES：ES是一种开放的、国际上广为接受的脚本语言规范(ECMAScript)，正式名称为 ECMA 262 和 ISO/IEC 16262，是宿主环境中脚本语言的国际 Web 标准。

3.1 js发展史

    它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。

    Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。

    发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

3.2 js框架

Angular、React与Vue等均是JavaScript主流框架

第二章第一个页面

一、基础模板

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>第一个页面</title>

    </head>

    <body>

    </body>

</html>

模板解读

- DOCTYPE：指定文档类型，规定html标签语法

- html：文档根标签，标注着文档(页面)的开始与结束

- head：文档头标签，可以引用脚步文件、指定样式表、书写代码逻辑块、提供元信息

- body：文档主体标签，包含文档所有文本与超文本内容

- title：文档tag标题标签，设置文档tag的标题内容

ps:html标签的lang属性值 en | zh（zh-cn）

二、其他核心标签

2.1 meta标签（元标签）

字符编码

<meta charset="utf-8">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

SEO

<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">

<meta name="description" content="80字以内的一段话，与网站内容相关">

移动适配

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2.2 link标签（链接标签）

外联样式表

<link rel="stylesheet" type="text/css"  href="style.css" />

文档tag图标

<link rel="shortcut icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico" />

2.3 style标签（样式标签）

内联样式表

<style></style>

2.4 script标签（脚本标签）

<script type="text/javascript"></script>

三、html常用标签

3.1 无语义标签

<div></div>

<span></span>

3.2 常用语义标签

<hn></hn> 标题

<p></p> 段落

<pre></pre> 原文本

<br /> 换行

<hr /> 分割线

3.3 文本标签

<i></i> 斜体字

<em></em> 斜体字，表示强调

<b></b> 粗体字

<strong></strong> 粗体字，表示强调(语气更强)

<del></del> 删除的文本

<ins></ins> 插入的文本

<sub></sub> 下标字

<sup></sup> 上标字

<ruby>

    拼音<rt>pinyin</rt>

</ruby> 中文注音，h5新增

3.4 其他标签

<section></section> 块

<small></small> 小号字体

1、单|双标签

- 单标签：单标签在自身标签标识结束，主要应用场景为功能性标签

- 双标签：双标签有成对的结束标识，主要应用场景为内容性标签

2、行|块标签

- 行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示

- 块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行

3、单一|组合标签

- 单一标签：单独出现，表示具体的功能或展示具体的内容

- 组合标签：配合使用，才能产生相应的内容与效果

标签分类

四、CSS三种引入方式

4.1 行间式

<div style="width: 100px; height: 100px; background-color: red"></div>

4.2 内联式

<head>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

4.3 外联式

file: my.css

div {

    width: 100px;

    height: 100px;

    background-color: red;

}

file: my.html

<head>

    <link rel="stylesheet" type="text/css" href="css/my.css" />

</head>

三种方式的优先级

与样式表的解析顺序有关

五、样式、长度、颜色

5.1 基本样式

<head>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: red;

        }

    </style>

</head>

5.2 长度

- px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便

- mm：毫米

- cm：厘米

- in：英寸

- pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；

- em：相当长度，通常1em=16px，应用于流式布局

5.3 颜色

- rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）

- rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）Alpha为透明度

- hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness） 色度 饱和度 亮度
- hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
- #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc

六、常用样式

6.1 字体样式

- font-family：字体族科，多值用于备用，以,隔开
　　　　　　　　css语法：空格隔开为多个值赋值，逗号隔开为一个值多值赋值

    font-family: "STSong", "Arial";

- font-size：字体大小

- font-style： 字体风格  normal \| italic \| oblique

- font-weight：字体重量 normal \| bold \| lighter \| 100~900

- line-height：行高   行高设置大于等于字体大小，字体在行高中垂直居中显示

- font：字重 风格 大小/行高 字族

6.2 文本样式

color：文本颜色
text-align：横向排列left 居左 | center 居中 | right 居右

left 居左 | center 居中 | right 居右

vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐

sub：垂直对齐文本的下标

super：垂直对齐文本的上标

top：将支持valign特性的对象的内容与对象顶端对齐

text-top：将支持valign特性的对象的文本与对象顶端对齐

middle：将支持valign特性的对象的内容与对象中部对齐

bottom：将支持valign特性的对象的文本与对象底端对齐

text-bottom：将支持valign特性的对象的文本与对象顶端对齐

text-indent：字体缩减
text-decoration：字划线

underline | line-through | overline | none

letter-spacing：字间距
word-spacing：词间距
word-break：自动换行

normal：默认换行规则

break-all：允许在单词内换行

6.3 背景样式

background-color：颜色
background-image：图片

background-image: url(bg.png);

background-repeat：重复，平铺

repeat | no-repeat | repeat-x | repeat-y

background-position：定位

top | bottom | left | right | center

水平位置：左中右 
垂直位置：上中下
定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center

background-attachment：滚动模式

scroll | fixed

父级设置属性，子集内容超出父级范围

七、css选择器

7.1 基础选择器

7.1.1 通配选择器

* {

    border: solid;

}

匹配文档中所有标签：通常指html、body及body中所有显示类的标签

7.1.2 标签选择器

div {

    background-color: yellow;

}

匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span

7.1.3 类选择器

.red {

    color: red;

}

匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配

7.1.4 id选择器

#div {

    text-align: center;

}

匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配

总结

1. 通配选择器一般用于整体reset操作（reset操作：清除系统自定义样式）

*{

  margin:0;

}

2.标签与id选择器运用场景并不多，一般不提倡采用id选择器进行布局

3.类选择器为布局首选（建议基本全用class选择器进行布局）

7.2 基础选择器的优先级

- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高

- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高

- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

7.3 组合选择器

7.3.1 群组选择器

div, span, .red, #div {

    color: red;

}

- 一次性控制多个选择器

- 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

7.3.2 子代（后代）选择器

子代选择器用>连接

body > div {

    color: red;

}

后代选择器用空格连接

.sup .sub {

    color: red;

}

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器

- 每一个选择器位均可以为任意合法选择器或选择器组合

- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

7.3.3 相邻（兄弟）选择器

相邻选择器用+连接

.d1 + .d2 {

    color: red;

}

兄弟选择器用~连接

.d1 ~ .d3 {

    color: red;

}

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器

- 每一个选择器位均可以为任意合法选择器或选择器组合

- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

7.3.4 交集选择器

<div class="d" id="dd"></div>

div.d#dd {

    color: red;

}

<div class="d1 d2 d3"></div>

.d1.d2.d3 {

    color: red;

}

7.4 组合选择器优先级

- 组合选择器优先级与权值相关，权值为权重和

- 权重对应关系

选择器	权重
通配	1
标签	10
类，属性	100
id	1000
!important	10000

- 选择器权值比较，只关心权重和，不关心选择器位置

- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

7.5 属性选择器

- [attr]：匹配拥有attr属性的标签

- [attr=val]：匹配拥有attr属性，属性值为val的标签

- [attr^=val]：匹配拥有attr属性，属性值以val开头的标签

- [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签

- [attr*=val]：匹配拥有attr属性，属性值包含val的标签

属性选择器权重等价于类选择器

front-end——HTML5/CSS3基础的更多相关文章

HTML5/CSS3基础
1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...
HTML5/CSS3 第一章基础
HTML5/CSS3基础 1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语 ...
《HTML5与CSS3基础教程》笔记
以下笔记摘要页码基于人民邮电出版社 2013年1月第1版英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...
第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
【02】HTML5与CSS3基础教程（第8版）（全）
[02]HTML5与CSS3基础教程(第8版)(全) 共392页. (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完. [美]elizabeth cast ...

随机推荐

Python并发编程理论篇
Python并发编程理论篇前言其实关于Python的并发编程是比较难写的一章,因为涉及到的知识很复杂并且理论偏多,所以在这里我尽量的用一些非常简明的语言来尽可能的将它描述清楚,在学习之前首先要记住 ...
day06获取用户名
可以通过微信内置的接口,调用微信名和微信图片 1.xxx.wxml ===================================== <button open-type="g ...
阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之调试工具ab(apache bench)
ab 测试工具,全称是 apache bench ,是 Apache 提供的一款测试工具,具有简单易上手的特点,在测试 Web 服务时非常实用. ab 可以在 Windows 系统中使用,也可以在 L ...
Sass简单、快速上手_Sass快速入门学习笔记总结
Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...
html实现邮箱发送邮件_js发送邮件至指定邮箱功能
在前端开发中,JavaScript并没有提供直接操作Email邮箱的功能方法,但是遇到这样的需求,我们应该如何实现js发送邮件至指定邮箱功能呢?下面列举能够在通过前端实现邮件发送的几种方式: 方式一: ...
赞！7000 字学习笔记，一天搞定 MySQL
MySQL数据库简介 MySQL近两年一直稳居第二,随时有可能超过Oracle计晋升为第一名,因为MySQL的性能一直在被优化,同时安全机制也是逐渐成熟,更重要的是开源免费的. MySQL是一种关系数 ...
HDU 5969 最大的位或（思维，贪心）
HDU 5969 最大的位或题目大意 B君和G君聊天的时候想到了如下的问题. 给定自然数\(l\)和\(r\) ,选取\(2\)个整数\(x,y\)满足\(l <= x <= y < ...
数组中出现次数超过一半的数字（剑指offer-28）
题目描述数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...
js返回上一页并刷新思路
在网上找了很多办法,比如window.history.go(-1):window.history.go(0): 试了下根本没用(不知道是不是我哪里写错了),想着在上一个页面写一个关闭页面并刷新的方法, ...
Pop!_OS安装与配置（三）：系统美化
Pop!_OS系统美化首先上效果图,美化完是这样的: 那么接下来就一步步进行美化吧主要参考:Ubuntu 18.04 美化配置--leo.rd 1.安装tweak sudo apt install ...

front-end——HTML5/CSS3基础

概述