引用js

<script src="链接/js代码位置" type="text/javascript"></script>

引用css

<link rel="stylesheet" href="链接/css代码位置" media="screen" type="text/css">

jS引用css

'<link rel="stylesheet" href="css代码位置" type="text/css">\n' +

创建全局js和css引用

document.write('<!-----------  公共js和css start----------->');

document.write('' +

    '<link rel="stylesheet" href="css代码位置">\n' +

    '<link rel="stylesheet" href="css代码位置" type="text/css">\n' +

    '<link rel="stylesheet" href="css代码位置">\n' +

    '');

如果无法引用添加 type="text/css"即可解决

php实现301跳转

<?php

    if ($_SERVER['HTTP_HOST'] <> "链接")

  {

    $xredir = "https://".$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

    header("Location: ".$xredir);

  }

?>

修改第二行的 链接 改为你自己的域名（随便带不带 www），然后第四行的 https://，如果你开启了 HTTPS 则不用修改，如果你没有 HTTPS 则修改为 http://。
然后添加到 header.php 文件的顶部即可，或者单独创建一个index.php文件也可以

引用css美化字体

@font-face {

    font-family:字体名称;font-style: normal;font-display: swap;

    src: url('字体链接') format('woff2'),

         url('字体链接') format('woff');

}

*{font-family:HarmonyOS_Sans_SC_Medium;}

小提示：为什么不引用ttf格式的字体，原因内存大影响站点性能

想引用ttf格式在添加一个代码如下

@font-face {

    font-family:字体名称;font-style: normal;font-display: swap;

    src: url('字体链接') format('woff2'),

         url('字体链接') format('woff');

         url('字体链接') format('ttf');

}

*{font-family:HarmonyOS_Sans_SC_Medium;}

下面以鸿蒙主题为列

下载 HarmonyOS 字体 - HarmonySanc 官方文档

可以参考我引用的代码字体已转换已上传云端如下

https://cdn.jsdelivr.net/gh/gylwj/tu@master/HarmonyOS_Sans_SC_Medium.ttf

https://cdn.jsdelivr.net/gh/gylwj/tu@master/ttf/HarmonyOS_Sans_SC_Medium.woff

https://cdn.jsdelivr.net/gh/gylwj/tu@master/HarmonyOS_Sans_SC_Medium.woff2

字体名称如下

代码引用如下可以参考

