html代码基础知识讲解

信我或关注猿来如此呀公众号，回复：视频学习，即有机会免费领取30天视频学习资源包

字体语法：

align=center 字体居中

align=right 字体居右

align=left 字体居左

align=up 字体居上

align=down 字体居下

<"> <"> <"> <b>...</b>　粗体字

<strong>...</strong> 99彩票|http://99caipiao.com.cn粗体字(强调)

<i>...</i> 斜体字

<em>...</em> 斜体字(强调)

<dfn>...</dfn> 斜体字(表示定义)

<u>...</u> 底线

<ins>...</ins> 底线(表示插入文字)

<strike>...</strike> 横线

<s>...</s> 删除线

<del>...</del>　删除线(表示删除)

<kbd>...</kbd> 键盘文字

<tt>...</tt> 打字体

<"> <listing>...</listing> 固定宽度小字体

<"> <hr> 水平线

<hr size="9" 水平线(设定大小)

<hr width="80%"> 水平线(设定宽度)

<hr color="ff0000"> 水平线(设定颜色)

<br>　(换行)

<nobr>...</nobr> (不换行)

<p>...</p>　(段落)

<center>...</center> 置中 <!>连结格式

<base href=地址> 99彩票|http://99caipiao.com.cn (预设好连结路径)

<a href=地址></a> 外部连结

<a href=地址 target="_blank"></a> 外部连结(另开新窗口)

<a href=地址 target="_top"></a> 外部连结(全窗口连结)

<a href=地址 target="页框名"></a> 外部连结(在指定页框连结)

贴图/音乐：

<img src=图片地址> 贴图

<img src=图片地址 width="180"> 设定图片宽度

<img src=图片地址 height="30"> 设定图片高度

<img src=图片地址 alt="提示文字"> 设定图片提示文字

<img src=图片地址 border="1"> 设定图片边框

<bgsound src=MID音乐文件地址> 背景音乐设定

<body "> <body > 设定背景颜色

<img dynsrc="影视文件地址" width="宽度" height="高度" start=mouseover> 贴影视

<A href="对方网址">写文字 99彩票|http://99caipiao.com.cn 文字连接

<a href="对方网址"><IMG src="图片地址" border=0> 图片连接

<DIV><"> <P align=center><"> <marquee>...</marquee>普通滑动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回滑动

<marquee direction=down>...</marquee>向下滑动

<marquee direction=up>...</marquee>向上滑动

<marquee direction=right></marquee>向右滑动

<marquee direction=left></marquee>向左滑动

<marquee loop=2>...</marquee>滑动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scroll99彩|http://99caiw.comamount=2>...</marquee>设定滑动速度数值

<marquee scrolldelay=200>...</marquee>设定滑动时间

<marquee scrolldelay=300 scrollamount=100>插入文字</marquee>滑动停顿

<body ">五．表格语法：

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table "> <table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclo99彩|http://99caiw.comrdark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割窗口 99彩|http://99caiw.com

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

<! - - ... - -> 批注

<A HREF TARGET> 指定超级链接的分割窗口

<A HREF=#锚的名称> 指定锚名称的超级链接

<A HREF> 指定超级链接

<A NAME=锚的名称> 被连结点的名称

<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

来源网络，侵权删除

私信我或关注猿来如此呀公众号，回复：视频学习，即有机会免费领取30天视频学习资源包

求背景

前几天，甲方提了个需求，想让下面的数据循环展示，准备放在他们集团首页给他们领导演示用。

我们领导很重视这个事儿，拍了拍我，语重心长的说，小伙子，好好做。

我啪的一下就兴奋了，老板居然如此器重我，我必当鞠躬尽瘁，减少摸鱼，我要让老板拜倒在精湛的技术下！

于是，我搬出自己的库存代码，仅2min就实现了数据的滚动：

没错，我直接照搬了自己以前写过的文章：JS实现可滚动区域自动滚动展示 - 掘金

就在我准备告诉老板我做完了的时候，我突然想了想，这么快做完，老板一定觉得我没好好做，我以后还怎么升职加薪，赢取白富美？

于是，我连夜研究，终于改进了数据滚动方式，赢得了老板的大饼（以后涨500）。最终效果：

技术方案

技术选型

