5ep9lzv 发表于 2024-6-29 14:38:52

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


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">没</span>论是<span style="color: black;">刚才</span>踏出校门的学生,还是正在自学UI设计的平面设计师们,代码<span style="color: black;">始终</span>都是艺术行业<span style="color: black;">非常多</span>新人的噩梦,只要一看一大堆符号和代码,就让人头疼不已,完全提不起学下去的勇气。<span style="color: black;">不碍事</span>,这篇教程<span style="color: black;">便是</span>写给郁闷的你的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>,让<span style="color: black;">咱们</span>对要学习的这门语言有一个基本印象。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">所说</span>HTML+CSS,<span style="color: black;">便是</span>用<span style="color: black;">有些</span>符号来标记一段话,而这些符号<span style="color: black;">表率</span>着<span style="color: black;">区别</span>的外观。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把这些话连带符号存成一个文件,这个文件就叫做网页,<span style="color: black;">能够</span><span style="color: black;">经过</span>网址来打开。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当<span style="color: black;">咱们</span>打开网页时,浏览器会把这段话按符号注明的的样式<span style="color: black;">表示</span>出来。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Y总是个好同志。 </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;标题&gt; Y总是个好同志。

    </p>标题 {颜色:红色;} <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上面这段代码,输出的结果<span style="color: black;">便是</span>红色的“Y总是个好同志”</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这段代码里,<span style="color: black;">已然</span>完整的<span style="color: black;">包括</span>了<span style="color: black;">全部</span>HTML和CSS的语法和思想。搞懂上面这段代码,你就搞懂了HTML+CSS了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在HTML中,标记由&lt;&gt;<span style="color: black;">起始</span>,&lt;/&gt;结束。这个标记有两个功能,被<span style="color: black;">叫作</span>为标签:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>,告诉电脑,这段内容属于什么类型。(又叫做语义,<span style="color: black;">能够</span>被搜索引擎和其他程序<span style="color: black;">运用</span>。)</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二,告诉电脑,从哪里<span style="color: black;">起始</span>应用符号注明的样式,到哪里结束。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML的英文全名叫做hyper text markup language,即超文本标记语言。</p>

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而标题 {颜色:红色;}这段,就叫做CSS。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">它固定由一个名<span style="color: black;">叫作</span>,一个大括号,和大括号中的“形容词”<span style="color: black;">构成</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中标题叫做<span style="color: black;">选取</span>器,它直接连接HTML的标记(标签)。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">颜色:红色;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">{}是固定不变的,和: ;<span style="color: black;">同样</span>,都是固定格式,绝对不<span style="color: black;">能够</span>写错。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">由于</span>电脑其实是文盲。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">是不是很简单?</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML中有<span style="color: black;">非常多</span>标签,当然不是用中文写的,如:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">段落&lt;p&gt;用于标记正文,大串的文字。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标题&lt;h&gt;用于标记标题,有&lt;h1&gt;&lt;h2&gt;…直至&lt;h6&gt;。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">链接&lt;a&gt;用于标记超链接,<span style="color: black;">便是</span>点击后<span style="color: black;">能够</span><span style="color: black;">转</span>网址。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">列表&lt;ul&gt;用于标记列表,如导航列表。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">列表元素&lt;li&gt;用于标记列表中的元素。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">块元素&lt;div&gt; <span style="color: black;">亦</span><span style="color: black;">便是</span>页面中的方块。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后<span style="color: black;">咱们</span><span style="color: black;">必须</span><span style="color: black;">晓得</span>的是,<span style="color: black;">由于</span>有时候<span style="color: black;">咱们</span>要给一段文字<span style="color: black;">非常多</span>样式,<span style="color: black;">因此</span>标签会互相<span style="color: black;">包裹</span>,极易看串看错。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>经常会<span style="color: black;">这般</span>写:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;ul&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;li&gt;导航1&lt;/li&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;li&gt;导航2&lt;/li&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;li&gt;导航3&lt;/li&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;/ul&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;h&gt;<span style="color: black;">这儿</span>是标题&lt;/h&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;p&gt;<span style="color: black;">这儿</span>是内容&lt;/p&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> &lt;a&gt;返回主页&lt;/a&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这种写法叫做缩进,用对其的方式<span style="color: black;">帮忙</span><span style="color: black;">咱们</span>不要弄错标签的成对关系。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">好,<span style="color: black;">第1</span>节就到<span style="color: black;">这儿</span>,<span style="color: black;">朋友</span>们,下课!</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">对了,作业:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">请<span style="color: black;">拜访</span><a style="color: black;"><span style="color: black;">http://</span><span style="color: black;">w3school.com.cn</span></a>,<span style="color: black;">自动</span><span style="color: black;">认识</span>以上几个标签的用法。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下节课见!</p>




b1gc8v 发表于 7 天前

这篇文章真的让我受益匪浅,外链发布感谢分享!

1fy07h 发表于 昨天 04:13

论坛是一个舞台,让我们在这里尽情的释放自己。
页: [1]
查看完整版本: 每节5分钟的入门HTML+CSS教程 - 第1节