第1版个人主页代码说明

第一版主页由html生成，但html不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。第一版主页全部代码如下，复制粘贴到txt文本，然后重命名为html后缀格式的文件，点击就会通过浏览器打开，显示的就是一个静态网页。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>王如飞的主页</title>
<style mip-custom>
body {text-align: center； padding:2.5em; font-size:1.2em; line-height:1.6; }
h1 {font-size:1.6em; margin-bottom: 1.2em;}
h2 {font-size:1.4em; margin-bottom: 1.2em;}
p {margin-bottom: 1.2em;}
.DarkGray { color: DarkGray;}
a {text-decoration: none;}
</style>
</head>
<body>
<font face="微软雅黑">
<h1>王如飞的主页</h1>
<p>这是一个最初级的主页</p>
<p>也是我目前写的最高水平</p>
<p>随着技术提高也会慢慢改变</p>
<p>感兴趣可以浏览<a target="_blank" rel="nofollow" href="http://wangrufei.com/">我的博客</a></p>
<p>里面有相关学习日志</p>
<p><small><a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn/"><span class="DarkGray">冀ICP备19025288号</span></a></small></p>
</font>
</body>
</html>

以下为代码说明

<!DOCTYPE html>

声明文档类型，能自动检测错误。

<html></html>

网页根元素，覆盖整个代码页面，从头到尾。html元素由开始标签、结束标签与内容相结合，这样才是一个完整的元素。这里的<html>为开始标签，</html>为结束标签，下面类似的代码都是这样的组合，有的跨度大，有的跨度小。

<head></head>

这个元素是一个网页头部容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。

<meta charset="utf-8">

设置该页面使用utf-8字符集，包括了人类大部分文字，作用是识别页面的文字内容。这也叫空元素，即只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西，比如还能插入一张指定的图片，当然代码就不一样了，图片代码是这样的<img src="图片链接"，结构和字符集元素一样。

语法形式：<标签属性=“属性值” />

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

该代码作用是自动适配不同分辨率的移动设备，viewport就是设备屏幕上用来显示网页的区域，这也是一个空元素，后面代码就是让页面自动适配移动屏幕的。meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width：设置layout viewport的宽度，为一个正整数，或字符串"width-device"
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用。
user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了，之间不分先后顺序。

语法形式：<标签属性="属性值", 属性="属性值"></标签>

该部分参考链接：https://www.cnblogs.com/2050/p/3877280.html

<title></title>

设置网页的标题，出现在浏览器的标签上。

MIP百度推出的前端开发组件，技术来源于Google AMP技术，MIP由MIP-HTML、MIP-JS、MIP-Cache组成。这里只是用到了MIP-HTML里的style属性
MIP没有对CSS做特别的限制（但是会自动去掉一些性能极差的选择器），也允许使用外链的方式引入CSS文件（虽然并不建议这么做，因为这样引入的CSS文件通常非常大）。对于内联的CSS，需要使用 <style mip-custom></style> 包裹。

该段代码作用是为文字部分添加样式，比如body里的是text-align: center;用来控制整体文字居中效果，padding控制页面上方空白填充，font-size:1.2em;控制字体大小，line-height:1.6;控制行高。h1/h2/p/标签也是控制字体大小，.DarkGray是用来修改备案文字颜色的，a是让超链接没有下划线。

根据MIP-HTML头部使用规范，我的页面里并没有加下面三个也能正常显示，后来我添加上看了一眼，和之前一样，可能我用的属性比较少吧，还用不到这些功能。

该部分参考链接：
https://segmentfault.com/a/1190000015462336
https://www.mipengine.org/doc/2-tech/1-mip-html.html

<body></body>

这个元素中间的文字就是用户访问网站是看到的文字，可以包括图片、音频、视频等。

<font face="微软雅黑"></font>

该元素可控制标签内文字字体。

<h1></h1>

文字标题，小一号的标题是h2，再小一号是h3，从h1到h6，一共六个。

<p></p>

段落文字，段落与段落之间有段间距。

<br>

下一行，如果需要多行，可以连续使用。

<p><small><a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn/"><span class="DarkGray">冀ICP备19025288号</span></a></small></p>

这部分包含的技术点比较多，首先说明的点击文本跳转指定超链接代码如下

<ahref="http://www.beian.miit.gov.cn/">冀ICP备19025288号</a>

如果想让这个链接在新窗口打开的话，添加该属性target="_blank"，这个过程是通过window.opener对象来完成的，如果想让网站的权重不传递到链接到网站，则添加属性rel="nofollow"。

其中rel有三种属性值，其余两个为noopener和noreferrer，前者安全性高，防止链接过程被黑客利用window.opener.location打开恶意网站。后者功能也类似，对旧浏览器比前者好，所以这两个可以同时互补使用。

该部分参考链接：https://pointjupiter.com/what-noopener-noreferrer-nofollow-explained/

<span class="DarkGray"文字</span>这段代码用于配合MIP-custom来修改文字的颜色。

<small></small>该元素使文本的字体变小一号，例如从大变成中等，从中等变成小，从小变成超小。用于表示表示边注释和附属细则，包括版权和法律文本。

到此，我的第一版里用到的代码都说明完了。

以上基础代码学习来源：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started

最新文章

分类

标签

归档