观察最终效果图，可以发现这其实就是一个数据循环滚动的效果，每条内容之间间隔1000ms，每条出现动的时间为500ms。用术语来说，这就是一个单步停顿滚动效果。

我百度了一下，社区还是有这个实现的现成方案的：vue-seamless-scroll，周下载也还行。

于是，我果断试了试，结果不知道什么原因，并不生效...

既然如此，直接手写一个吧！

实现思路

要实现上述效果其实很简单，如图

我们创造一个含有六个值的数组，每隔一段时间循环更改黄色区域的数据，当黄色区域数据变成最新的时候，红色区域整体向下移动，当有数值超出滚动区域后，在删除这个数据即可。

数据更新

如果不考虑动画，我们的代码应该这么写

<template>
<div class="item-wrap" v-for="(item, index) in animationData">
<!-- 模块内容 -->
</div>
</template>
<script setup lang="ts">
// #假设这是接口请求的10条最新数据
const allCarouseData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要轮播的数据
const animationData=ref<any>([])
// *定时器
const animationTimerMeta: any={
timer: null,
// 这个函数负责设置轮播数据的更新逻辑。
timeFuc() {
let setTimeoutId: any=null
if (this.timer) return
this.timer=setInterval(()=> {
// 取轮播数据的第一条id
let firstId=animationData.value[0].id
// 为轮播数据添加最新的第一项数据
let index=allCarouseData.value.findIndex((res: any)=> res.id===firstId)
let addIndex=index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
animationData.value.unshift(allCarouseData.value[addIndex])
setTimeout(()=> {
// 删除数组的最后一项
animationData.value.pop()
}, 1000)

}, 1500)
}
}
animationData.value=allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>

上述代码的主要功能是：

从 allCarouseData 中取出最后5个元素作为初始的轮播数据。
每1.5秒更新一次轮播数据，具体逻辑是：移除当前 animationData 的第一个元素，并从 allCarouseData 中取出前一个元素（如果已经是第一个元素，则取最后一个）添加到 animationData 的开头。
每1秒从 animationData 的末尾移除一个元素。

上述代码没有实现动画，他的效果是这样的：

动画添加

<template>
<div class="item-wrap" v-for="(item, index) in animationData"
:class="[{ moveToBottom: animationActive }, { show: animationActive && index===0 }]"
>
<!-- 模块内容 -->
</div>
</template>
<script setup lang="ts">
// #假设这是接口请求的10条最新数据
const allCarouseData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要轮播的数据
const animationData=ref<any>([])
// #是否开启动画
const animationActive=ref(false)
// *定时器
const animationTimerMeta: any={
timer: null,
// 这个函数负责设置轮播数据的更新逻辑。
timeFuc() {
let setTimeoutId: any=null
if (this.timer) return
this.timer=setInterval(()=> {
// 取轮播数据的第一条id
let firstId=animationData.value[0].id
// 为轮播数据添加最新的第一项数据
let index=allCarouseData.value.findIndex((res: any)=> res.id===firstId)
let addIndex=index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
animationData.value.unshift(allCarouseData.value[addIndex])
setTimeout(()=> {
// 删除数组的最后一项
animationData.value.pop()
}, 1000)

}, 1500)
}
}
animationData.value=allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>


@keyframes moveToBottom {
0% {
transform: translateY(-47px);
}
  
100% {
transform: translateY(0);
}
}

.moveToBottom {
animation: moveToBottom 500ms ease-in-out forwards;
}

@keyframes fadeInFromTop {
0% {
opacity: 0;
transform: translateY(-47px);
}

100% {
opacity: 1;
transform: translateY(0);
color: #683BD6;
}
}

.show {
animation: fadeInFromTop 500ms ease-in-out forwards;
}

上述代码中，为了实现动画效果，采用了动态添加类名的技术方案。

animationData 数组中的元素会按照一定顺序进行显示和隐藏，同时伴随有动画效果。当第一个元素进入视图时，它会应用 fadeInFromTop 动画；其他元素会应用 moveToBottom 动画。通过定时器，元素会定期从 allCarouseData 中获取新的数据并更新 animationData。

代码释义：

moveToBottom: 当 animationActive 为真值时，此类名会被添加到 div 上。
show: 当 animationActive 为真值且当前元素是数组的第一个元素时，此类名会被添加到 div 上。

CSS 释义：

moveToBottom 动画:

