来轻松聊聊

嗨 我是Jacky，今天要来谈谈HTML。
举凡网页开发、设计，不管听过、看过甚至接触过的朋友，可能知道藉由HTML与CSS这两个程序语言，能够组成我们所看到最基本的网页画面。
若将网页的画面比喻成一个Word档案，
HTML就像编辑的标签，你可以决定画面上，有标题，有图片，有表格、文字、超连结，甚至影片。
CSS就像上方万年不变的编辑列，可以进行改变文字大小、编辑图片效果、调整行高、版面配置......等等的显示效果设定。

我是个想转职前端且0经验的白纸，自学的来源举凡部落格文章(如 Medium、iT邦帮忙)、Youtube影片、互动式教学网站(W3school、freeCodeCamp)。
大家都用什麽网站或影片自学呢? 欢迎在下方与大家分享~~

认识HTML

HTML为一种标签式语言，拥有起始标签<>与结束标签</>，标签内必须填入相同的特定文字(只限小写英文)。另外也有一些标签只有起始标签，但在HTML5(最新的HTML规范)发布後建议在标签文字後加上"/"，例如＜img />、<input />等。

标题标签

• <h1>~<h6>为标题标签，h即是heading的缩写，用在文章标题、段落标题或导览列。
• 数字越大，字体越小，<h1>最大，<h6>最小。

范例

<h1>嗨 世界</h1>
<h2>嗨 世界</h2>
<h3>嗨 世界</h3>
<h4>嗨 世界</h4>
<h5>嗨 世界</h5>
<h6>嗨 世界</h6>

显示效果如下

嗨 世界

嗨 世界

嗨 世界

嗨 世界

嗨 世界

嗨 世界

文章标签、注解标签、占位字符

• <p>为段落标签，paragraph的意思，可放入一个字、一段话或是一篇文章。
• <!-- -->为注解标签，可将一段标签连同内容标注起来，使其无效，或者用於片段程序码解释和提示。不同於其他标签，除了直接打出标签，也可以使用ctrl+/快速将目标范围标注起来。
• 占位字符(placeholder)常用在网页开发阶段，因为还没有将实际内容放入网站，因此暂时用一段文字作为代表，对於排版上有帮助。

范例

<p>大家好</p>
<p>大家好 我是Jacky</p>

<!-- 大家好 我是Jacky Huang -->

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> <!-- 占位字符可为任意文字 -->

显示效果如下

大家好
大家好 我是Jacky

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

HTML5新增的标签

• <nav>为导览区块标签，为网页提供导览列或导览按钮。
• <header>为页首标签，可在其范围内放入文字、图片等。
• <main>为主要区块标签，可在其范围内放入文字、图片等。
• <section>为片段标签，可在其范围内放入文字、图片等。
• <article>为文章标签，可在其范围内放入文字、图片等。
• <footer>为页尾标签，可在其范围内放入文字、图片等，通常会包含联络资讯或版权声明。
• <video>为影片标签，必须在其src属性(source)填入影片来源才能显示出影片。有两种写法，请看范例。

范例

<nav>Home</nav> <nav>Menu</nav> <nav>Contact</nav>

<header>
    <h1>这是页首</h1>
    <p>这也是页首</p>
</header>

<main>
    <article>
        <section>
            <p>好对称啊</p>
        </section>
    </article>
</main>

<footer>
    <p>联络我们<p>
</footer>

<video>
    <source src="test.mp4" type="video/mp4"/>
</video>
or
<video src="test.mp4"></video>

图片标签、超连结标签

• <img>为图片标签，没有结束标签，与插入影片的方式相同，一样必须在其src属性(source)填入来源。
• <a>为超连结标签，必须在其href属性(hypertext reference)填入目标的url(网址或网页目标区域)，在用户点击时连结到该目标位址。不仅文字能作为超连结，也可为图片加上超连结。

范例

<img src="test.jpg" />

<a href="#"><p>Jacky's Page</p></a> // #代表是一个可点击的超连结，但并不会连到任何地方
<a href="#footer">到页尾<a> // 点击文字会连结到网页中标签id为footer的位置
<a href="www.Jacky.com.tw"><img src="test,jpg" /><a> // 点击图片会连结到目标网址

今日的分享就到这边了，学起来很快，没想到要用文字打出来，需要用上不少时间呢!
有些范例在文章内不好呈现，我就不分享了，可以自行google，有很多资料可以学习。
内容基本上都是很基础的概念，毕竟是基於纪录的原因，才促使我打出这篇文章。
欢迎各位用力纠错与指教，我也正积极寻求最正确的观念。
最後再谢谢大家看到这里，我们明天见!

内容来源:
freeCodeCamp