[Day 7] 初学HTML

前言

我们终於要开使进入网页世界,一开始会觉得好多标签名称要记得、时不时也会忘记放入结束标签,而出现错误。
但至少使用HTML做出一个简单的网页架构,对初期刚接触的我来说,也有不少成就感。

HTML 学习过程

  1. MDN
    从 MDN 可以学习 HTML 基础,认识元素组成、标签、网页架构。
  2. w3schools
    在 w3schools 会有使用该标签的范例,只要进入Try it Yourself,就能查看编辑器撰写与网页呈现的结果。
  3. udemy - The Complete 2021 Web Development Bootcamp
    这堂课在 HTML 的教学介绍的详细、透过制作出简单的版型,带出很多基本HTML会使用到的标签。

以上认识元素、练习如何使用,基本上就可以做出网页的架构啦。那也完成了一个部分了,别忘记也要push 上 Github 喔。

说说HTML 如何与 CSS\JS 搭配

CSS 如何跟 HTML 搭配使用

1. inline CSS

在 HTML 中加入 style 属性,来撰写CSS

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
  • 此方式不建议使用,会造成维护的困难

2. internal CSS

在 HTML 档案中,建立<style></style>区块

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3. external CSS

用link的方式,连结到另一个css档案

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  /*This example links to a
  style sheet located in the same folder as the current page*/
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  • <link rel="value">,"stylesheet"文档的外部样式表

HTML 中使用 javascript

在HTML的body尾端

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

创立.js档案,并引入

//HTML4 与 (x)HTML
<script type="javascript.js"> </script>

//HTML5
<script src="javascript.js"> </script>


<<:  Day 07 Azure cognitive service- 於是,Chatbot 也有了智慧

>>:  day7 : logging集中(上)

CNN
杂谈    

[DAY27]GCP-Google Cloud Platform

台湾目前常听到的公有云不外是以下三巨头 AWS : Amazon Web Services AZUR...

难搞的字串符

字符串编码转换 在 python3.x 中,默认采用编码格式为UTF-8 在 python 中,有两...

Kotlin Android 第28天,从 0 到 ML - TensorFlow Lite -姿态估计 (Pose estimation)

前言: 常常看到特效电影幕後花絮,都有请演员在绿幕前在录动作身上都有点点,在萤幕上变成火材人,姿态估...

【领域展开 24 式】 WordPress 外挂目录中排名第一的 YoastSEO

众多使用者推荐,SEO 套件唯一好选择 YoastSEO 暨昨天的文章【领域展开 23 式】 Pag...

Youtube Data API 教学 - 告一个段落

「鲑鱼均,因为一场鲑鱼之乱被主管称为鲑鱼世代,广义来说以年龄和脸蛋分类的话这应该算是一种 KNN 的...