网页结构和骨架基础知识

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

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代码,以及推荐的放置位置。

相关文章
|
设计模式 测试技术 编译器
C++项目中打破循环依赖的锁链:实用方法大全(一)
C++项目中打破循环依赖的锁链:实用方法大全
1264 0
|
存储 监控 NoSQL
快速认识OTS
## 什么是OTS   OTS 是Open Table Service的简称,现在已更名为表格存储Table Store,官网对它的解释为:OTS是构建在阿里云飞天分布式系统之上的 NoSQL 数据库服务,提供海量结构化数据的存储和实时访问。OTS 以实例和表的形式组织数据,通过数据分片和负载均衡技术,达到规模的无缝扩展。OTS 向应用程序屏蔽底层硬件平台的故障和错误,能自动从各类错误中快速
46639 2
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
AI自己长出了类似大脑的脑叶?新研究揭示LLM特征的惊人几何结构
近年来,大型语言模型(LLM)的内部运作机制备受关注。麻省理工学院的研究人员在论文《The Geometry of Concepts: Sparse Autoencoder Feature Structure》中,利用稀疏自编码器(SAE)分析LLM的激活空间,揭示了其丰富的几何结构。研究发现,特征在原子、大脑和星系三个尺度上展现出不同的结构,包括晶体结构、中尺度模块化结构和大尺度点云结构。这些发现不仅有助于理解LLM的工作原理,还可能对模型优化和其他领域产生重要影响。
207 25
|
前端开发 JavaScript
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
|
SQL 关系型数据库 MySQL
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
Java 数据库连接 Nacos
SpringCloud微服务配置管理、配置热更新
SpringCloud微服务配置管理、配置热更新
509 0
|
边缘计算 Cloud Native 物联网
探索数据库技术的未来:前沿发展与应用场景
一、引言 数据库技术作为信息时代的基石,承载着存储、管理和分析海量数据的重要任务
|
弹性计算 自然语言处理 Windows
通义灵码 Visual Studio 下载安装指南(附安装包)
本安装步骤适用于 Windows 10 及以上操作系统中安装和使用通义灵码。
2863 3