-
让品牌有温度、有情感
专注品牌策划15年
manifest 指定网页缓存文件，可以让用户离线的时候也可以访问文件。
xmlns 设置html名空间，比如把网页设置成xhml的时候可以使用这个值。
lang 设置网页的描述语言，比如中文是zh；英文是en。
<meta> 标记
<title>定义网页的标题
<link> 链接
<script> 标记JavaScript脚本的内容
<style> 标记css样式
meta 标记
- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页标题(显示在浏览器上)</title> 6 <meta name="description" content="网页内容的简单描述"> 7 <meta name="keywords" content="网页关键词"> 8 <link rel="/css/style.css"> 9 <script src="/js/script.js"></script>10 </head>11 <body>12 <header>网页头部内容</header>13 <main>网页主要内容</main>14 <nav>网页的导航内容</nav>15 <footer>网页的页脚内容</footer>16 </body>17 </html>
name 描述信息的名称，来标记这是一个什么样的信息
http-equiv 描述行为
content 描述的内容
charset 指定网页的编码
- 1 <meta name="author" content="nyw">2 <!--作者， 定义网页的作者 -->3 <meta name="description" content="meta标记学习">4 <!-- 描述，描述网页的实际内容 -->5 <meta name="keywords" content="HTML,meta">6 <!-- 关键字，定义网页关键字 -->
- 1 <meta http-equiv="refresh" content="30">2 <!-- 网页30s后自动刷新 -->3 <meta http-equiv="refresh" content="5,url=dom.html">4 <!-- 网页30秒后跳转到dom.html文档 -->
content-type 指定http头部信息的文字编码（最为常用）
default-style 指定优先使用的样式单（stylesheet）
refresh 用于网页的自动刷新或是页面跳转
set-cookie 设置页面的cookie（现在已经不再推荐使用）
- <meta name="robots" content="noindex,nofollow">
- <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->
- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>网页标题(显示在浏览器上)</title> 6 <meta name="author" content="nyw"> 7 <!--作者， 定义网页的作者 --> 8 <meta name="description" content="meta标记学习"> 9 <!-- 描述，描述网页的实际内容 -->10 <meta name="keywords" content="HTML,meta">11 <!-- 关键字，定义网页关键字 -->12 <meta http-equiv="refresh" content="30">13 <!-- 网页30s后自动刷新 -->14 <meta http-equiv="refresh" content="5,url=dom.html">15 <!-- 网页30秒后跳转到dom.html文档 -->16 <meta name="robots" content="noindex,nofollow">17 <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->18 </head>19 <body>20 </body>21 </html>
href 指定网页跳转到基准URL，如果不指定的话则默认为当前网站的当前路径。
target 指定链接的跳转帧如果不指定的话，则是在当前页面中跳转。
_blank 在新窗口中打开被链接的文档
_self 默认值，在相同框架中打开被链接的文档
_parent 在父框架集中
_top 在整个窗口中打开被链接文档·
framename 在指定框架中打开被链接文档
- 网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹
- 1 <!-- 网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹 -->2 <link rel="icon">3 <!-- 示例 -->4 <link rel="icon" href="img/favicon.png" type="image/png">5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">
- 1 <link rel="stylesheet">2 <link rel="stylesheet" href="style1.css" media="screen">3 <link rel="stylesheet" href="style2.css" title="主题样式文件">4 <link rel=" alternate stylesheet" href="style3.css" title="可选样式单">
- <!-- 网站RSS种子指定 -->
- <link rel="alternate" type="application/rss+xml">
- <!-- 为搜索引擎的准备的网页的URL -->
- <link rel="canonical">
- <link rel="canonical" href="http://www.aaa.zzz/help.html">
写出html5文档的基本结构（写出html5文档的基本结构包括）
发布时间：2023-04-13 18:31:47
稿源：
创意岭 阅读：
149
大家好！今天让创意岭的小编来大家介绍下关于写出html5文档的基本结构的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、HTML5的页面结构和HTML4有什么不同
如果单单说页面结构，不介绍新的特性、功能的话，人见解，最大的变化恐怕是语意化了，html5增加了了很多语意化标签，比如header、footer、nav等等。这些标签有利于让浏览器或者蜘蛛（搜索引擎）更好理解你的页面想表达的内容。比传统html4使用表格或者div布局更加有利于SEO或者无障碍阅读。
其次，页面头部的文档类型声明也比html4更加简洁，文档类型的作用，主要是告诉浏览器此文档是什么种类，该如何解析。html4有很多种头部文档声明，比较乱，新手可能很难一下子理解（说实话我也不太理解），而html5则精简到了一种：<!DOCTYPE HTML>这样就使代码出错，和兼容问题得到了妥善解决。
个人觉得主要是这些改动吧，望采纳。
二、HTML5是什么东西？
HTML： 指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，现在已经发展到4.01版了，得力于W3C建立的标准和规范，现在已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。 另外，W3C 与 WHATWG 合作创建一个新版本的 HTML，就是HTML5。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，为HTML世界注入更多惊喜，尽管 HTML5 仍处于完善之中，然而，大部分现代浏览器已经具备了某些 HTML5 支持，显示出来的生机和活力已是那样的激奋人心，特别是前端的工作中，那些针对浏览器兼容的问题将能得到很好的解决，更多的效果和应用也能更方便的实现。 前端工程师，也必然要与时俱进，紧跟业界时代发展的前沿，不然永远只停留在旧的技术上，只会被无情的淘汰。
第一阶段——HTML的学习。
超文本标记语言（HyperText Mark-up Language 简称HTML）是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。
HTML的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的！
在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。
于是进入第二个阶段——CSS的学习。
培训是针对那些有条件的人来说，很多小伙伴更喜欢的是自学。但是一个人自学毕竟力量是有限的，为了让想学习的人可以更好的学习，给大家推荐一个裙，前面是6 1 1，中间是肆 二 8，最后面就是壹 四 二，这里有很多想学习的人和你一起交流，也有大牛每天晚上免费教学，想要学习的人都可以加入我们，但是我们只欢迎想学习的人，不是来学习，随便看看的就不要进了。
CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。
同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。
“楼房”建设完成之后，我们可以交给用户使用，但是如果想让用户获得更佳的体验，我们还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。
为了完成这个任务，我们进入第三个阶段——JavaScript的学习。
JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板，屌丝瞬间逆袭高富帅！有么有？
此时，也许你还沉浸在JavaScript给你带来的惊喜之中，但你的项目经理却突然对你大吼道:
“这个效果在××浏览器下不兼容，重新搞……”
“不兼容？”瞬间石化了有木有？
“我擦，坑爹啊！那可是花了我一个晚上写了几百行代码搞定的啊，吐血了都!”
JavaScript的兼容性和复杂性有时候的确让我们头疼，还好有“大神”帮我们做了封装。
接下来我们进入第四个阶段——jQUery的学习。
jQuery是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器（jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持），同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其write less,do more的核心宗旨。这个Feel倍儿爽！有么有？
“豪华大楼”至此拔地而起，但是每天这样日复一日，年复一年的盖楼，好繁琐！能不能将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样岂不是爽歪歪？可以实现吗？答案是肯定的。
这种思想在Web前端开发中也是适合的，于是乎就出现了各种前端框架，在这里推荐给大家的是Bootstrap。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽！
Web前端的学习建议
最后给大家聊聊在学习Web前端中的一些建议和方法。
在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析，不能够从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自顶向下，逐步细化”的思想，先用几个盒子将页面从整体上划分，然后逐步在盒子中继续嵌套盒子。
“君子生非异也，善假于物也”，在学习的过程中还要多浏览一些优秀的网站，善于分析借鉴其设计思路和布局方法，见多方能识广，进而才可以融会贯通，取他人之长为我所用。
同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码，“偷”也是一种技能！
随着移动互联网热潮的到来，移动开发越来越受到大家的追捧，响应式布局、微网站等需求量不断增加，也是我们Web前端未来的发展方向之一，学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地！
三、html5基本知识点
一、HTML的开发工具和使用的浏览器
开发工具：记事本等文本编辑器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。
浏览器：Chrome、Firefox、IE、Safari、IPhone、Android。
二、HTML的基本要素
DOCTYPE 描述文档的类型
html 网页的根元素，写在网页的在外面
head 网页的头部信息，写在html标记的里面
body 网页的内容，写在html标记的里面
具体描述：
1、DOCTYPE 描述文档的类型，规定web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
网页可以使用的具体版本，网页中可以使用那些标记，每个版本的DTD版本均有不同
使用例子
HTML4的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5的例子
2、<html></html> 网页文档中的根标记
html 标签有三个特殊的属性
3、<head></head>头部标签在网页中只能有一个，设置HTML文档的头部信息，里面内容不会在页面中显示出来·。
head里面的标记
4、<body></body>只能有一个，显示网页的主体内容。
代码示例：
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
三、写在<head>中的标签
（一）、<meta>标签
<meta>元素的属性：
1、name 属性
2、http-equiv属性
<meta http-equiv="refresh" content="5,url=dom.html">
http-equiv描述网页的行为，行为 refresh刷新，内容为5，表示5秒后跳转到 dom.html这个文档。
3、content 属性
特殊属性
4、charset属性
指定网页的编码，推荐使用UTF-8来增加网页的兼容性。
代码实例：
为搜索引擎抓取机器人准备一些信息
这段代码可以禁止搜索引擎缓存和跟踪网页。
代码实例：
请点击输入图片描述
请点击输入图片描述
（二）、title、base标记
title和base标记都是写在head标签中
title：设置网页的标题
写法：<title>内容</title>。
base：指定网页跳转基准URL，如果不指定的话默认为当前网站的当前路径。
写法：<base href="http://www.aaa.zzz/">
base属性值：
<base href="http://baidu.com/"> 这是将页面跳转到百度的网站打开。
<base target="_blank"> 网页中的链接都应该在新的窗口中打开。
terget属性值：
（三）、link标记
link标记：链接外部文件时使用的标记，可以把外部文件的内容引入到当前文件中来，使当前网页实现更多的功能。
link属性：
href：指定链接外部路径的路径和文件名，要设置全路径并且带文件名
rel：引用文件，引用资源的类型定义
我们在使用link标签引用外部文件的时候，外部文件的类型是多种多样的。
alternate 代替文档（种子，其他语言版本，其他格式等等）
author 网页的作者
help 帮助文件的链接
icon 网页的图标
next 如果是连续网页的时候，指定下一个网页
prefetch 把链接外部资源时提前缓存起来。
prev 如果是连续网页
media 链接文件或是资源属于哪一种资源。
hreflang 链接文件的语言种类
type 链接文件的mi/me类型（比如说，图片图标文本）
sizes 根据link链接文件的类型，来指定文件的大小
代码示例：
链接网页图标：
注意：后面的href和前面type标注的类型要一致，这样既可以显示在浏览器，又可以显示在手机上
链接外部样式单
说明：
alternate 会在浏览器中会弹出一个对话框，供用户可以进行选择
media 表示媒体类型为屏幕，可以是手机，但不包括打印机和投影仪
title 对这个link进行简单的说明
网站RSS种子指定
为搜索引擎的准备的网页的URL
四、html5是什么？
HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。
广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务。
扩展资料：
HTML5添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。
其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的，同时也有一些属性和元素被移除掉了。
一些元素，像<a>、<cite>和<menu>被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
参考资料来源：百度百科——html5
以上就是关于写出html5文档的基本结构相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
cat的发音用中文怎么写出来（cat的发音用中文怎么写出来英语）
赣公网安备 50019002502384号
