前端开发最核心技术

2022-05-16 13:42:35 浏览数 (1)

一、简介

1、前端开发最核心技术

我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。

前端开发最核心的3个技术

(1)HTML是什么?

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

(2)CSS

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

(3)JavaScript

JavaScript是一门脚本语言。

2、前端开发其他技术

前端技术最核心的是HTML、CSS和JavaScript,但是对于一个真正的前端工程师来说,哪怕你精通这三个,你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种,还需要学习Ajax、SEO等。

(1)Ajax

Ajax,即“Asynchronous Javascript And XML(异步JavaScript和XML)”,是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个页面。

Ajax是前后端交互的技术,主要实现在前端。(不懂?!没关系,我们在Ajax教程中会讲解到)

(2)SEO

SEO,即“Search Engine Optimization(搜索引擎优化)”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式(国内常见的搜索引擎有百度、360、搜狗等)。

简单来说,你建好了网站并不代表你网站就能被搜索引擎搜索到,我们一般使用百度搜索资料时,搜索出来的网页有很多,但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO,就是为了我们的网站能排在搜索结果的前面,这样你的网站才会有流量。你做网站,相信你也是想让你网站有更多人浏览的吧。

二、基础内容

1.基础总结

1、从web1.0到web2.0,网页制作已经变为前端开发了。现在对于前端开发,你要学的不是什么“网页三剑客”,而是“HTML CSS JavaScript”;

2、前端技术核心元素的是HTML、CSS和JavaScript,但是我们还要学习一些Ajax、SEO知识;

3、前端技术只能开发静态网页,而进一步学习了后端技术,你能开发一个用户交互性更好、功能更加强大的网站;

4、后端技术有ASP.NET(或PHP)、SQL Server等;

5、学习路线:HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门(或PHP入门)→Ajax→ASP.NET进阶(或PHP进阶);

6、学习HTML就是学习各种标签,然后针对你想要的内容来使用相应的标签;

7、HTML标签即“HTML元素”;

8、HTML基本结构:

2.HTML的基本标签

(1)HTML标签

整个网页是从<html>这里开始的,然后到</html>结束。

(2)head标签

head标签代表页面的“头”,定义一些特殊内容,这些内容往往都是“不可见内容”(在浏览器不可见)。

表1 <head>内部标签

代码语言:javascript复制
<head>内部标签    说明
<title>    定义网页的标题
<meta>    定义网页的基本信息(供搜索引擎)
<style>    定义CSS样式
<link>    链接外部CSS文件或脚本文件
<script>    定义脚本语言
<base>    定义页面所有链接的基础定位(用得很少)
<head>的内部标签也非常重要,在前期大家只需要感性认知就可以。

(3)body标签

body标签代表页面的“身”,定义网页展示内容,这些内容往往都是“可见内容”(在浏览器可见)。

后续课程讲解的标签都是在<body>标签内部的各种标签。

3、段落与文字

(一)、段落标签

(1)、段落与文字标签

代码语言:javascript复制
表1 段落与文字标签
标签    语义    说明
<h1>~<h6>    header    标题
<p>    paragraph    段落
<br>    break    换行
<hr>    horizontal rule    水平线
<div>    division    分割(块元素)
<span>    span    区域(行内元素)

(2)、文本格式化标签

代码语言:javascript复制
表2 文本格式化标签
标签    语义    说明
<strong>    strong(加强)    加粗
<em>    emphasized(强调)    斜体
<cite>    cite(引用)    斜体
<sup>    superscripted(上标)    上标
<sub>    subscripted(下标)    下标

0 人点赞