无论是刚刚踏出校门的学生,还是正在自学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>
这种写法叫做缩进,用对其的方式帮助我们不要弄错标签的成对关系。
好,第一节就到这里,同学们,下课!
Tag:
html
教程