【後转前要多久】# Day03 HTML - BODY内的东西

早期网页大多都只有HTML骨架，
多数都是白底黑字、没有美美的编排，文字特效blink一闪一闪的，
加上一些表格或表单，就能传递所有想要的资讯，就像现在的实体书本一样，
顶多加给张照片，或者配个黄黄或黑黑的背景底色，

但现在使用者都太挑食，网页写的丑就没人想看了，动不动就想按左上或右上角的叉叉

以前学的时候还不知道，
以为在HTML中，每个tag的意义是一样的，都只是为了网页排版用而设计不一样的外框或者外型，
只知道<h1>就很大的字、数字越往<h6>就越小 (蛮纳闷为啥数字越大反而字体越小...我一开始都记不起来)
而<p>就是整整齐齐会多占一点空间的字，<div>就普普通通中规中矩的字。

但彻底了解後，才知道每个标签其实都有各自的语意，尽量不要乱使用。

有语意的标签

搜索引擎是个大架构、有规模的爬虫系统，
会依照这个网页写的内容及资讯，抓出网页写的标题、内文、文字段落叙述、图片等等。

举个较极端的例子，
即使改变样式让<h1>的文字大小、字型、颜色都与<div>一模一样，
呈现出来的画面虽然一样，使用者看到的感受度也都相同，
肉眼来看是这样，但对搜寻引擎来说却不是这麽回事。

搜索引擎会认为这个网页最重要的资讯(文章标题)是<h1>，
而文字段落描述是<p>，抓到<img>知道这是张图片，看到<a>知道这是连结等等。
搜索引擎会去分辨这些事情，将搜索到的网站标题关键字下去做分类。

HTML <Body>内的东西

为节省版面空间，
往後程序码的部分都是放在Body内部的东西

<p>段落</p>
<p>段落</p>
<div>DIV</div>
<div>DIV</div>

上方即为以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <p>段落</p>
    <p>段落</p>
    <div>DIV</div>
    <div>DIV</div>
</body>
</html>

标题(headers) <h1>~<h6>

数字越小，字体越大。

一个网页里面尽量只能有一个<h1>，代表整篇帖子的主题。
如果一篇文章下了两个大标题，那会是有点诡异的事。

<h1>网页的大标题</h1>
<h2>网页的副标题</h2>
<h3>网页的中标题</h3>
<h4>网页的小标题</h4>
<h5>网页的小小标题</h5>
<h6>网页的最小标题</h6>

文字段落 <p>

<p> 段落(paragraph)

预设的话会占据段落的上下方一些空间

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, mollitia!</p>

连结标签 <a>

<a> 锚点挂勾(anchor)

<a href="https://ithelp.ithome.com.tw/users/20125192/ironman/4909" target="_blank">连结</a>

href 连结网址(hypertext reference)，可为相对路径或绝对路径(其他网站的网址连结)
target 没填时预设为_self以目前页面开启连结，而_blank 为另启新视窗方式点开连结

另外<a>可以制作追踪id的效果，会跳转回对应的id元素去，
这也是在网页中class能重复、id却不能重复的理由，
如果id重复，浏览器可能只会永远跳到第一个id去。

<h1 id="title">我是标题</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>内容内容内容内容内容</p>
<a href="#title">点我回到标题</a>
<h1 id="title">我是标题</h1>

图片标签 <img>

<img> 图片(image)

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_%282013-2015%29.svg/1024px-Google_logo_%282013-2015%29.svg.png" alt="Google的Logo">

src 图片连结网址(source)，可为相对路径或绝对路径(其他网站的图片网址)
alt 图片的文字叙述(alternate text)，图片失效时会显示文字，以及让读稿机将图片转成文字读出助於盲人理解

列表清单 <ul>、<ol>、<li>

建议有主题相关联性的东西就用表单来放来，而非多个div

<ul> 无顺序(unordered list) 前面是一个点
<ol> 有顺序(ordered list) 有编号
<li> 项目实体(list)，通常会被<ul>或<ol>给包住 ~~被OL包住这句话好像怪怪的~~

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

<ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ol>

表格 <table>、<tr>、<th>、<td>

<table> 表格
<tr> 表格列(table row)，用以新增表格栏位(直行、往下新增)
<th> 表头列(table headers)，用以表示第一列资料的表头(横列、往右新增)
<td> 表单资料(table data)，用以新增资料列(横列、往右新增)

<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

Table表单没有CSS时真的颇无聊、没啥意思。

表单 <form> 、输入 <input>

前面都是小case，
这边开始是HTML的大魔王。

表单 <form>

<form action="index.html" method="get">
    <input type="text" name="mail" placeholder="请输入信箱">
    <input type="text" name="person" placeholder="请输入名字">
    <input type="submit" value="送出">
</form>

<form>

type 种类。常见带入值有的:
- text 单行文字框
- button 按钮
- submit 提交表单时的送出按钮
- radio 在相同name的选项中只能单选框
- checkbox 打勾复选框
name 送出的参数名称，名称通常同id。(浏览器透过name名称来记住使用者常填写的帐号密码，如chrome就有自动填入帐号密码功能)
value 内容值、预设填入的值。表单提交时是按value传递，而不是显示的字
placeholder 占位符，未填写输入时显示的提示

