您的当前位置：首页正文

前端小知识，前端了解

来源：好走旅游网

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 键即可:

说明：

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中, 如果想要写大于号, 小于号, 或者空格等, 需要使用代码来实现, 这样更加优雅~
  代码实现大于号:  &gt;
  代码实现小于号:  &lt;
  代码实现空格:    &nbsp;

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 标签有 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;

文本常用样式属性

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文