HTML 基本骨架

HTML5的骨架是构建HTML5页面的基础结构,它主要由以下几个部分组成:

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>标题</title>
</head> <body>
<div>
<p>正文</p>
</div>
</body> </html>

1. DOCTYPE声明

  • 作用:DOCTYPE是document type(文档类型)的缩写,它位于HTML文档的最前面,用于告知浏览器这个文档使用的是哪个HTML版本。对于HTML5,DOCTYPE声明如下:
<!DOCTYPE html>

这个声明是HTML5页面的必备组成部分,它有助于避免浏览器的怪异模式(quirks mode),确保页面在不同浏览器中能够以统一的标准进行渲染。

2. <html>标签

  • 作用:<html>标签是HTML页面的根元素,它包裹了整个页面的内容。<html>标签限定了文档的开始点和结束点,浏览器在解析到这个标签时,就会知道这是一个HTML文档。
<html lang="en">
...
</html>

其中,lang="en"属性用于指定当前页面的主要语言是英语。这有助于搜索引擎更好地理解页面内容,并改善无障碍访问性(accessibility)。

3. <head>标签

  • 作用:<head>标签用于定义文档的头部,它包含了文档的元数据(metadata),如文档的标题、字符集编码、对外部文件(如样式表、脚本)的引用等。<head>标签中的内容不会直接显示在网页上,但对网页的渲染和行为有重要影响。
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js" defer></script>
</head>
  • <meta charset="UTF-8">:指定页面的字符编码为UTF-8,这是一种广泛使用的字符编码,能够表示世界上大多数语言的字符。
  • <title>标签:定义了网页的标题,这个标题会显示在浏览器的标题栏或标签页上。<title>标签是<head>标签中唯一必须包含的标签。
  • <link>和<script>标签:分别用于引入外部的样式表和JavaScript文件。这些文件通常包含了页面的样式和行为逻辑。

4. <body>标签

  • 作用:<body>标签定义了HTML文档的主体部分,即用户可以直接在浏览器中看到的内容。<body>标签包含了网页的所有内容,如文本、图片、链接、表格、列表等。
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<img src="data:image.jpg" alt="描述性文本">
<!-- 其他内容 -->
</body>

在<body>标签中,可以使用各种HTML标签来构建网页的结构和内容。

HTML 基本骨架的更多相关文章

  1. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  2. HTML5入门(---------------HTML——基本骨架--------------)

    HTML基础 一.HTML 超文本标记语言.英文全拼:HyperText Markup Language.负责网页的语义描述. 二.HTML基本骨架 <!DOCTYPE html> < ...

  3. Maven之自定义archetype生成项目骨架(一)

      Maven之自定义archetype生成项目骨架(一) 标签: mavennexus插件 2015-07-15 16:40 2443人阅读 评论(0) 收藏 举报  分类: Maven技术(9)  ...

  4. python数字图像处理(19):骨架提取与分水岭算法

    骨架提取与分水岭算法也属于形态学处理范畴,都放在morphology子模块内. 1.骨架提取 骨架提取,也叫二值图像细化.这种算法能将一个连通区域细化成一个像素的宽度,用于特征提取和目标拓扑表示. m ...

  5. 按照索引的细化提取骨架算法的java实现

    近期研究验证码识别,也就看了一些图像识别的资料,其中一种字体细化提取骨架的算法网上没有java版的实现,所以就选取了一个python实现版本进行java代码的改写.. python版实现的地址: ht ...

  6. 【转】idea 用maven骨架生成项目速度慢的问题

    转自:http://9leg.com/maven/2015/02/01/why-is-mvn-archetype-generate-so-low.html 最近从IntelliJ Idea 14的Co ...

  7. cordova3.X 运用grunt生成plugin自定义插件骨架

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些 ...

  8. openni和骨架追踪 rviz查看---34

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 1.安装深度相机的NITE. 首先下载NITE-Bin-Dev-Linux-x64-v1.5.2.23, ...

  9. maven3实战之maven使用入门(使用archetype生成项目骨架)

    maven3实战之maven使用入门(使用archetype生成项目骨架) ---------- maven提供了archetype以帮助我们快速勾勒出项目骨架.以Hello World为例,我们使用 ...

  10. 沈逸老师PHP魔鬼特训笔记(6)--巫术与骨架

    PHP最牛逼的特性之一除了懒人函数,还有一些魔法函数. 首先我们来认识下__tostring,通过一个巫术方法,我们吧实例转化过后的类,直接当字符串输出.结合我们前面所做的功能,我们在类里面加上这个函 ...

随机推荐

  1. npm安装包出现Invalid Version,npm list报错UNMET DEPENDENCY报错

    执行 npm install 出现报错 2097 verbose stack TypeError: Invalid Version: 2097 verbose stack at new SemVer ...

  2. Personal Wiki

    What is a PersonalWiki? It's like WardsWiki, but it's yours. It can be: a free-form database a Perso ...

  3. 负载均衡-一致性Hash算法

    1. Hash算法 哈希(Hash)也称为散列,把任意长度的输入,通过散列算法变换成固定长度的输出,该输出就是散列值.哈希值(hashCode).(来自:百度百科) 在现实中,设计者常常将散列值作为索 ...

  4. Adobe PS 2024 软件分享 torrent

    Adobe-Photoshop-2024-25.5.0.375 下载工具建议使用 qBittorrent-enhance,qBittorrent, Transmission, uTorrent 等. ...

  5. sqlserver配置分发实现主备

    方案总体说明 本方案采用"发布-订阅模式" 由主服务器进行发布消息,备份服务器进行订阅 当主服务器数据发生变更时,就会发布消息,备份服务器读取消息进行同步更新,中间过程延迟比较短. ...

  6. Fleck:一个轻量级的C#开源WebSocket服务端库

    推荐一个简单易用.轻量级的C#开源WebSocket服务端库,方便我们快速实现WebSocket的开发. 01 项目简介 Fleck 是一个用 C# 编写的轻量级 WebSocket 服务器库.它提供 ...

  7. IOS 越狱

    iOS越狱 palera1n palera1n工具支持iOS 15.0 - 16.4.1版本的越狱 支持设备,最高支持到A11芯片 iPhone 8.8P.X iPad 5 .6.7,iPad Pro ...

  8. .NET Threadpool 饥渴,以及队列是如何使它更糟的

    .NET Threadpool 饥渴,以及队列是如何使它更糟的 .NET Threadpool starvation, and how queuing makes it worse - Criteo ...

  9. 中电金信技术实践|Redis哨兵原理及安装部署分享

    ​ 导语:本文主要围绕redis Sentinel的基本概念.部署Redis Sentinel模式和其相关的API等内容进行介绍,并讲述哨兵与主从关系的区别,以及哨兵机制是怎么实现高可用的,希望可以与 ...

  10. _findnext()调试中断,发生访问错误,错误定位到ntdll.dll

    问题: 采用_findfirst和_findnext获取指定的文件夹下的文件时,_findnext()函数在调试时发生中断,发生访问错误,错误定位到ntdll.dll.错误提示如下所示: _findn ...