定义一个名为 moveToBottom 的关键帧动画，使元素从上方移动到其原始位置。

moveToBottom 类将此动画应用到元素上。

fadeInFromTop 动画:

定义一个名为 fadeInFromTop 的关键帧动画，使元素从上方淡入并改变颜色。

show 类将此动画应用到元素上。

通过上述简单的实现方式，就能最终实现我们想要的效果

相比于普通滚动，这种方式看起来要好很多！

结语

要想实现这种单步停帧的效果，其实有很多实现方式，这只是笔者实现的一种，核心逻辑就是动态改变数据、增添类名。如果大家还有更好的方式，也欢迎大家指点。

作者：石小石Orz
链接：https://juejin.cn/post/7348433631944556555

们对网站首页代码进行seo优化的目的在于提高网站首页打开速度，而加快网站打开速度则有利于用户体验度的提升和对搜索引擎的友好，因此，掌握如何优化网站首页代码方法和原则就显得尤为重要。

很多网站，为了吸引访客的注意，添加很多组件，殊不知这样的组件越多，会越加延迟网站的打开速度；另外一方面，如果你的网站是图片站，那么更要合理的优化首页代码，有数据显示，通过代码瘦身可以让页面最高缩减百分之三十。在此，seo教程自学网推荐阅读网站页面速度优化原则，衍生知识点。

作为seo人员，需要懂得如何精简代码，如何加快网站打开速度，即使不是技术流，也因知晓原理。在此，seo教程自学网总结了一部分网站首页代码优化方法与原则，详细如下：

1：删除多余的社交类组件。

这里需要指出，我们在网站中放入恰当的社交组件是建议的，但我们应该删除多余的社交类组件以提升网站加载打开速度。举个例子：某第三方网站提供的分享按钮代码体积大约为1/2M，另外平台的分享代码更小，我们就可以选择更小的；在举个例子，网站上遍布各种组件，留言板，在线沟通工具，分享按钮等，站长的初衷是好的，但更多的组件意味着很多网络连接或强制在加载页面之前进行，拉低了网站的打开速度，另外一方面也不利于用户体验。在这种情况下，我们就要优化首页代码，选择更小体积的代码，删除多余的组件代码。

2：采用用户点击加载技术。

如果你的网站是视频站点或图片站点，是不应该一次性加载网站的所有内容的，自动加载视频，图片等内容会加载API，这会直接拉低整站的速度，建议的做法是根据用户的需要，让他们自由点击，通过点击行为加载应该呈现的资源；举个例子，如果首页有大量图片内容，就可以采取滚动式页面，通过用户的下拉行为加载新的页面，这样做有利于用户体验，也有利于首页打开速度的提升。

3：使用矢量技术处理图片。

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

矢量技术处理图片具备很多优点，如：

用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等；

SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。

总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。

SVG 图像可被搜索、索引、脚本化或压缩。

也就是说，使用矢量技术处理的图片，可被搜索引擎识别，且相同情况下其文件会更小。

在此，推荐的工具有SVG edit，它可以将普通格式的文件转换为矢量图。

4：巧用css3代替图片效果。

基于css3的进化，其已经可以生成阴影，圆角边框，按钮，背景等效果，几乎可以取代传统的切片技术。在这样的前提条件下，完全可以通过css代码代替某些图片效果，其优点显而易见，代码比图片要小得多，也会提升网站首页打开速度。

另外一方面，如果使用大量图片布局网站，在不同的浏览器下，就会形成某些视觉问题，但css3技术就不存在这些问题，它们可以完美的支持各浏览器的兼容问题，而又不至于牺牲网站前端效果。

再次，seo教程自学网提醒：使用css3制作阴影等效果，其难度不小，需要更专业的前端技术人员才能实现。

5：javascript简称js代码优化。

众所周知，javascript特效的使用是阻碍网站打开速度的一个重要因素，对于这个点，需要着重把握和注意。前面讲了css3可以取代很多图片效果，其还有别的功能，如可以取代部分js特效效果，效果强大。

使用css3，取代部分js特效，有一些优势：

很多情况下css3代码的特效可以直接取代js代码。

css3代码体谅更小，也更容易编写。

6：用图标字体(icon fonts)代替首页图片。

利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象。

由于图标字体的灵活性和易用性使得图标字体使用越来越广泛了，我们经常可以看到不同的UI框架都整合了各种的图标字体。

