小白如何开始学习编程 | 史上最牛逼的HTML入门 教程
HTML/CSS
lilu
490人收藏 21644次学习

小白如何开始学习编程 | 史上最牛逼的HTML入门 教程

如果你是没有任何基础的小白,想学编程而无从下手,别急,先完成以下三个知识点的学习。

  • HTML 即网页元素的标签
  • CSS 负责网页元素的外观呈现
  • JavaScript 负责网页上的一些交互效果(如登录验证,弹出对话框等)

如果把网页比做成一张美女脸的话,那么HTML就是美女的整个脸部。包括头,脸,头发,眉毛,眼睛,耳,鼻子,嘴巴等。 CSS是美女的化妆品,可以让美女看起来更漂亮。JavaScript就是美女的眼睛耳朵和嘴巴用来跟人互动的。

我将分为三节课分别将这个三个知识点,首先我们先快速学习一下HTML

所有网页都是用HTML呈现的

用Chrome浏览器打开任何一个网页,点击右键“查看网页源代码” 可以看到当前正在浏览的网页源码。

 

原来html源代码长这样啊
看不清可以点击图片保存到电脑或手机中放大看

 

用Chrome浏览器打开任何一个网页,点击右键“审查元素”可以看到当前页面的HTML结构及对应的的CSS定义

内有重要注释,看不清可以点击图片保存到电脑或手机中放大看

 

HTML的基本结构是这样的

几乎每个页面的HTML源码都包含了以下HTML标签。就好比美女的脸上都有两个眼睛一个嘴巴,至于脸上有没有涂眼影(CSS),有没有戴假睫毛(其他HTML标签,比如图片标签<img>)就因人而异了。

<html>
  <head>
     <title>这里是网页的标题,一般显示在浏览器的Tab上,不在页面里面显示</title>
  </head>
  <body>
     这里是网页的主体内容
  </body>
</html>

这里可以看效果

 

用记事本就可以创建一个网页文件了

首先将HTML代码敲入记事本

点上方菜单 文件->另存为

命名规则及设置如下图:

内有重要注释,看不清可以点击图片保存到电脑或手机中放大看

进入文件夹,点击刚刚保存的文件,用浏览器打开感受一下最简单的网页长什么样。

 

我可以偷窃别人的HTML源代码

尝试将百度首页的源代码偷下来(前面有教大家如何查看网页源代码,忘记的话重学一遍)复制粘贴到记事本上,

然后保存(上面有教大家如何用记事本保存一个html文件),再用浏览器打开本地电脑上保存的html文件看看这个假的百度页面长什么样。

 

为什么偷过来的百度页面的logo图片没有显示

此处内容需登录后浏览

我做了最简单的网页,但如何让别人访问呢

此处内容需登录后浏览

为啥百度没http图片能看见,我一模一样的代码就看不见图片

此处内容需登录后浏览

到w3cschool系统的学习HTML标签的用法

此处内容需登录后浏览

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
零基础 入门 HTML
课程交流
慕荣
2016-03-26

作为小白 前来填坑。

bessiepen
2016-02-16

作为小白我只需要安安静静做个小白,嗯。

Rwan
2015-10-01

支持支持~~

Rwan
2015-10-01

朕已阅

lilu
2015-05-27

@我是一只咸鱼 多谢支持

我是一只咸鱼
2015-05-26

额,美女程序媛自主创业吗?

cannerbe
2015-05-21

说得很清楚,比喻很形象~小白PM来赞一下!还有漫长的路要走~

lilu
2015-05-19

@acusp 谢谢支持!

acusp
2015-05-17

还行吧,去进一步学习了!!!