每节5分钟的入门HTML+CSS教程

2024-01-17 16:17 小编
无论是刚刚踏出校门的学生,还是正在自学UI设计的平面设计师们,代码一直都是艺术行业很多新人的噩梦,只要一看一大堆符号和代码,就让人头疼不已,完全提不起学下去的勇气。没关系,这篇教程就是写给郁闷的你的。
 
 
 
首先,让我们对要学习的这门语言有一个基本印象。
 
所谓HTML+CSS,就是用一些符号来标记一段话,而这些符号代表着不同的外观。
 
把这些话连带符号存成一个文件,这个文件就叫做网页,可以通过网址来打开。
 
当我们打开网页时,浏览器会把这段话按符号注明的的样式显示出来。
 
 
 
Y总是个好同志。 
<标题> Y总是个好同志。</标题> 
标题 {颜色:红色;}
 
 
上面这段代码,输出的结果就是红色的“Y总是个好同志”
 
 
 
这段代码里,已经完整的包含了整个HTML和CSS的语法和思想。搞懂上面这段代码,你就搞懂了HTML+CSS了。
 
 
 
在HTML中,标记由<>开始,</>结束。这个标记有两个功能,被称为标签:
 
第一,告诉电脑,这段内容属于什么类型。(又叫做语义,可以被搜索引擎和其他程序使用。)
 
第二,告诉电脑,从哪里开始应用符号注明的样式,到哪里结束。
 
HTML的英文全名叫做hyper text markup language,即超文本标记语言。
 
而标题 {颜色:红色;}这段,就叫做CSS。
 
它固定由一个名称,一个大括号,和大括号中的“形容词”组成。
 
其中标题叫做选择器,它直接连接HTML的标记(标签)。
 
颜色:红色;
 
{}是固定不变的,和: ;一样,都是固定格式,绝对不可以写错。
 
因为电脑其实是文盲。
 
 
 
是不是很简单?
 
HTML中有很多标签,当然不是用中文写的,如:
 
段落<p>用于标记正文,大串的文字。
 
标题<h>用于标记标题,有<h1><h2>…直至<h6>。
 
链接<a>用于标记超链接,就是点击后可以跳转网址。
 
列表<ul>用于标记列表,如导航列表。
 
列表元素<li>用于标记列表中的元素。
 
块元素<div> 也就是页面中的方块。
 
最后我们需要知道的是,因为有时候我们要给一段文字很多样式,所以标签会互相包围,极易看串看错。
 
所以经常会这样写:
 
<div>
 
<ul>
 
<li>导航1</li>
 
<li>导航2</li>
 
<li>导航3</li>
 
</ul>
 
<h>这里是标题</h>
 
<p>这里是内容</p>
 
<a>返回主页</a>
 
</div>
 
 
 
这种写法叫做缩进,用对其的方式帮助我们不要弄错标签的成对关系。
 
好,第一节就到这里,同学们,下课!


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码