前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML/CSS快速入门课程知识点总结(一)

HTML/CSS快速入门课程知识点总结(一)

作者头像
灰度五十
发布2022-03-08 09:02:38
3580
发布2022-03-08 09:02:38
举报

最近用了差不多一周的时间学习了一下codecademy.com上面的HTML/CSS课程,总体感受是,这种在线编程的手段的确可以提高学生的积极性,让人有种编程编上了瘾的感觉,但是缺点也很明显,不注重开发环境的创建终究不太合理,而且课程内容偏重于讲语法,比较浅显,指望着学完就能做出点什么还是不太现实的,还是需要自己去拔高的。

不管怎么说,终究还是有收获的,在这里整理一下相关内容,作为笔记,也希望能帮到一些人。

HTML基础

我们看到的所有网页都是用一种叫做HTML的语言写成的,HTML就好比组成所有网页结构的骨架。和其他语言一样,HTML有着自己的语法,而浏览器则可以把一个html文件中的代码渲染(render)为一个网页。HTML的全称是HyperText Markup Language,也就是超文本标记语言,而所谓“超文本”是指“带有链接的文本”,所谓“标记语言”是指可以赋予文本更多功能的编程语言,它可以将文本变成图片、链接、表格、列表等等。

HTML是网页的骨架,CSS(CascadingStyle Sheets,层叠样式表)则是网页的血肉,它让网页有了生气。我们会先学习HTML,再研究CSS。

所有HTML文件的第一句代码都是

代码语言:javascript
复制
<!DOCTYPE html>

这句代码告诉浏览器它现在在读的是什么语言,在这里显然就是html了。

然后我们会写上

代码语言:javascript
复制
 <html>
...
</html>

上面的是html文件的开始标记,下面的是html文件的结束标记,而我们所有其他的代码都会写在中间的“...”那里。

如你所见,在html中有很多“<>”符号,在尖括号之间的东西被我们称为标签(tags),标签基本上都是成对出现的,一个为开始标签,一个为结束标签,刚刚上面的两句代码就是例子。标签也可以嵌套,所以我们要注意让多个开始标签和结束标签分别对应,如下:

代码语言:javascript
复制
<first tag><second tag>Some text!</second tag></first tag>

html文件一般都由两部分组成,head和body,我们先来看看head。

首先它也会有开始和结束标签,分别为<head>和</head>,头部包含了有关于网页的重要信息,例如标题,所谓标题就是我们在浏览器标签页中看到的内容,它也有自己的一对标签,<title>和</title>。 然后再来看看body

代码语言:javascript
复制
<html>
    <head></head>
    <body></body>
</html>

body标签之间的内容就是我们在实际页面上将要看到的内容,在这里需要提到,我们将标签和标签之间的内容成为元素(element)

代码语言:javascript
复制
element = <opening tag> + content + <closing tag>

有了body之后,我们可以在其中创建段落(paragraphs),段落的标签为<p></p>,我们可以在这对标签中写入内容。

和在word中编辑文档一样,既然有段落标签,就一样会有标题(headlings)标签,分别对应<h1>到<h6>,html为我们提供了六种尺寸的标题,当然,别忘了写你的结束标签哦~

接下来我们看看如何向网页中添加图片,想必你也猜到了,我们将用到图片标签,写作:<img>,但是它和其他的标签有两点不同,首先它是自关闭(self-close)的,也就是说我们不用写</img>,其次它的内容不在标签之间,而是用src来告诉图片标签从那里获得图片,如下

代码语言:javascript
复制
<img src="url" />

如果我想要实现点击图片就转到某一站点要怎么做?<a>标签就可实现这一功能,它用来制作网页上的超链接(或链接),与img标签一样,<a>有一个专门的属性来告诉它链接指向哪里,不过它用的不是src(也就是source的缩写,相当于告诉img图片是从哪来的),而是href(也就是hypertext reference的缩写,相当于告诉超文本(链接)要去到那里),写出来就是下面这样的

代码语言:javascript
复制
<a href="http://www.codecademy.com">Learn to code!</a>

href后面的是网址,而在<a></a>之间的就是我们可以点击的文本 所以想要把图片变成链接可以像下面这样

代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<title>zhanghui</title>
	</head>
	<body>
		<a href="http://tieba.baidu.com/">
		<img src="http://pic.people.com.cn/n/2013/1207/c1016-23775851-2.html">
		</a>		
	</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • HTML基础
相关产品与服务
内容识别
内容识别(Content Recognition,CR)是腾讯云数据万象推出的对图片内容进行识别、理解的服务,集成腾讯云 AI 的多种强大功能,对存储在腾讯云对象存储 COS 的数据提供图片标签、图片修复、二维码识别、语音识别、质量评估等增值服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档