除了「分辨率无关」这个最大的优点之外，icon fonts 还具有：

文件小：相比图片几十几百KB的容量，icon fonts 几乎是羽翼级轻量。

加载性能好：因为图标都被打包进一套字体内，http request 减少。这如同我们常用的 css sprites 技术。

支持CSS样式：和普通字体一样，你可以利用CSS来定义大小、颜色、阴影、hover状态、透明度、渐变等等…

兼容性好：web fonts 起源很早，别说主流浏览器，连IE6/7都能良好支持。除了一些老的移动端浏览器，如Android 2.1以下的初代浏览器，Opera mini 这类自限型浏览器。

当然 icon fonts 也有它的不足：

样式单一，无法针对不同分辨率来调整icon 的细节，比如降低大尺寸icon 的线条粗细。

颜色单一，CSS 无法方便的去定义彩色的 icon，倒是有通过叠加组合的方式来达到彩色图标的目的。

移动端浏览器兼容性还不够完善，像Opera mini、Windows phone 7.0-7.8 都不能正常显示icon fonts。

有少量的移动设备有可能会和 icon fonts 的字符编码冲突，导致icon 显示不正常（我们自己风车Android 版本就碰到了这个问题）。

所以 icon fonts 也并不是一套完美的响应式图片的解决方案，当它适宜你的应用场景时，比如：

你的网站是扁平化或简约风格，图标样式单一，颜色为纯色。

你的目标用户使用桌面浏览器为主，或者，

你愿意为非兼容设备做兼容hack。

icon fonts 是一个令设计师和前端工程师都心花怒放的方案。

icon fonts 的制作主要有两条思路：

利用字体工具手动制作

利用在线工具自动生成

7. sprite技术优化首页图片体积。

Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式。

在网站图片的解决方案中，CSS3应该是首选，其次是SVG和icon font,最后才是Bitmap。经常使用的Bitmap文件应该打包放在一个单独的sprite中，这样一来图片就可以在CSS中访问到了，像这样：

.sprite {

width: 16px;

height: 16px;

background: url(“sprite.png”) 0 0 no-repeat;

}

.sprite.help { background-position: 0 -16px; }

.sprite.info { background-position: 0 -32px; }

.sprite.user { background-position: 0 -48px; }

8. 使用data URIs减少http请求数。

假设你有一个图片，把它在网页上显示出来的标准方法是：

这种取得资料的方法称为 http URI scheme ，同样的效果使用 data URI scheme 可以写成：

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC” />

换句话说我们把图像档案的内容内置在 HTML 档案中，节省了一个 HTTP 请求。

data uri的主要优点是减少了http请求数，调用起来比css sprite更加灵活，缺点是增加了客户端的资源消耗。

在所有浏览器的非缓存的模式下， CSS sprite 方式比 data URI 方式快了数百微秒。但事实上 CSS Sprite 比 Data URI 方式多发送了一次连接请求，包括 TCP 慢启动招致所有相关的连接开销。

缓存条件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提升，只是 iOS 条件下减少了 220ms 而 Android 减少了 70ms （原生浏览器）。相对来说，Chrome 和 Firefox 的情况平衡得好点，缓存和非缓存情况下只有 50% 到 60ms 左右的性能差异。

在这里我建议将 data URIs 用于非常小的资源，并且不能在 CSS 和内联 HTML 中多次使用它们。

在利用相关技术对网站首页代码，图片，组件进行瘦身处理后，就需要使用相关检测工具对网站速度进行测试。一般情况下，网站打开速度应低于4秒。

推荐的网站速度检测工具包括“奇云测 — 测试你的网站速度”，免费提供ping检测,get检测,DNS劫持检测和网站打分等服务,努力打造最干净的网站检测平台。

另外，百度官方也主推了移动网页加速MIP相关技术，是一套应用于移动网页的开放性技术标准,使用 MIP无需等待加载,页面内容将以更友好的方式瞬时到达用户。

掌握如何优化网站首页代码方法的目的在于提升网站速度，推荐的典型做法有删除多余代码与组件，对现有代码利用最新技术如css3进行优化，还有一个重要点就是服务器端的选择，标准应该是快且稳定

在线咨询

上一篇：“5.20”央行要发行心形纪念币了，你会买吗？
下一篇：解决点击事件在移动端失效的问题