使用 HTML 骨架
骨架是生物体的支撑结构。
它通常由坚硬的物质构成,以保护身体更脆弱的部分。
Encyclopedia Britannica
每个 Web 开发人员都应该有一个 HTML 骨架。
你应该把它放在口袋里,并在每项工作中都使用它
示例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>页面标题</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
</body>
</html>
点击“在此处试一试”按钮即可查看效果!
尝试将文本“这是一个标题”更改为“这是我的婚礼”。
您做到了吗?
恭喜!现在你知道如何编辑 HTML 了。
HTML 骨架说明
DOCTYPE 必须存在。它告知浏览器这是一个 HTML 文档
<!DOCTYPE html>
html 开始标签和 html 结束标签定义了 HTML 文档的开始和结束。
语言是英语
<html lang="en">
</html>
meta charset 标签定义了字符集(UTF-8)
HTML 页面缺少 head 标签。HTML 中不需要 head 标签。
在 HTML 中,body 标签之前的所有内容都被视为 head 的一部分。
<meta charset="UTF-8">
HTML 标准要求正确的页面标题
<title>页面标题</title>
meta viewport 标签使页面在所有屏幕尺寸(笔记本电脑、手机)上都能良好显示
<meta name="viewport" content="width=device-width,initial-scale=1">
link 标签链接到样式表
<link rel="stylesheet" href="name">
开始标签和结束标签环绕未来的 CSS 样式
<style>
</style>
script 标签链接到脚本
<script src="name"></script>
开始标签和结束标签环绕 HTML 文档的可见部分
<body>
</body>
Image 标签定义 HTML 图片
<img src="img_la.jpg" alt="LA" style="width:100%">
养成将 HTML 部分“打包”在 div 元素中的习惯。
准备好为每个部分指定类名
<div class="class name">
</div>
Heading 标签定义 HTML 标题
<h1>这是一个标题</h1>
Paragraph 标签定义 HTML 段落
<p>这是一个段落。</p>
<p>这是另一个段落。</p>