一。 基础知识
Web 1.0 时代
那个时候的网页主要是静态页面,就是指,只能提供给用户浏览而无法与服务器进行数据交互的页面,在那个时代我们的网站开发工具主要是Dreamweaver,Fireworks,Flash ,这三款软件。
Web 2.0 时代
在 web 2.0 时代,网页开始分为“静态页面”和“动态页面”两种,静态页面仅可供用户浏览,而动态页面不仅可以提供给用户浏览,还可以与服务器进行交互,在 web 2.0 时代的“新开发三剑客”就是我们接下来要学的 Html、Css 、JavaScript
Html :是超文本标记语言,它是一门描述性语言
Css:层叠式样式表,是用来控制网页外观的一种技术
JavaScript:是一种嵌入到Html页面中的脚本语言,由浏览器一边解释,一边执行
下面以一个Demo解释三者的区别
需求
在网页上显示 “慕阳源码”
将字体颜色改为红色
当鼠标移入时,将背景颜色改为粉色
综上所述:
Html 控制网页的结构
Css 控制网页的外观
Javascript 控制网页的行为
我们还可以以一个直观的例子来说明,制作网页是盖房子,框架结构是Html 控制,装修是 Css 控制 ,房子中的灯的开关是JavaScript 控制
学习路线
HTML - CSS - JavaScript - Jquery – Html5 - Css3 -Vue.js
其中Html5和Css3,我们放在进阶课中,在明确了我们的学习路线后,我们接下来就来正式学习 Html。
二。 什么是Html
概念
Html 是 超文本标记语言 , 是网页的标准语言,Html不是一门编程语言,它是一门描述性语言
语法
双标签
<标签>内容</标签>
<标签/>
说明
在上一个例子中,
就是一个成对出现的标签,包含一个开始标签和一个结束标签,称为双标签,在浏览器加载到某一个标签时,就会解析这个标签,然后把该标签对应的功能实现出来,比如 使用 它的功能是,使文本加粗,当浏览器加载到这个标签时,就会使文本加粗显示,如下图
图1-1 浏览器解析效果
说明
在Html中还有部分的单标签,比如 <br />,因为单标签较少,我们遇到一个总结一个即可。
总结
学习Html,就是学习各种各样的标签,然后根据需求,使用相应的标签即可。
开发工具
目前前端开发工具有很多,我们本次课程是零基础课程,所以我们使用对于新手比较友好的 HBuilder 进行开发,学到后期时,推荐使用Vscode、WebStorm等软件,开发工具去我的公众号 “慕阳源码”中,在 菜单栏-资料 中的 开发软件 中获取即可 。
三。 基本标签
HTML 结构标签
一个页面有以下四个部分组成
文档声明::表示是一个Html页面
html标签对::告诉浏览器,这个页面是从开始到结束
head标签对::网页的头部,用于定义一些特殊的内容,如页面的标题,引入外部文件等
body标签对::网页的身体,对于一个网页来说,大部分的代码都是在这个标签内部进行编写
注意:
虽然大部分的开发工具都会自动生成Html的结构,但是对于初学者,大家一定要会默写出来,根据英文的中文翻译记忆即可
2. head 标签
从上一个小节中我们知道,head标签是用来定义一些特殊的内容的,只有一些特殊的标签才放在head标签内,其它大部分标签都是放在body标签内的
在Html中,一般来说只有6个标签能放在head标签内
title 标签
link 标签
style 标签
script 标签
meta 标签
base 标签
下面我们来逐个进行说明
2.1 title 标签
作用:定义网页的标题
代码:
浏览器效果:
根据效果图,我们知道了 title 标签的作用是改变浏览器的标题的
注意:
这里只是改变浏览器的标题,而不是指文章的标题
2.2 link 标签
在 Html 中,link 标签用于引入外部样式文件(css文件),这是属于 Css 部分的内容,我们先留一个印象即可
代码:
2.3 style 标签
用于定义标签的 Css 样式,我们先留一个印象即可
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery