第2车厢-砸重金才懂得:HTML标签

本篇重点在於告诉新手们，必懂得HTML标签、观念，并且推荐一些文章，让各位可以往此方向去了解

想当初的自己在资策会学习网页的地图就是....
HTML结构/标签认识 > CSS属性认识 > 老师直接就丢一个版给你切，叫你X日要交出来
然後你就会切了 !!

所以那就让我们开始从HTML结构认识吧～ＧＯ！

做网页时，首先我们要有HTML架构後，接着根据各区块内容放入标签内，最後透过选取器＋css属性将画面美化，并且透过js/框架方法做出网页的功能效果。

HTML架构

<!DOCTYPE html> //宣告
<html>//文件的开始
<head>//标示文件资讯
//文件资讯放在此处，例如<meta><link>…等
<title>网页的标题</title>
</head>
<body>
//这边放网页的内容
</body>
</html>//文件的结束

★这边有一个额外的重点是html 又被视为根元素（root element），这个可以记着，像是之後要设定字体单位时rem就与根元素有关

而 内文结构 又大致分为

★实际制作还是要看设计稿再来切分

本来只想提出工作上常用的HTML标签，结果看了看....，建议都要看过
不过我大致将它分为

做文字会用到的<p><b><h1>...<h6><span>
做段落会用到的<div><p><br>
做编号会用到的<ul><li>
做表格标签会用到的<table><th><tr><td>
做表单会用到的<form><input><select><option> <textarea><label>
做按钮会用到的<a> <button>

详细可参考
https://www.fooish.com/html/SEO-semantic-layout.html
里面的每一篇，建议都读

but最重要的是，如果你是要切版的，必须要懂得分辨
这个标签是块级元素还是行内元素?

• 常见块级元素标签：div、ul 、li、p、h1...
• 常见行内元素标签：span、a、input、img....

这边我参考几个网站将特性整理如下:

块级元素指本身属性为display:block;的元素，简单来说就是独占整行...
行内元素指本身属性为display:inline;的元素，简单来说就是与其他行内元素并排(靠一起拉!)...

…当然还有其他特性，但我们先说说

什麽是display(显示模式)?
每一个html标签元素都会有一个预设的display属性，标签基本上大部分可分为两种显示模式，一种是行内元素(inline)，另一种为块状元素(block)，但是我们可以在CSS内加入display来赋予新的属性，以改变其原本特性，利用它来呈现我们想要的排版...

举例来说:display属性可以设定为display:Inline-block,display:flex,display:table….等

这段我整理的重点是，虽然每个标签有原本特性，但是可以被改变，
例如<a>原本是并排特性，但可以设定为自己一行…等功用，
可以想像，假设你原本眼睛是小眼睛，但因为你要去约会，所以你就画妆来让眼睛变大，当然有些人就爱你的小眼睛，这时候你就可以素颜就好(保持原有特性)，而化妆技巧就想像是”display”，工具可以分眼线笔、双眼皮贴…(不同属性方法的概念，例如刚提到的:display:Inline-block,display:flex,display:table….等)

那其他特性是什麽呢...

详细请参考这篇，(有图解)
https://ytclion.medium.com/css%E6%95%99%E5%AD%B8-%E9%97%9C%E6%96%BCdisplay-inline-inline-block-block%E7%9A%84%E5%B7%AE%E5%88%A5-1034f38eda82

如果你乖乖跟我一样看完上篇的话，我这边整理如下
编号排版

行内元素(inline)

元素宽高由元素内容决定，定义宽高无效
相邻行内元素同在一行显示，直到一行排满了才会换行
设置margin、padding的上下边距无效(但并非不能设定，是排版不会随着设定改变，字仍在行内，其他行并不会被推开)，只有设置左右边距才生效
行内元素可以嵌套其他行内元素但是不能嵌套块级元素

块状元素(block)

每个区块元素都独占整行，宽度默认为父元素的宽度，高度默认为元素内容的高度
可以定义宽高，即使定位再小的宽度也会独占一行
设置所有的margin及padding任何边距都生效
可以嵌套行内元素及区块元素

table排版

设定	inline行内元素	block块状元素	Inline- block
是否可设定宽	X	V	V
是否可设定高	X	V	V
是否可并排	V	X	V
是否可设定margin(上下)	X	V	V
是否可设定margin (左右)	V	V	V
是否可设定padding(上下)	X	V	V
是否可设定padding(左右)	V	V	V