超文本标记语言(Hypertext Markup Language, HTML)是一个可以用来结构化 Web 内容并给予其含义和目标的编码语言。
例如,<p>
用于表示段落
<p>My cat is very grumpy</p>
元素可以有属性(Attribute),比如以下这个 <p>
元素就有一个 class
属性,它的值是 editor-note
。
<p>我们是祖国 <strong>美丽的</strong> 花朵🌺。</p>
空元素没有内容,比如 <img>
,它被用来嵌入一张图片。
<img src="images/flowers.png" alt="祖国的花朵们">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>李白的博客</title> </head> <body> <img src="images/libai.png" alt="李白饮酒作诗图"> </body> </html>
<!DOCTYPE html>
— 文档类型,写成 <!doctype html>
也行。<html></html>
— <html>
包含整个页面的内容。<head></head>
— <head>
包含页面描述,CSS样式等,但不会被用户看到。<body></body>
— <body>
包含了你想被用户看到的内容。<meta charset="utf-8">
— 指定文档的字符编码为 UTF-8。<title></title>
— 设置页面的标题,显示在浏览器标签页上。
快捷键:在 VSCode 中输入 !
并按 Tab
键,就会出现一个基本的 HTML 文档。更详细的用法参考emmet 快捷键
HTML 包括六个级别的标题, <h1> – <h6>
。
通常一个页面只有一个 <h1>
,请尽量按顺序使用 <h1> – <h6>
。
<h1>李白<h1> <h2>一个被写作耽误的武学奇才</h2> <h3>静夜思</h3> <p>窗前明月光,疑是地上霜。</p> <p>举头望明月,低头思故乡。</p>
快捷键:在 VSCode 中输入 h1
并按 Tab
键,就会出现<h1></h1>
。
<p>金州勇士队的全明星球员包括:<p> <ul> <li>斯蒂芬·库里</li> <li>凯文·杜兰特</li> <li>克莱·汤普森</li> <li>德雷蒙德·格林</li> </ul>
快捷键:尝试在 VSCode 中输入 ul>li*3
并按 Tab
键。
<p>维持生命必须的要素包括:<p> <ol> <li>手机</li> <li>WIFI</li> <li>王者荣耀</li> </ol>
<a href="https://github.com/fe13">FE 13</a>