Quartz 4

html tutroial

10 min read

HTML Elements

The HTML element is everything from the start tag to the end tag:

<marquee> A marquee is a cover over the entrance of a building, for example a hotel or a theatre. </marquee>
<input type="text" value="This is a text box">

基本结构

<!DOCTYPE html>  
<html lang="en"> 
    <head>
        <meta charset="utf-8"> 
        <title>this is a title</title>
    </head>
    <body>  
        <marquee> A marquee is a cover over the entrance of a building, for example a hotel or a theatre. </marquee>
        <input type="text" value="This is a text box">
    </body>
</html>

lang="en" tags’ usage: Browsers and online translators (like Google Translate) use it to detect the correct source language.

vscode自动生成: 在文档头部敲一个！

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

meta

<meta> 标签定义 HTML 文档的元数据。元数据是关于数据的数据（信息）。

<meta> 标签始终放在 <head> 元素内，通常用于指定字符集、页面描述、关键字、文档作者和视口设置。

元数据不会显示在页面上，但可以被机器解析。

元数据由浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）和其他 Web 服务使用。

有一种方法可以让网页设计师通过 <meta> 标签来控制视口（用户可见的网页区域）（参见下面的“设置视口”示例）。

每 5 秒刷新文档并自动跳转 Baidu

 <meta http-equiv="refresh" content="5;url=https://www.baidu.com">

页面加载后 5 秒钟，浏览器会自动跳转到 https://www.baidu.com

设置视口

视口是用户可见的网页区域。它随设备而异 - 在手机上比在电脑屏幕上小。

您应该在所有网页中包含以下 <meta> 元素

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

这会给浏览器指令，告知如何控制页面的尺寸和缩放。

width=device-width 部分将页面的宽度设置为与设备的屏幕宽度一致（这将因设备而异）。

initial-scale=1.0 部分设置了浏览器首次加载页面时的初始缩放级别。

这是一个没有视口 meta 标签的网页示例，以及同一个网页有视口 meta 标签的示例。

语义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        h1 { 
            color: blue;
            font:size 30px;
        }
    </style>
</head>
<body>
    <h1>title</h1>
    <h4>time</h4>
    <div>
        <p>context...............................</p>
        <p>context...............................</p>
    </div>
</body>
</html>

此为语义标签

<style> 
		h1 { 
				color: blue;
				font:size 30px;
		}
</style>

块级 行内 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <div>这是一个块级元素。</div>
 
    <hr>
    
     <span>这是一个行内元素。</span>
     <input type="text" value="这是一个输入框">
</body>
</html>

块级元素中能写：行内元素、块级元素（几乎什么都能写）

 
 <div>
	<span>这是一个行内元素。</span>
	<input type="password">
 </div>

行内元素中能写：行内元素，不能写：块级元素

<span>
	<span>span</span>
	<span>span</span>
	<input type="password">
 </span>

错误

<span>
	<span>span</span>
	<span>span</span>
	<input type="password">
	<div>div</div> 
 </span>

h1~h6不能相互嵌套
p中不要写块元素

block element:

  1. 块元素在页面中以区域块的形式出现
  2. 各块元素通常都会独自占据一整行或多整行
  3. 可以对其设置宽度高度、对齐等属性

inline element:

  1. 行内元素也称内联元素或内嵌元素
  2. 不占有独立的区域
  3. 一般不可以设置宽度、高度、对齐等属性

如果希望行内元素具有块元素的某些特性，或者需要块元素具有行内元素的某些特性，可以使用display属性对元素的类型进行转换。
inline: 行内元素
block: 块元素
inline-block: 此元素将显示为行内块元素，但是该元素不会独占一行
none: 此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在

Bookmark using id

<!DOCTYPE html>
<html>
<body>
 
<p><a href="#MyChapter3">Jump to Chapter3</a></p>
<p><a href="#C4">跳转到 Chapter 4</a></p>
<p><a href="#C10">跳转到 Chapter 10</a></p>
 
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
 
<h2 id="MyChapter3">Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
 
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
 
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
 
</body>
</html>

HTML Examples

A Prominent Figure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a prominent figure</title>
</head>
<body>
    <img src="https://cdn.pixabay.com/photo/2025/09/12/18/36/pumpkin-9830952_1280.jpg" alt="puumpkin" style="float:left; margin:10px;" width="600" height="450">
    <h1>a prominent figure</h1>
    <p>
        &nbsp; &nbsp;Nearly ten years had passed since the Dursleys had woken up to find their nephew on the front step, but Privet Drive had hardly changed at all. The sun rose on the same tidy front gardens and lit up the brass number four on the Dursleys’ front door; it crept into their living room, which was almost exactly the same as it had been on the night when Mr. Dursley had seen that fateful news report about the owls. Only the photographs on the mantelpiece really showed how much time had passed. Ten years ago, there had been lots of pictures of what looked like a large pink beach ball wearing different-colored bonnets — but Dudley Dursley was no longer a baby, and now the photographs showed a large blond boy riding his first bicycle, on a carousel at the fair, playing a computer game with his father, being hugged and kissed by his mother. The room held no sign at all that another boy lived in the house, too.
    </p>
 
    <p>
         &nbsp; &nbsp;Yet Harry Potter was still there, asleep at the moment, but not for long. His Aunt Petunia was awake and it was her shrill voice that made the first noise of the day.
    </p>
</body>
</html>

图片靠左排列，文字在右边（含标题）

E-commerce page

图片超链接跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-commerce</title>
</head>
<body>
    <h1 href="#" id="top">This is the heading</h1>
    <a href="#iphone">iphones</a>
    <a href="#computer">computers</a>
    <a href="#headphone">headphones</a>
    <br>
 
    <a href="#" id="iphone"><img src="https://cdn.pixabay.com/photo/2024/02/24/19/00/phone-8594571_1280.jpg" alt="iphone"></a><br>
    <a href="#top">back to the top</a><br>
    <a href="#" id="computer"><img src="https://cdn.pixabay.com/photo/2016/11/21/15/08/playstation-1845880_1280.jpg" alt="computer"></a><br>
    <a href="#top">back to the top</a><br>
    <a href="#" id="headphone"><img src="https://cdn.pixabay.com/photo/2016/11/19/16/01/audio-1840073_1280.jpg" alt="headphone"></a><br>
    <a href="#top">back to the top</a><br>
</body>
</html>

Sunflower List

  • <dl> 👉 definition list
  • <dt> 👉 definition term
  • <dd> 👉 definition description
  • <ol> 👉 ordered list
  • <li> 👉 list item
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunflower </title>
</head>
<body>
    <dl>
        <dt>
            <img src="https://cdn.pixabay.com/photo/2016/11/23/14/48/sunflowers-1853323_1280.jpg" height="450" width="600">
            <img src="https://cdn.pixabay.com/photo/2025/09/12/18/36/pumpkin-9830952_1280.jpg" alt="puumpkin" style="float:left;" width="600" height="450">
        </dt>
        <dd>
            <h2>Introduction</h2>
            <h3>The common sunflower (Helianthus annuus) is a species of large annual forb of the daisy family Asteraceae. </h3>
            <p>
                The plant has an erect rough-hairy stem, reaching typical heights of 3 metres (10 feet). The tallest sunflower on record achieved 9.17 m (30 ft 1 in).[3] Sunflower leaves are broad, coarsely toothed, rough and mostly alternate; those near the bottom are largest and commonly heart-shaped.[4]
            </p>
        </dd>
        <dd>
            <h2>Distribution</h2>
            <ol>
                <li>Native to North America, the sunflower was [[domesticating|domesticated]] around 1000 B.C. in what is now the southeastern United States.</li>
                <li>Sunflowers grow best in fertile, moist, well-drained soil with heavy mulch.</li>
                <li>They are planted in spring and are harvested in late summer.</li>
                <li>Sunflowers are used as food plants by the larvae of some Lepidoptera species, including the American painted lady and the painted lady.</li>
            </ol>
        </dd>
    </dl>
</body>
</html>

News

  • ul 👉 unordered list （无序列表）
  • li 👉 list item （列表项）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>news</title>
    <link rel="stylesheet" href="css/news.css">
</head>
<body>
    <img src="https://cdn.pixabay.com/photo/2014/09/21/21/22/lake-455576_1280.jpg" alt="lake"  width="600" height="450">
    <h1><em class="blue">煤气爆炸事件致使两人死亡十二人受伤</em></h1>
    <p>
NANJING - Two people died and 12 were injured following a gas explosion in a restaurant in eastern China's Jiangsu Province Thursday morning, police said.<br>
 
The accident occurred in Huaian city around 9：30 a.m., the city's public security bureau said in a statement.<br>
<br>
<strong class="red">生词：public security bureau=公安局 n.</strong><br>
<br>
An initial investigation suggested a gas tank exploded in the restaurant located in Qingjiangpu district, causing damage, it said.<br>
<br>
生词：initial=初步的 adj.<br>
<br>
Rescuers retrieved 14 people from the rubble, but two later died despite emergency treatment. The 12 survivors are still in hospital.<br><br>
 
生词：retrieve 找回 vt.  rubble 碎石堆 n.</p>
 
<ul>
    <li>1. What happened in the restaurant in Huaian city?</li>
    <li>2. How many people were injured in the accident?</li>
    <li>3. What does "initial" mean?</li>
</ul>
 
<p><em class="blue">Xinhua | Updated: 2017-06-01 15:29</em></p><br>
</body>
</html>
ul{
    list-style-type: none;
}
 
ul li::marker { 
  /* 伪元素 */
  content: "😊 "; /* 设置 emoji 符号 */
}
 
p{
    font-size: 16px;
    line-height: 1.3;
}
 
.blue{
    color: blue;
}
 
.red{
    color: red;
}

Graph View