网页结构和骨架基础知识

简介: 网页结构和骨架基础知识

HTML网页结构


在HTML中,网页结构包括以下几个主要部分:

  • 文档类型声明,指定文档类型,避免浏览器怪异行为。
  • 主根元素 ****:整个网页的根元素,定义HTML文档,限定了文档的开始和结束点。
  • 头部元素 ****:包含网页的元数据信息,例如文档标题、字符集声明等。
  • 内容根元素 ****:包含网页的主要内容,是用户所见的部分。
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 头部信息 -->
</head>
<body>
  <!-- 网页内容 -->
</body>
</html>



头部标签 <head>


头部标签包含了一些重要的元素,如:

  • <meta>:描述HTML文档的属性和关键词,用于设置当前网页的各种参数和行为。
  • <title>:定义网页标题,出现在浏览器标签上,有利于SEO优化。
  • <link>:引入外部资源,常用于引入样式表。
  • <script>:引入JavaScript代码,可以放在头部或者身体后面,根据需要而定。
<head>
  <!-- 设置字符编码 -->
  <meta charset="UTF-8">

  <!-- 定义文档标题 -->
  <title>网页标题</title>

  <!-- 引入外部样式表 -->
  <link rel="stylesheet" href="styles.css">

  <!-- 定义网页描述 -->
  <meta name="description" content="这是网页的描述信息">

  <!-- 定义网页关键词 -->
  <meta name="keywords" content="关键词1, 关键词2, 关键词3">

  <!-- 设置视口大小和缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 模拟HTTP头部信息,设置浏览器兼容性 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 引入外部JavaScript文件 -->
  <script src="script.js" type="text/javascript" defer></script>
</head>


<meta>元数据


<meta>元素用于设置当前网页的各种参数和行为,例如:

  • charset:指定文档使用的字符编码,通常设置为UTF-8。
  • name**和****content**:定义网页的描述、关键词等元数据。
  • viewport:设置视口大小和缩放行为,用于移动端适配。
  • http-equiv:模拟HTTP头部信息,例如X-UA-Compatible可以设置浏览器兼容性。
  • 其他:还有一些其他的用法,例如控制浏览器的缓存、禁止转码等。


<link>外部资源


<link>元素用于加载外部资源,例如样式表(CSS文件)、网站图标(favicon)等。

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">


<script>脚本

<script>元素用于引入JavaScript代码,可以放在头部或者身体后面,一般推荐放在身体后面,以避免阻塞页面加载。

<script src="script.js" type="text/javascript" defer></script>
<script>
  console.log("Hello, world!");
</script>


总结

 

  1. **引言**:以爱迪生的名言开篇,告诉我们成功的秘诀在于不懈的努力。


2. **HTML网页结构**:解释了网页的主要构成部分,包括文档类型声明、主要元素 `<html>`、头部元素 `<head>` 和内容元素 `<body>`。


3. **头部标签 `<head>`**:介绍了头部标签的作用,包括设置网页标题、引入外部资源(如样式表和脚本)等。


4. **`<meta>`元数据**:详细解释了`<meta>`元素的作用,例如设置字符编码、描述网页内容等。


5. **`<link>`外部资源**:讲解了如何使用`<link>`元素引入外部资源,比如样式表和网站图标。


6. **`<script>`脚本**:说明了如何使用`<script>`元素引入JavaScript代码,以及推荐的放置位置。

相关文章
|
6月前
|
Web App开发 移动开发 前端开发
初探前端世界:网页基本结构入门指南
初探前端世界:网页基本结构入门指南
100 0
初探前端世界:网页基本结构入门指南
|
4月前
了解网页的基本概念
【8月更文挑战第30天】
34 4
|
4月前
网页的基本概念
【8月更文挑战第28天】
35 6
|
API iOS开发 wax
1.读对象模型一段文字摘抄 (唐巧高阶开发笔记)
1.读对象模型一段文字摘抄 (唐巧高阶开发笔记)
50 0
|
前端开发 JavaScript 程序员
从零开始学WEB前端——网页的骨架——HTML理论讲解
从零开始学WEB前端——网页的骨架——HTML理论讲解
128 0
|
前端开发 搜索推荐 索引
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
125 0
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
|
JavaScript 前端开发 API
重学前端 23 # 狭义的文档对象DOM
重学前端 23 # 狭义的文档对象DOM
72 0
重学前端 23 # 狭义的文档对象DOM
|
JavaScript
第二章 网页基本代码
本章将会学习网页的基本代码了解使用。
70 1
第二章 网页基本代码
|
移动开发 前端开发 HTML5
Web前端开发笔记——第二章 HTML语言 第五节 图像标签
Web前端开发笔记——第二章 HTML语言 第五节 图像标签
Web前端开发笔记——第二章 HTML语言 第五节 图像标签
|
XML 移动开发 搜索推荐
重学基础和原理 1 - 如何理解 HTML 语义化
做业务开发时间久了,很多基础的知识慢慢被遗忘,但往往这些基础和原理性的知识才是最重要的,丢不得。
127 0