电子商务网站建设与管理的论文,重庆网站推广报价,广东省建设注册中心网站,网站统计热力图目录
HTML进阶知识
前言
准备工作
标签的扩展#xff08;一#xff09;
本文中的标签在什么位置使用#xff1f;
title标签
meta标签
name
viewport
referrer
http-equiv
charset
content
link标签
实际案例
可视部分
代码分析
其他标签
base标签
styl…目录
HTML进阶知识
前言
准备工作
标签的扩展一
本文中的标签在什么位置使用
title标签
meta标签
name
viewport
referrer
http-equiv
charset
content
link标签
实际案例
可视部分
代码分析
其他标签
base标签
style标签
script标签
noscript
预告和回顾
后话 HTML进阶知识
前言
本系列博客是对入门专栏的HTML知识的补充并伴随一些补充案例。
这一期主要介绍位置在HTML文档头部里的内容。
不是专业的科普博主文笔不好多多包涵嘿嘿。
准备工作
软件【参考版本】Visual Studio Code
插件扩展包Office Viewer(Markdown Editor)
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
*我的电脑是Win10的版本仅供参考*
标签的扩展一
本文中的标签在什么位置使用
本文中我们需要掌握的是写在头部标签head中的各种标签。
title标签
这个标签主要有下面三个作用
定义不同文档的标题显示在搜索引擎结果页面的标题添加书签时默认的标题
所谓文档标题就是HTML头部标签中的标题也就是类似下面这一部分 搜索引擎搜索后出现的具体页面就是结果页面。结果页面标题的位置类似下面这样 书签一般来说就是我们浏览器的默认收藏夹在下面这个位置 添加书签时以添加示例网页为例可以显示如下内容其中的默认名称就是title的内容 meta标签
meta标签描述了一些基本的元数据为单标签。
元数据不显示在页面上但会被浏览器解析通常用于指定网页的描述关键词文件的最后修改时间作者和其他元数据。
元数据可以使用于浏览器如何显示内容或重新加载页面搜索引擎关键词或其他Web服务。
meta标签常见的属性如下
属性名值name元数据类型http-equiv响应内容charset解析字符集类型content具体内容
下面将较为详细的介绍各个属性及其对应的值说的不一定全见谅。
name
用于设置一些预设的内容。这里主要介绍几个常见的name属性值在下面这个表格里
属性值含义keywords搜索引擎关键词description定义网页描述内容author定义网页作者viewport窗口适配屏幕referrer指示链接来源
这些属性值我会在案例中讲到这里需要提前知道下面的这些知识点
viewport
当页面的宽度默认布局窗口超出了屏幕的窗口大小理想视图窗口我们需要将这个大小调节到适应我们屏幕的大小。
标准的viewport设置的属性值有六个我们来分别解释一下每一个值的意思
width控制viewport的宽度。“device-width”意思是设置视口宽度为设备宽度。
height控制viewport的高度。“device-height”意思是设置视口高度为设备高度。
initial-scale定义初始缩放比例即每次加载该页面时缩放的比例。一般值为1即默认不缩放显示。
maximum-scale允许用户缩放到的最大缩放比例。
minimum-scale允许用户缩放到的最小缩放比例。
user-scaleable是否允许用户缩放可以传“yes”或“no” 。
referrer
用于指示当前请求的来源页面。当用户通过点击链接从一个网页跳转到另一个网页时浏览器会在响应头中包含这个字段告诉服务器该请求是从哪个页面链接过来的。
这个访问信息被记录可以方便网站统计链接的浏览量数据、日志数据等便于网站的维护和管理。
同时对于外部链接联系服务器内部referrer字段也会进行阻止或询问提高了安全性。
http-equiv
又叫http响应头、http文件头。当浏览器请求某个文件时首先会加载此响应头内的设置。
这里主要介绍几个常见的http-equiv属性值
属性值含义refresh网页刷新时间间隔content-type网页内容类型
charset
声明网页解析字符串类型。常见的网页类型如下
属性值含义utf-88位Unicode编码常用兼容性强GBK中文字符集编码注意兼容性
content
定义对应meta数据的具体内容。
link标签
link标签为我们的网页引入一些资源为单标签。
比如我们的网页三层结构里的表现层CSS即样式表如果我们的样式表被封装为一个单独的CSS文件就需要用link标签以资源的方式引入。
或者换一个更简单的例子考虑到不一定学了CSS比如我们的网页标题边上有一个小图标它也是使用link标签引入的资源。
link标签常见的属性有下面这些
属性名值rel定义当前文档与被链接文档的关系href定义链接文档的位置type规定被链接文档的类型
关于rel目前记住下面两个就差不多了
值含义对应type值stylesheet引入外部样式表资源可暂时不写shortcut icon网页小图标 image/x-icon
实际案例
可视部分
我们以CSDN的网站为例先说我们可以看到的部分吧。
浏览器里搜索CSDN字样在出现的搜索条目中可以看见下面这个界面 看到最上面的 CSDN - 专业开发者社区 的字样了吗 点进详情页可以看到它与在浏览器上方的网页标题的内容是相同的。说明这个部分是网页的标题。
接下来是灰色的小字“CSDN是全球知名......”这个部分就是网页的描述内容即description的内容。
代码分析
接下来就要进入代码中查看了使用快捷键F12快速查看搜索界面网页源代码可以看到这一段代码
titleCSDN - 专业开发者社区/title
这里也就是我们说的网页标题。
meta namekeywords contentCSDN博客,CSDN学院,CSDN论坛,CSDN直播
content中的内容就是我们得以搜索到CSDN网页的关键词。
下一段代码是
meta namedescription contentCSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
content中的内容就是我们此前看到的灰色小字即网页内容的描述类似简介。
下一段代码是
meta http-equivcontent-type contenttext/html;charsetutf-8 响应头里定义了网页的内容文本类型并规定了对应的编码类型utf-8。
下一段代码是
meta nameviewport contentinitial-scale1, maximum-scale1, user-scalableno, minimal-ui
像CSDN这里并没有指定宽和高则initial-scale会让视图默认铺满屏幕适应理想窗口大小。
关于理想窗口大小这里就不拓展了感兴趣的可以自己搜搜看。
最后的minimal-ui是一种UI设计的框架暂时不做拓展。它是应用在移动端APP上的让界面UI更加美观。
接着看下面一行代码
meta namereferrer contentalways
比如如果我们在博客里点击任意链接那么设置了该字段的网站就会为服务器提示页面的地址信息等。
中间跳过一些JS的内容来看到下面这行代码
link relshortcut icon hrefhttps://g.csdnimg.cn/static/logo/favicon32.ico typeimage/x-icon
还记得网页的标题吗这里表示的是标题边上的小图标。 其他标签
以下标签暂时只做了解对于其中的某些标签在学习到对应阶段的时候会说的目前不需要了解那么透彻。
base标签
该标签的作用是为页面上的所有链接规定的默认地址或默认目标。
一个HTML中最多使用一个base标签当用多个base标签定义了超文本引用路径时默认使用第一个base中的路径。
比如下面这个锚链接实现打开我的头像的效果。常规的代码如下
a hrefhttps://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1H2O2的头/a
现在有了base标签base标签中指定的默认路径如下
base hrefhttps://profile-avatar.csdnimg.cn/4b2a87ef8c5d4789a6b8fb88457350a2_zc13786305863.jpg!1
那么即使我们的锚链接的href中不指定url也可以实现相同的打开效果。即下面这样
a hrefH2O2的头a/
style标签
style标签用于定义网页的样式即CSS样式。
CSS样式的定义方式有三种分别是标签内定义的行内内联样式、link标签引入的CSS文件外部样式表和使用style标签在头部区域定义的内部样式表。
具体内容会在CSS入门系列中分享。
script标签
该标签通常用于定义客户端的脚本文件即内部嵌入JavaScriptJS代码。
js的内容也可以使用外部js文件利用link标签引入具体内容会在JS入门系列中分享。
noscript
noscript标签用于当浏览器不支持脚本语言时替换的内容。
比如现在我有这样一个弹窗文字代码
scriptwindow.onloadfunction(){alert(示例弹窗);}/script
在示例网页中加载效果如下 由于我们使用的是Chrome浏览器所以可以使用设置来禁用JavaScript。只需要在浏览器地址栏里输入下面的地址就可以找到启用和禁用JS的选项 chrome://settings/content/javascript 禁用后首先添加下面的noscript代码
noscripth1不弹窗了弹不了一点/h1/noscript
然后就可以在浏览器中看到原本的弹窗行为不见了取而代之的是noscript中的内容 *设置试完记得改回来*
预告和回顾
HTML入门阶段的博客点赞、收藏和阅读量都比较可观这一点还是很不错的这将是我不断更新的动力源泉。
不过HTML进阶篇的更新可能比较随性了最近在更新CSS入门系列的博客。
对HTML基础掌握不熟悉的朋友也可以看看我已经完结的HTML入门系列文章希望能对你有所帮助
专栏 | HTML入门http://t.csdnimg.cn/It2Ww
后话
在全栈领域博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。 期待与你在下一期博客中再次相遇 ——勉强还有点氧气的【H2O2】