<input>

action 按下送出後，会跳转到 action 写的位置进行处理(通常是後端网页)，URL後面会串上?mail=123&person=333
method 预设是get GET方法会将参数显示在网址，纯粹做查询要资料、或者开发时用Debug相对方便。填入post POST方法则不会显示任何参数在网址列上，相对来说安全一些。

<form action="index.html" method="get">
    <label>性别</label>
    <input type="radio" name="sex" value="male">男生
    <input type="radio" name="sex" value="female">女生

    <label>兴趣</label>
    <input type="checkbox" name="hobby" value="movie">电影
    <input type="checkbox" name="hobby" value="music">音乐
    <input type="checkbox" name="hobby" value="comic">漫画

    <input type="submit" value="送出">
</form>

当name相同、使用checkbox多选时，送出後URL会串上?sex=male&hobby=movie&hobby=music
一样的Key重复地带上多个值

标签 <label>

<label> 标签，通常搭配表单一起使用作为表单的提示字、说明标签

<form action="index.html" method="get">
    <label for="mail">电子邮件</label>
    <input type="text" name="mail" id="mail" placeholder="请输入信箱">
</form>

for 用途为点击标签後，会找相对应的id 来定位、聚焦

下拉选单 <select> 、选项 <option>

select 清单、选单
option 选项实体

<form action="index.html">
    <select name="year">
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    </select>

    <input type="submit" value="送出">
</form>

送出後，URL会串上?year=1997

多行文字 <textarea>

<form action="index.html" method="get">
    <textarea name="content" cols="30" rows="10"></textarea>
    <input type="submit" value="送出">
</form>

cols 显示宽的字元数
rows 显示高的字元数
(也可使用CSS来控制栏位宽高)

无语意的标签

OK，前面讲了蜡麽多东西，现在剩下一点点了

区块标签 <div> 、行内标签 <span>

<div> 本身不具任何意思、没有语意，单纯拿来排版用。
division意思是"分隔、分裂、除法"
区块元素 会优先占满一整块水平方向的区域，会换行。

<sapn> 本身不具任何意思，和div一样纯粹点缀样式用。
spans意思是"跨越、跨度"
行内元素 会优先挤在同一块水平方向的区域，能不换行就不换行。

<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
<span>Lorem ipsum dolor sit amet, consectetur.</span>

因为不具有任何语意，这两者常被拿来当作容器(Container)，适合拿来挂CSS。

不成双成对出现的标签

不成双成对的标签，为了看起来对称些，
有些人会选择性的加上结尾封闭标签< />，但在HTML中有没有写是一样的。

<br>

<br> 换行、断行(break)
<br /> 也有人这样写

<hr>

<hr> 水平线(horizontal rule)
<hr /> 也有人这样写

Lorem ipsum dolor sit amet. <br>
Lorem ipsum dolor sit amet. <br>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>

单纯讲解HTML真的很无聊，
但熟悉过後再回来找纯HTML用法也比较快，
择日搭配上CSS才会有效果上的变化，会更有学习的动力。

<<: 铁人赛 Day18-- 继续我们的登入者介面吧

>>: 自动化初步-使用pyautogui

【後转前要多久】# Day03 HTML - BODY内的东西

有语意的标签

HTML <Body>内的东西

标题(headers) <h1>~<h6>

文字段落 <p>

连结标签 <a>

图片标签 <img>

列表清单 <ul>、<ol>、<li>

表格 <table>、<tr>、<th>、<td>

表单 <form> 、输入 <input>

表单 <form>

<form>

<input>

标签 <label>

下拉选单 <select> 、选项 <option>

多行文字 <textarea>

无语意的标签

区块标签 <div> 、行内标签 <span>

不成双成对出现的标签

<br>

<hr>

Day17 - Ruby 的阵列处理入门

Day 20 - [语料库模型] 08-绘制语料库模型Heatmap图

Day 23 [Python ML、资料视觉化] 直方图、密度图

[Day29] React Testing Library 的一些实用的小技巧

[Day29] Bevy 游戏引擎 (Part 3) 收工

第30天：终於撑到完赛QQ-JavaScript技术手册阅读笔记

JS 04 - 变数类型

DevOps 组别

DAY24 - [React hook] component 零组件

尺寸单位 px、em、rem

有语意的标签

HTML <Body>内的东西

标题(headers) <h1>~<h6>

文字段落 <p>

连结标签 <a>

图片标签 <img>

列表清单 <ul>、<ol>、<li>

表格 <table>、<tr>、<th>、<td>

表单 <form> 、 输入 <input>

表单 <form>

<form>

<input>

标签 <label>

下拉选单 <select> 、 选项 <option>

多行文字 <textarea>

无语意的标签

区块标签 <div> 、 行内标签 <span>

不成双成对出现的标签

<br>

<hr>

表单 <form> 、输入 <input>

下拉选单 <select> 、选项 <option>

区块标签 <div> 、行内标签 <span>