HTML初学者小知识

引用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优化

标题（Title）
关键词（KeyWords）
描述（Description）
站点ICO头像
如何编写如下

站点标题代码如下
<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>

posted @ 2022-02-04 16:51 小kBlog 阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

酿俗boi

HTML初学者小知识

公告