铁人赛 Day1 -- HTML基本架构

哎呀,自学了两个月後刚好碰到2021的铁人赛开打,顺便来分享一下我的学习过程好了,有错的在劳烦各位大大多多帮忙!!

那我们就先来介绍一下HTML的架构吧!

那在HTML一开始会出现以下画面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

从上面那一小段的程序码来看,可以简单分成:

1.头(head)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

2.身体(body)

<body>
    
</body>

3.那在head的部分会看到系统自动出这些程序码,让我们一个一个来看

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

---------我是分隔线---------

Meta

主要是放一些关於网站内容的描述或SEO相关的关键字,那他的位置就是放在head里面,所以才会看见head里面有这些东西的出现

<meta charset="utf-8">

1.会自动帮我们转成正常的中文编码

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2.程序会是以哪一个浏览器以及版本为主

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.简单来说就是可以控制萤幕的宽度和缩放比例,如果这样太抽象,你就调整你的视窗大小,观察网页内容的变化,你就会发现里面的东西会跟着移动,那上面那串程序码就是在做这件事(设定缩放的比例)

Title

从英文就很明显看得出来就是标题了吧哈哈,但他的这个title就是我们视窗上会的名子,放张图大家应该就会了解了

<title>哈罗你好吗,我是title</title>

https://ithelp.ithome.com.tw/upload/images/20210901/20141189jZKXD5HWCf.jpg

使用工具:VsCode(第二天会来向大家分享一下这个工具)

那今天先介绍到这边,明天就来介绍一下我使用的工具,我们铁人赛Day2见!!


<<:  [Day 1]-前言

>>:  亿品锅 - 台中高工店 $130元也可以吃到饱

DVWA练习-Command injection

周末刚去考完CEH 终於可以放下心中的大石头了 考题nmap的指令比v10版似乎少很多 IoT的攻击...

Day28:28 - 後端&前端 - 按赞收藏

Moni,我是Charlie! 在Day27当中我们完成了recaptcha验证,而今天我们将实作按...

【设计+切版30天实作】|Day27 - Plans区块 - 怎麽做出背景阴影?原来阴影还可以调数据!

前面完成了「Reviews」区块,今天来完成「Plans」的区块。 数据收集 标题的样式 Font...

Day 28. 组件基础 - Components

沃呜!铁人倒数3天了,我们离完赛就差一颠点啦,我们今天来讲讲components吧~继续gogogo...

课堂笔记 - 深度学习 Deep Learning (19)

Gradient Descent Method 统整一下到底要如何Gradient Descent...