学编程,来源栈;先学习,再交钱
静态页面:HTML / CSS / JavaScript

当前系列: Web开发基础 修改

B站视频地址


虽然学了网络结构,但我们不会去网络布线;

虽然知道了云存储/云计算,我们也不会去配置服务器;

虽然知道了TCP/IP协议,但我们也不会基于该协议干点啥……

Web开发实际上就是做网站,……


HTML

网站实际上是由一个一个的网页组合起来的。

每一个网页本质上都是一个HTML(Hyper Text Markup Language,超文本标记语言)文件(流)。

演示:浏览器上:右键 -> 查看页面源代码,其中包含了:

  • 英文字母和汉字
  • 尖括号(<>)和斜杠(/)
  • 等号(=)
  • 引号(""和'')
  • ……

三个层面理解HTML:

文件格式

网站是什么?是不是由网页组成的应用系统?

那网页又是什么?一个网页,你可以认为它就是一个.html文件

我们有两种方式可以证明:

1)在网页上:右键 -> 查看源代码 -> 另存为,结果会弹出窗口

说明:.htm是.html的简写。

2)我们自己做一个html文件!

演示:

好了,这里给大家看到了传说中的服务器,消除了它的神秘感,希望能对大家的学习有所帮助。

但.html文件本身是可以直接用浏览器打开的(演示)

@想一想@

  • 是不是一定要用浏览器打开.html文件,才会有这些效果?
  • 将.html后缀名改成.txt会怎么样?

猜一猜,试一试,再想一想,为什么?

PS:请大家保持这种“猜测-求证-思考”的学习方法。

标记语言

那.html文件和.txt记事本文件有什么区别呢?

我们将上述文件内容修改一下,再用浏览器打开,看一看效果:

<h1 style="color:red">一起帮·源栈欢迎您!</h1>

你会看到字体变粗变大变成红色,为什么呢?因为:

HTML是Hyper Text Markup Language的缩写,即:超级文本标记语言,所以它也是一种标记语言(但不是编程语言复习:编程语言的特点:变量/分支/循环/函数……)。

或者说,HTML通过“标记”告诉浏览器如何“解析”一个.html文件。上述那些奇奇怪怪的大于(>)小于(<)符号,等号(=)引号("")和英文字母,就是HTML语言的表现形式。

行业标准

站在开发者的角度来说,HTML5是语言;但站在(浏览器)厂商的角度来说,HTML就是标准。(复习:浏览器大战)

PS:其实很多语言也都一样,比如JavaScript、C#和SQL,他们都既是语言,又是标准

HTML从诞生到现在,经历了好几次的标准升级,目前最新的标准是HTML5(有的简称为H5)

HTML5

总体来说,HTML5是一个非常“宽松”的标准。或者说,“容错性”很高。大概来说,它给你一个最标准的写法,但是假设你并没有严格按标准书写,浏览器也能“将就着”解析,比如:

  • 文档结构(声明和html/head/body等),可以没有
  • 结束标签,可以没有
  • 属性值的引号:可以没有!所以,我们上述元素,写出这样也不会有问题:
    <h1 style="color:red">一起帮·源栈欢迎您!
  • 甚至,属性值:都可以没有!试试这是个什么鬼:
        <h1 hidden>一起帮·源栈欢迎您!

另外,HTML5引入了

  • 很多语义标签(并允许自定义标签),为HTML和CSS的分离提供了良好的基础
  • 多媒体(音频视频)标签,让网页不再依赖flash
  • 一些新的API,配合JavaScript,极大的提高了浏览器的前端控制功能

PS:XHTML曾经是HTML5的有力竞争对手,XHTML就主张必须强制使用严格的语法——不符合语法规范的HTML代码,浏览器直接予以报错!你更喜欢哪一种?


CSS

层叠样式表:Cascading Style Sheets

它是在HTML蓬勃发展之后,由W3C,用于页面的美化装饰(布局+样式)

对于一个网页来说,HTML(元素)就是内容,就像原材料;CSS就是呈现,把这些原材料进行装饰美化,合理摆放。

可以做个比方:

  • HTML相当于人的骨骼血肉,
  • CSS就相当于一个人的皮肤衣服,让人漂亮起来
  • JavaScript就相当于人的中枢神经,让人灵动起来

CSS样式的设置,效果其实就和我们在MS office中进行编辑是类似的:

只不过CSS的样式设置是代码形式的。

内容和表现

在上述元素中,我们发现:对于文本的表现形式,h1(变大变粗)和style="color:red"(变红)都发挥了作用——这是由于历史遗留原因造成的。

现在推荐的做法是:

  • 让HTML负责内容,比如:h1
  • 让CSS负责表现,比如:style="color:red"


JavaScript

复习:编程语言

但JavaScript的实际作用是操作HTML和CSS:显示/隐藏、改变、增加、删除……

在Ajax出现之前,一直都是一个非主流(被歧视)的语言,没啥大用,做验证/特效

PS:08年飞哥在重庆面试,面试官给我说,后端已经发展到尽头了,未来是属于前端的……当时我的想法:又想骗我学没人要的JS……

源栈培训 前端 HTML
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Web开发基础 中继续学习:

我们的 特色

  • 面向就业
  • 线上线下结合
  • 同学互助
  • 师生共赢

报班 QQ群:273534701

  • 获取视频资料
  • 要求作业点评
  • 参加阶段性测试
  • 模拟面试