HTML固定基本结构 · 预科段标准教案 V1.5

## HTML固定基本结构 [TOC] ### HTML固定基本结构网页的固定基本结构包括以下标签，标签之间可以嵌套存在。 HTML 页面的结构包括头部 head 和主体 body 两大部分：头部描述浏览器所需的信息；主题包含网页中的具体内容。所以，我们所见到的网页内容，都是写在主体\(body\)中的。 `<html>`------- 根控制标记 `<head> `------- 头控制标记 `<title>` ------- 标题标记 `<head>`-------头控制标记（尾） `<body>` ------- 网页显示区域 </body> `<html>` ------- 根控制标记 \( 尾 \) 在上一节我们写的网页中，并不符合网页的固定基本结构，现在来修改一下。 ```html <html> <head> <title> 南通青鸟欢迎你！ </title> </head> <body> <h1>这是我的第一节HTML课</h1> <p>这是我的课堂笔记</p> <a href="http://www.ntqingniao.com">南通青鸟欢迎您</a> </body> </html> ``` 现在的网页就更加完整和规范了！ ### HTML头部 * 文档的头部描述了文档的各种属性和信息，包括文档的标题等。 * 绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 * 可以添加在头部区域的元素标签为: `<title>`,`<style>`,`<meta>`,`<script>`,`<noscript>`,`<base>`。 1. `<title>`标签：在`<title>`和`</title>`标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。 2. `<link>` 标签定义文档与外部资源的关系，最常见的用途是链接样式表。 ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` 3. `<meta>` 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。 4. `<script>` 标签用于定义客户端脚本，比如 JavaScript。`<script> `元素既可包含脚本语句，也可以通过`src`属性指向外部脚本文件。JavaScript 通常用于图像操作、表单验证以及动态内容更改。 ```html <script> document.write("Hello World!") </script> ``` 5. `<style>` 标签定义 HTML 文档的样式信息。在 `<style>` 元素中，您可以规定在浏览器中如何呈现 HTML 文档。每个 HTML 文档能包含多个 `<style>` 标签。 ## 作业 * 制作一个CODING COFFEE咖啡馆的首页，需要展示一张首页大图，以及咖啡馆的一些介绍。