HTML复习巩固系列（一）——HTML结构/骨架

最新推荐文章于 2024-10-03 22:12:17 发布

Xiaoxiao小川子

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量1.2k

点赞数

分类专栏： HTML全盘复习文章标签： html html5

本文链接：https://blog.csdn.net/shallow77/article/details/117756813

版权

HTML全盘复习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、HTML基本的网页结构/骨架
总结

一、HTML基本的网页结构/骨架

一个标准的HTML文件所需要的最基础标签应该是

<!DOCTYPE html> 
<html>
	<head>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<body> 元素包含了可见的页面内容

1. DOCTYPE声明

<!DOCTYPE> 声明不是一个 HTML 标签；DOCTYPE是document type(文档类型)的简写。它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。而且<!DOCTYPE> 声明需位于文档中的最前面的位置，处于 <html> 标签之前。

关于这句代码的主要是为了让浏览器预先知道文档的类型，并进行正确的渲染，由于html发展历史，这条声明又很多个版本，可以参考菜鸟教程网给出的不同html版本声明。现在web开发基本都是使用HTML5，所以只需要记住声明这样写就ok：<!DOCTYPE html>

2. html标签

该标签为一个html文件的根标签，通常需要设置属性：lang。意味language，是一个全局属性，用来规定页面元素内容的语言。供浏览器识别进行翻译等。一些常见的属性值为

<!-- 设置网页默认语言为英文 -->
<html lang="en">
<!-- 设置网页默认语言为中文（包括简体，繁体）-->
<html lang="zh">
<!-- 设置网页默认语言为简体中文-->
<html lang="zh-cn">

3. head标签

<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。也就是说 head 标签中的内容是为了描述网页的「额外」信息，主要给浏览器或者搜索引擎使用的。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head>
    <title>标题</title>
    <style></style>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="">
    <script></script>
    <noscript></noscript>
    <base href="">
</head>

1. title标签
是一个封闭标签，在head中是成对出现。也就是…。在打开一个网页时，网页的标签页上方的文字就是title部分，同时也是收藏网页时的标题和搜索引擎结果页面的标题。
Title是对整个页面的核心思想的总结，也是SEO非常重要的设置部分。Title部分尽量要多次出现关键词：核心关键词和长尾关键词。具体怎么写title部分，根据需求而定。这个没有标准。注意：<title> 在 HTML/XHTML 文档中是必须的。
2. style标签
定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染 HTML 文档。相当于直接嵌入网页的js或css文件标签。
3. meta标签
meta标签描述了一些基本的元数据。元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。包含广泛的内容标签，如网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。
最常用的就是设置charset=“utf-8”，用来设置浏览器解析的格式
4. link标签
定义了文档与外部资源之间的关系。通常用于链接到样式表。
是一个链接标签，包括外部css文件引用、js文件引用、favicon.ico图标引用等作用。
5. script标签
用以加载脚本文件，通常是引入外部js文件作用。
6. noscript标签
noscript 元素用来定义在脚本未被执行时的替代内容（文本）。
此标签可被用于可识别<script> 标签但无法支持其中的脚本的浏览器。
此段代码意思为如果浏览器不支持script的代码，则会显示嵌入的那个页面的内容
7. base标签
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: