1、什么是前端
1、什么是前端
前端即网站的前台的部分,运行在PC端,移动端等浏览器上展现给 用户浏览的网页。
2、前端开发概述
前端开发也叫做web前端开发,是为B/S架构的软件提供界面解决方案的。
3、核心技术
前端的开发中,在页面布局时,HTML讲元素进行定义,CSS对展示的元素进行定位,在通过JavaScript实现相应的效果和交互。
HTML
指的是超文本标记语言(Hyper Text Markup Language) ,这个也是我们网页最常用普通的语言了,现在有了5.0版本,即HTML5.
Css
级联样式表简称“CSS",通常又称为“风格样式表(style sheet)”,他是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
JavaScript
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
二、HTML
1、了解HTML
我们可以通过查看源代码的形式, 看到制作出来的网页
通过仔细观察网页源代码我们可以知道: 制作网页的语言是用 “<” “>” 括起来的. 有些是成对出现,有些不是 -----> 我们一般称这样用尖括号括起来的语言为 HTML
HTML 是 Hyper Text Markup Language 的首字母简写, 意思是超文本标记语言, 超文本指的是超链接, 标记指的是标签, 是一种用来制作网页的语言, 这种语言由一个个的标签组成, 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm
2、HTML文档的基本结构
HTML文件的基本结构为:
注意:
HTML语言中注释的写法:
快捷键:ctrl + /
取消注释:ctrl + /
说明:
- 基本上所有的html文件都是按照这样的格式作为模板进行开发.
- head标签的主要作用:
- 网页的设置
- 资源的引用
- head标签中的内容一般不会显示在网页上.
- body中的内容通常用于网页显示
3、快速创建HTML文档
我们可以新建一个.html文件, 在文件中快速创建基本标签:
快速创建的方法是: 在文件中敲一个 " ! " 然后按 tab 键 即可:
我们可以看到,这样就可以快速的创建一个基本的html文档了, 我们可以在这个文档中快速的编写代码
说明:
- lang=“en”: 声明这个网页的语言是英文, 如果是中文则为: lang=“zh-CN”, 主要是做统计使用, 国内网页一般不关心这个值.
- 第五行的主要作用是: 让网页在移动端观看时, 网页不缩放.
- 第六行的主要作用是: 如果网页在 IE 浏览器上观看, 让 IE 以最高版本显示网页
4、HTML标签
1、认识标签:
在HTML语言中,用尖括号括起来的部分,我们称为标签。
2、标签的了解:
- 成对的标签
- 单个的标签
无论是成对的标签还是单个的标签,都需要用 " < > " 括起来
例如:
由以上图我们可以知道:
-
<html> <head> <body> <title> <ul> <li> <a>这样的标签是成对的
-
<meta> <hr> <img> 这样的标签是单个的
同时: 由上面的代码我们也可以获取到:
标签是可以嵌套的: 例如 上面的代码中 html 标签, 嵌套了 head 标签和 body 标签.
body 标签又嵌套了 ul 标签, ul 标签嵌套了 li , li 嵌套了 a标签等等.
类似于这样标签中添加标签的写法,我们称之为标签的嵌套.
3、标签的属性
有些标签内部这样设置
-
<img src="../day001/image.png" alt="">
-
<div class="box"></div>
其中 src=" " 和 alt=" " 这部分内容, 我们称之为当前标签的属性.
说明:
- 有些标签的属性是相同的, 有些标签的属性是不同的.
- 通过标签的属性,我们可以给当前的标签设置不同的内容.
总结:
- 我们只需要知道标签的尖括号内部添加的设置是属性即可
4、标签分类
注意: 在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签
标签按照显示的不同, 可以分为两类:
- 块元素 (行元素)
- 内联元素 (行内元素)
块元素特点:
-
单个块元素在浏览器中默认独占一行
-
两个块元素不能够在一行显示,他们会自动换成两行显示
-
块元素可以设置宽高等属性
内联元素:
- 多个内联元素可以再一行显示
- 内联不能够设置宽高,设置了也没用,不会有效果
- 内联元素的宽高有他们本身内容多少来支撑,内容多,宽高自动增加
常用块元素标签:
1、标题标签
表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小
-
<h1>一级标题</h1>
-
<h2>二级标题</h2>
-
<h3>三级标题</h3>
-
<h4>四级标题</h4>
-
<h5>五级标题</h5>
-
<h6>六级标题</h6>
2.段落标签:
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
-
<p> 既然你诚心诚意的问了, 我们就大发慈悲的告诉你! 为了防止世界被破坏, 为了守护世界的和平; 贯彻爱与真实的邪恶, 可爱又迷人的反派角色~~ 武藏! 小次郎! 我们是穿梭在银河的火箭队!白洞,白色的明天在等着我们!! 就是这样~喵~~~~ </p> 段落标签中如果想要强制换行,需要使用<br>标签, 这个标签是个单个标签,所以只有一个. 另外在html中, 如果想要写大于号, 小于号, 或者空格等, 需要使用代码来实现, 这样更加优雅~ 代码实现大于号: > 代码实现小于号: < 代码实现空格:
3、通用块容器标签div
表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式
<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
<h3>自我介绍</h3>
<p>
姑娘貌美一枝花,才学素养人品佳。
活泼开朗不八卦,头脑敏锐有想法。
踏实奋进不做假,乐于求知肯深挖。
舞文弄墨擅策划,慧心妙舌喜表达。
交友广泛爱分享,微博日日落不下。
四年深造象牙塔,学习实践两手抓。
只待应届招聘季,我花开后百花杀。
</p>
</div>
常用内联元素标签
1、超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网站</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt=""></a>
<a href="#">默认链接</a>
<a href="http://www.itcast.cn">原来的窗口打开界面</a>
<a href="www.baidu.com" target="_blank">新窗口打开界面</a>
说明:
-
a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
-
不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可
-
如果想要跳转到当前页面的最上方时, 可以使用 #
-
a 标签有 target 属性
- 如果不设置该属性, 在当前页面打开新页面
- 如果设置该属性, 则会在新窗口中打开新页面
2、通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式
我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:
例如: 这是一段文字,其中梅总需要强调,所以我们可以使用span来完成强调的操作.
<p>这是一个段落文字, 段落文字中有<span>特殊标志或者样式</span>的文字</p>
3、图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
<img src="images/pic.png" alt="图片">
说明:
- src属性主要是添加要展示的图片地址
- alt属性的作用:
- 图片加载失败时, 显示的提示信息
- 搜索引擎在收录图片时, 根据这个属性值来收录图片
- 制作无障碍网页, 方便盲人的读屏软件读取.
总结:
- HTML 整体是由标签组成的, 各个标签的功能很多都是重复的
- 同学们学习标签用法的时候多多练习即可
- 标签整体分为: 块级标签 和 行内标签
- 块级标签可以设置宽高值, 独占一行
- 行内标签自动设置宽高值, 一行内可以有多个
- 一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.
- 特殊情况, 需要记住: p 标签不能嵌套 div
- a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]
- 标题标签用于设置标题, 共有6级
- div就是一个无色透明的容器,看不见,摸不到
- img标签主要用于设置图片
- p 标签就是paragraph(段落) 通常用于包裹段落
- span是一个行内元素通常用于p标签内部,个别文字设置时使用.
CSS介绍
1.CSS基本语法
CSS使用格式:
选择器 {
属性 : 值; 属性 : 值;
…
}
说明:
-
选择器是将样式和页面元素关联起来的名称
-
属性名是希望设置的样式属性, 每个属性有一个或者多个值
-
属性和值之间用冒号隔开
-
一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
例如:
div {
width: 100px;
height: 100px;
background: gold;
}
2.CSS引入方法
1、内联式:
通过标签的 style 属性, 在标签上直接写样式.
<div style="width:100px;height:100px;
background:red;">
这是个div标签
</div>
2.1嵌入式
通过 style 标签, 在网页上创建嵌入的样式表.
<head>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
3、外联式
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">
3、CSS选择器
CSS选择器: 帮助我们找寻标签, 找到之后 添加样式
CSS 的四种基本选择器:
- 通用选择器 ( * )
- 标签选择器 ( 标签名 )
- 类选择器 ( class )
- id 选择器 ( id )
CSS 组合选择器:
- 多元素选择器
- 后代选择器(层级)
- 子元素选择器
- 兄弟选择器
CSS 属性选择器:
- 属性选择器
3、1基础选择器:
1. 通用选择器
使用格式:
* {
属性名: 值;
属性名: 值;
...
}
例如:
* {
margin: 0px;
padding: 0px;
}
有些标签自动会增加一些内边距和外边距等样式, 我们可以使用这个选择器把默认的都给去掉
2、标签选择器:
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
通用格式:
标签名 {
属性名: 值;
...
}
例如:
CSS部分:
<style>
div {
color: red;
}
p {
font-size: 18px;
}
</style>
HTML部分:
<div>这里是html部分</div>
<p>html区域的p标签</p>
一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意
3、类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类
应用灵活, 可复用, 是css中应用最多的一种选择器
常见格式:
.类名 {
属性名: 值;
...
}
举例:
CSS部分:
<style>
.blue {
color: blue;
}
.header {
font-size: 19px;
}
.box {
color:orange;
}
/* 这是CSS注释的写法,可以作为单行注释,也可以作为多行注释 */
/* 针对下面的代码, 如果我们想单独选中div, 则可以这样写: */
div.blue {
/*文字变为斜体*/
font-style: italic;
}
</style>
HTML部分:
<div>这是div标签</div>
<div class="blue">这个标签的字体颜色会变成蓝色,是因为class选择器</div>
<p class="blue">这是div下面的p标签,也会变成蓝色,因为用的是同样的选择器,名字也一样</p>
<h3 class="blue header box">这个标签有好多个class类名, 则都会加载不同类名下面的样式, 形成重叠效果</h3>
<p class="header">这个标签的类名和上面的有一样的,所以上面的header样式也会加载在这个标签上</p>
4.ID选择器
通过 id 名来选择元素,元素的 id 名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id 名一般给程序使用,所以不推荐使用id作为选择器。
使用格式:
#ID名 {
属性名: 值
}
举例:
CSS部分:
<style>
#box {
color:red
}
#box1 {
background:blue;
}
</style>
HTML部分:
<p id="box">这是第一个段落标签</p>
<p id="box1">这是第二个段落标签</p>
<p>这是第三个段落标签</p>
多元素选择器
1、后代选择器
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
使用方式:
E F {
属性名: 值;
属性名: 值;
...
}
2、多元素选择器
同时匹配所有 E元素 和 F元素, E和F之间用逗号分隔:
使用格式:
E,F {
属性名: 值;
属性名: 值;
...
}
例如:
CSS部分:
<style>
.box,p {
color: red;
}
</style>
HTML部分:
<div class="box">这是一个美丽的div</div>
<p>美丽div下面的段落标签p</p>
3、子代选择器
E > F 匹配所有 E元素的 子元素F
使用格式:
E > F {
属性名: 值;
属性名: 值;
...
}
例如:
CSS部分:
<style>
div>p {
color: red;
}
div>div{
font-size:30px;
}
/* 选中了a标签, 但是div内部的内容是没有改变的,说明可以确切的选中某一个 */
.box>a {
background: pink;
}
</style>
HTML部分:
<div class="con">
<p>这是div元素的子集p元素</p>
<div class="box">
div标签的内容部分
<a href="#">第二个div的子集:a元素</a>
</div>
</div>
4、毗邻选择器
匹配所有紧随 E元素 之后的同级元素F (向下寻找)
使用格式:
E + F {
属性名: 值;
属性名: 值;
...
}
例如:
CSS部分:
HTML部分:
<div>第一个div,啦啦啦~</div>
<div class="box">第二个div,啦啦啦~</div>
<div>第三个div,啦啦啦~</div>
3.3属性选择器
1. 第一种属性选择器的使用
使用方法:
[attr] {
属性名: 值;
属性名: 值;
...
}
[title] {
}
例如:
CSS部分:
<style>
[name] {
color: red;
}
</style>
HTML部分:
<div> hello1 </div>
<div name="peter"> hello1 </div>
<div title="haha"> hello1 </div>
<div> hello1 </div>
4、CSS进阶
布局常用样式
属性 作用 举例
width 设置元素(标签)的宽度 width: 200px;
height 设置元素(标签)的高度 height: 200px;
background 设置元素背景色或者背景图片(详看下面) background: pink;
border 设置元素四周的边框 border: 1px solid pink;
border-top 设置元素顶部边框 border-top: 1px solid/ dashed pink;
border-left 设置元素左边边框 border-left: 1px solid pink;
border-right 设置元素右边边框 border-right: 1px solid pink;
border-bottom 设置元素底部边框 border-bottom: 1px solid pink;