2、HTML入门——HTML元信息

目录1. HTML头部2. 添加标题3. 元数据\meta\元素3.1 指定文档中的字符编码3.2 添加作者和描述3.2.1 搜索引擎中description的使用3.3 其他类型的元数据(略过)4. 在你的站点增加自定义图标5. 在HTML中应用CSS和JavaScript6. 为文档设定主语言参考待了解在页面加载完成的时候HTML文档的头部是不会显示在web浏览器的。它包含了诸如页面的title、指向CSS的链接、指向自定义网页图标的链接和其他的元数据等信息。Web浏览器等使用文档头部的信息正确渲染HTML文档。1. HTML头部!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8/title我的测试页面/title/headbodyp这是我的页面/p/body/htmlHTML头部包含HTMLhead元素的内容与body元素内容不同页面在浏览器加载后它的内容不会在浏览器中显示它的作用是保存页面的一些元数据。esmp;上述示例的头部非常简短。然而大型页面的头部会相当大。2. 添加标题title元素它可以为文档添加标题。但别和h1元素搞混了h1是为body添加顶级标题的。h1元素在页面加载完毕时显示在页面中通常只出现一次用来标记页面内容的标题。title元素是一项元数据用于表示整个HTML文档的标题。当网页被收藏的时候title元素中的标题会显示。3. 元数据meta元素元数据就是描述数据的数据而HTML有一个官方的方式来为一个文档添加元数据——meta元素。当然其他在这篇文章中提到的东西也可以被当做元数据。有很多不同种类的meta元素可以被包含进你的页面的head元素。3.1 指定文档中的字符编码metacharsetutf-8/这个元素简单的指定了文档的字符编码——这个文档中被允许使用的字符集。utf-8是一个通用的字符集它包含了任何人类语言中的大部分的字符意味着该web页面可以显示任意的语言所以对于你的每一个页面都使用这个设置会是一个好主意。字符编码utf-8正常显示日文!DOCTYPEhtmlhtmllangen-USheadmetacharsetutf-8metanameviewportcontentwidthdevice-widthtitlelt;titlegt;element/title/headbodyh1lt;h1gt;element/h1pJapanese example: ご飯が熱い。/p/body/html将charset改为ISO-8859-1(拉丁字母表的字符集)日文出现乱码3.2 添加作者和描述许多meta元素包含了name和content属性name指定了meta元素的类型说明了该元素包含了什么类型的信息。content指定了实际的元数据内容。这两个meta元素对于你定义你的页面的作者和提供页面的简要描述是很有用的metanameauthorcontentChris Mills/metanamedescriptioncontentThe MDN Web Docs Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications./指定作者在某些情况下是很有用的如果你需要联系页面的作者问一些关于页面内容的问题。一些内容管理系统能够自动获取页面作者的信息然后用于某些用途。指定一个包括与你的页面内容有关的关键词的描述是有用的因为它有可能使你的页面在搜索引擎进行的相关搜索中出现得更多。3.2.1 搜索引擎中description的使用打开MDN Web Docs按下F12进入Web的控制台点击上面的标签页中的元素在head元素下面可以找到如下description在bing搜索中搜索MDN Web Docs中文3.3 其他类型的元数据(略过)当你在网站上查看源码时你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作旨在向某些网站提供可使用的特定信息。4. 在你的站点增加自定义图标为了进一步丰富你的网页设计你可以在元数据中添加对自定义图标的引用它们会在某些场景中显示。最常见的用例是favicon(favorites icon的缩写)。这个不起眼的图标已经存在很多年了16像素的方形图标是第一种类型。你可以看见这些图标出现在浏览器每一个打开的标签页中以及书签面板中的书签页面旁边。页面添加网页图标的方式有1. 将其保存在与网站的索引页面相同的目录中以.ico格式保存。2. 将以下行添加到HTML的head块中以引用它linkreliconhreffavicon.icotypeimage/x-icon/可以通过多个link元素并为每个元素设置不同的rel属性值来为不同的使用场景分别指定图标。5. 在HTML中应用CSS和JavaScript如今你使用的所有网站都会通过CSS来让网页更加酷炫并使用JavaScript来让网页有交互功能比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见它们分别使用link元素以及script元素。link元素经常位于文档的头部它有两个属性relstylesheet表明这是文档的样式表而href包含了样式表文件的路径linkrelstylesheethrefmy-css-file.css/script元素也应当放在文件的头部并包含src属性来指向需要加载的JavaScript文件路径同时最好加上defer以告诉浏览器在解析HTML后加载JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的HTML内容。这样你就不会因为JavaScript试图访问页面上不存在的HTML元素而产生错误。实际上有很多方式来处理在你的页面上加载JavaScript但对于现代浏览器来说这是最可靠的方法。scriptsrcmy-js-file.jsdefer/script添加js脚本和css样式表后的htmljs脚本和css样式表的文件名与html中一致就行!DOCTYPEhtmlhtmllangen-USheadmetacharsetutf-8metanameviewportcontentwidthdevice-widthtitleMeta examples/titlemetanameauthorcontentChris MillsmetanamedescriptioncontentThis is an example page to demonstrate usage of metadata on web pages.metapropertyog:imagecontenthttps://developer.mozilla.org/mdn-social-share.pngmetapropertyog:descriptioncontentThis is an example page to demonstrate usage of metadata on web pages.metapropertyog:titlecontentMetadata; The HTMLlt;headgt;, on MDNlinkrelShortcut Iconhreffavicon.icotypeimage/x-iconlinkhreflearning.cssrelstylesheettypetext/cssscriptsrclearning.js/script/headbodyh1Meta examples/h1pJapanese example: ご飯が熱い。/p/body/htmlconstlistdocument.createElement(ul);constinfodocument.createElement(p);consthtmldocument.querySelector(html);info.textContentBelow is a dynamic list. Click anywhere on the page to add a new list item. Click an existing list item to change its text to something else.;document.body.appendChild(info);document.body.appendChild(list);html.onclickfunction(){constlistItemdocument.createElement(li);listItem.textContentprompt(What content do you want the list item to have?);list.appendChild(listItem);listItem.onclickfunction(e){e.stopPropagation();this.textContentprompt(Enter new content for your list item);}}html{background-color:green;font-size:20px;}ul{background:red;padding:10px;border:1px solid black;}li{margin-left:20px;}然后安装nodejs选择nodejs的包管理器来运行html文件。bun无需安装nodejs直接bun run xxx.html上面的js脚本中在页面中添加了一个空列表。现在当你点击列表中的任何地方浏览器都会弹出一个对话框要求你为新列表输入一些文本内容。当你点击OK按钮刚刚这个新的列表项会添加到页面上当你点击那些已有的列表项会弹出一个对话框允许你修改列表项的文本。CSS使页面背景变成了绿色文本变得大了一点。它还将JavaScript添加到页面的一些内容进行了样式化。6. 为文档设定主语言可以为站点设置语言这个可以通过添加lang属性到HTML开始的标签中来实现如下所示htmllangzh-CN/html如果你的HTML文档的语言设置好了那么你的HTML文档就会被搜索引擎更有效地索引对于那些使用屏幕阅读器的视障人士也很用。还可以将文档的分段设置为不同的语言pJapanese example:spanlangjaご飯が熱い。/span./p参考1、HTML元信息待了解1、搜索引擎优化