@font-face {

    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;

    src: url('https://cdn.jsdelivr.net/gh/gylwj/tu@master/ttf/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),

         url('https://cdn.jsdelivr.net/gh/gylwj/tu@master/ttf/HarmonyOS_Sans_SC_Medium.woff') format('woff');

}

*{font-family:HarmonyOS_Sans_SC_Medium;}

插件等博客引用如下看情况是不是需要,不许需要可以不引用,直接使用上面创建一个css引用

<style>

@font-face {

    font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;

    src: url('https://cdn.jsdelivr.net/gh/gylwj/tu@master/ttf/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),

         url('https://cdn.jsdelivr.net/gh/gylwj/tu@master/ttf/HarmonyOS_Sans_SC_Medium.woff') format('woff');

}

*{font-family:HarmonyOS_Sans_SC_Medium;}

</style>

H5站点SEO优化

  1. 标题（Title）
  2. 关键词（KeyWords）
  3. 描述（Description）
  4. 站点ICO头像
  5. 如何编写如下
站点标题代码如下

<title>网站标题名称</title>

站点关键词代码如下

<meta name="keywords" content="站点的关键词">

站点的描述代码如下

<meta name="description" itemprop="description" content="站点的描述">

站点的ICO头像代码如下

<link rel="shortcut icon" href="站点的头像">

QQ里发送链接自动识别卡片的代码如下

可配合上方代码一块添加

<meta itemprop="name" content="标题">

<meta itemprop="Description" content="描述内容">

<meta itemprop="image" content="显示的图片URL">

下面写一个完整的前端小知识

可以参考一下对初学者很有帮助

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>网站标题</title>

    <!--为搜索引擎定义关键词-->

    <meta name="keywords" content="搜索引擎关键词">

    <!--为网页定义描述内容 用于告诉搜索引擎，你网站的主要内容-->

    <meta name="description" content="描述">

    <!--定义网页作者-->

    <meta name="author" content="作者昵称">

    <!--网站版权-->

    <meta name="copyright" content="小k">

    <!--指定IE和Chrome使用最新版本渲染当前页面-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!--指导浏览器如何缓存某个响应以及缓存多长时间-->

    <!--no-cache:先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存

    no-store:不允许缓存,每次都要去服务器上,下载完整的响应(安全措施)

    public:缓存所有响应,但并非必须,因为max-age也可以做到相同效果

    private:只为单个用户缓存,因此不允许任何中继进行缓存,(比如说CDN就不允许缓存private的响应)

    maxage:当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求,例:max-age=60表示响应可以再缓存和重用60秒

    -->

    <meta http-equiv="cache-control" content="no-cache">

    <!--禁止百度自动转码 用于禁止当前页面在移动端浏览时,被百度自动转码,虽然百度的本意是好的,但是转码效果很多时候却不尽人意-->

    <!--meta http-equiv="Cache-Control" content="no-siteapp" /-->

    <!-- 分享网页时显示的标题-QQ-->

    <meta itemprop="name" content="标题名称" />

    <!-- 分享网页时显示的缩略图-QQ-->

    <meta itemprop="image" content="缩略图地址" />

    <!--分享网页时时显示的内容-QQ-->

    <meta name="description" itemprop="description" content="图片地址" />

    <!--设置自动适应电脑和手机屏幕-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no minimal-ui">

    <!--设置浏览器栏favicon图标-->

    <link rel="icon" href="ico图片地址" type="image/x-icon"/>

    <!--定义搜索引擎爬虫的索引方式-->

    <!--index,follow:可以抓取本页，而且可以顺着本页继续索引别的链接

    noindex,follow:不许抓取本页，但是可以顺着本页抓取索引别的链接

    index,nofollow:可以抓取本页，但是不许顺着本页抓取索引别的链接

    noindex,nofollow:不许抓取本页，也不许顺着本页抓取索引别的链接

    -->

    <meta name="robots" content="index,follow">

    <!--引入css文件-->

    <link rel="stylesheet" type="text/css" href="css文件地址">

    <link rel="stylesheet" href="css文件地址">

    <!--引入js文件-->

    <!--script type="text/javascript" src="js文件地址"></script-->

</head>

<body>

HTML初学者小知识的更多相关文章

  1. HTML初学者小知识2

    网页内嵌 代码以及演示如下 代码 <div id="tab_1"> <iframe src="div.html" height="5 ...

  2. 在VC6.0下运行C语言程序，以及编程入门必备的常识类小知识！

    今天给大家分享在VC6.0环境下编写C语言程序的基本步骤,为初学者打开学习C语言的第一道门.具体步骤如下(如果需要软件资源,可以留言): 1)新建工作区 依次点击 文件--新建--工作区 或是Ctrl ...

  3. 蓝牙Bluetooth技术小知识

    蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...

  4. HTML+CSS中的一些小知识

    今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...

  5. iOS APP开发的小知识(分享）

          亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...

  6. Unix系统小知识（转）

    Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...

  7. salesforce 零基础开发入门学习（十）IDE便捷小知识

    在这里介绍两个IDE的便捷开发的小知识. 一) 本地调试 由于salesforce代码只能提交以后才能调试,所以很多时候调试代码很麻烦.新版增加了一个特性:即可以在本地调试相关的代码或者查看相关代码运 ...

  8. Jquery:小知识；

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  9. HTML小知识---Label

    今天知道了一个html小知识: <input type="checkbox" id="chkVersion" />                 ...

随机推荐

  1. 从零开始实现lmax-Disruptor队列（二）多消费者、消费者组间消费依赖原理解析

    MyDisruptor V2版本介绍 在v1版本的MyDisruptor实现单生产者.单消费者功能后.按照计划,v2版本的MyDisruptor需要支持多消费者和允许设置消费者组间的依赖关系. 由于该 ...

  2. Mysql中的小技巧

    1.where 字段名 regexp '正则表达式' 正则符号: ^ $ . [ ] * | . 表示1个任意字符 * 表示前面重复0次,或者任意次 ^ 开始 $ 结尾 [] 范围 | 或 sql示例 ...

  3. docker删除镜像报错 Error response from daemon: conflict: unable to delete f73fe6298efc (cannot be forced) - image has dependent child images

    方法1 docker rmi 镜像ID 方法2 docker rmi -f 镜像ID 方法3 docker rmi 镜像仓库名:tag

  4. 星际争霸的虫王IA退役2年搞AI，自叹不如了

    ------------恢复内容开始------------ 金磊 发自 凹非寺 量子位|公众号 QbitA 这年头,直播讲AI,真算不上什么新鲜事.但要是连职业电竞选手,都开播主讲呢?没开玩笑,是真 ...

  5. JSON： JavaScript Object Notation

    JSON是JavaScript Object Notation 的缩写,是JS提供的一种数据交换格式.1) JSON对象本质上就是一个JS对象,但是这个对象比较特殊,它可以直接转换为字符串,在不同语言 ...

  6. MySQL--用通配符进行过滤（LIKE操作符）

    1.LIKE操作符 怎样搜索产品名中包含文本anvil的所有产品?用简单的比较操作符肯定不行,必须使用通配符.利用通配符可创建比较特定数据的搜索模式.在这个例子中,如果你想找出名称包含anvil的所有 ...

  7. Josephus问题(Ⅲ)

    题目描述 n个人排成一圈,按顺时针方向依次编号1,2,3-n.从编号为1的人开始顺时针"一二三...."报数,报到m的人退出圈子.这样不断循环下去,圈子里的人将不断减少.最终一定会 ...

  8. jdbc 06: 实现登陆页面

    jdbc连接mysql,实现简单的登陆验证 package com.examples.jdbc.o6_实现登录界面; import java.sql.*; import java.util.HashM ...

  9. 常用的函数式接口Consumer接口练习字符串拼接输出

    题目 下面的字符串数组当中有多条信息,请按照格式"姓名: XX 性别: XX"的格式将信息打印出来,要求将 打印姓名的动作为第一个Consumer接口的Lambda实例,将打印性别 ...

  10. el-form 每行显示两列，底部按钮居中

    需求: el-form 每行显示两列,底部按钮居中 问题: 以前的解决办法是: el-col, el-row.但是这里只有一个 el-form-item 的 label 数据是已知的,其余项都是循环得 ...