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>HTML初学者小知识的更多相关文章
- HTML初学者小知识2
网页内嵌 代码以及演示如下 代码 <div id="tab_1"> <iframe src="div.html" height="5 ...
- 在VC6.0下运行C语言程序，以及编程入门必备的常识类小知识！
今天给大家分享在VC6.0环境下编写C语言程序的基本步骤,为初学者打开学习C语言的第一道门.具体步骤如下(如果需要软件资源,可以留言): 1)新建工作区 依次点击 文件--新建--工作区 或是Ctrl ...
- 蓝牙Bluetooth技术小知识
蓝牙Bluetooth技术以及广泛的应用于各种设备,并将继续在物联网IoT领域担任重要角色.下面搜集整理了一些关于蓝牙技术的小知识,以备参考. 蓝牙Bluetooth技术始创于1994年,其名字来源于 ...
- HTML+CSS中的一些小知识
今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...
- iOS APP开发的小知识(分享）
亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...
- Unix系统小知识（转）
Unix操作系统的小知识 2.VI添加行号/翻页/清屏 .在对话模式时(即输完Esc再输入: ),输入“:set number”可以将编辑的文本加上行号.跟玩俄罗斯方块一样方便的上下左右移动箭头的快捷 ...
- salesforce 零基础开发入门学习（十）IDE便捷小知识
在这里介绍两个IDE的便捷开发的小知识. 一) 本地调试 由于salesforce代码只能提交以后才能调试,所以很多时候调试代码很麻烦.新版增加了一个特性:即可以在本地调试相关的代码或者查看相关代码运 ...
- Jquery:小知识；
Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...
- HTML小知识---Label
今天知道了一个html小知识: <input type="checkbox" id="chkVersion" /> ...
随机推荐
- buuctf刷题记录
极客大挑战 2019]EasySQL-1 直接通过输入万能密码:' or 1=1#实现注入: 思考:服务端sql语句应该为:select * from users where username='xx ...
- 合宙AIR105(四): SPI, MAX7219 8x8LED驱动
目录 合宙AIR105(一): Keil MDK开发环境, DAP-Link 烧录和调试 合宙AIR105(二): 时钟设置和延迟函数 合宙AIR105(三): 定时器, 定时器中断和PWM输出 合宙 ...
- DAST 黑盒漏洞扫描器 第四篇：扫描性能
0X01 前言 大多数安全产品的大致框架 提高性能的目的是消费跟得上生产,不至于堆积,留有余力应对突增的流量,可以从以下几个方面考虑 流量:减少无效流量 规则:减少规则冗余请求 生产者:减少无效扫描任 ...
- Windows 启动过程
引言 启动过程是我们了解操作系统的第一个环节.了解 Windows 的启动过程,可以帮助我们解决一些启动的问题,也能帮助我们了解 Windows 的整体结构. 以下内容将分为[加载内核].[内核初始化 ...
- Lua5.4源码剖析：二. 详解String数据结构及操作算法
概述 lua字符串通过操作算法和内存管理,有以下优点: 节省内存. 字符串比较效率高.(比较哈希值) 问题: 相同的字符串共享同一份内存么? 相同的长字符串一定不共享同一份内存么? lua字符串如何管 ...
- NC20032 [HNOI2003]激光炸弹
NC20032 [HNOI2003]激光炸弹 题目 题目描述 一种新型的激光炸弹,可以摧毁一个边长为R的正方形内的所有的目标. 现在地图上有 \(n\) (\(N ≤ 10000\))个目标,用整数 ...
- 内存分析器 (MAT)
内存分析器 (MAT) 1. 内存分析器 (MAT) 1.1 MAT介绍 MAT是Memory Analyzer tool的缩写.指分析工具. 1.2 MAT作用 Eclipse Memory ...
- Kafka启动遇到ERROR Exiting Kafka due to fatal exception (kafka.Kafka$) 解决办法 从kafka的根目录启动 bin/kafka-server-start.sh config/server.properties
Mysql配置读写数据库 ERROR 1227 (42000): Access denied; you need (at least one of) the SUPER privilege(s) fo ...
- 如何用车辆历史违章查询API接口进行快速开发
最近公司项目有一个车辆的历史违章查询显示的小功能,想着如果用现成的API就可以大大提高开发效率,所以在网上的API商店搜索了一番,发现了 APISpace,它里面的车辆历史违章查询API非常符合我的开 ...
- 从编译器对指令集的要求看API设计原则
摘要:最近看<计算机体系结构:量化研究方法(第五版)>,发现指令集设计中的一些原则,对API设计也同样适用,给大家分享一下. 本文中的所有内容来自工作和学习过程中的心得整理,如需转载请注明 ...