front-end——HTML5/CSS3基础

时间:2024-10-04 21:34:44

概述

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实体

front-end——HTML5/CSS3基础

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的标签 属性选择器权重等价于类选择器