文件命名

  • 使用小写字线命名文件，不要出现中文字符
  • 扩展名标准是.html，当然也可以使用.htm
  • 多个单词可以使用- 或 _ 连接，建议使用- 字符如user-create.html

HTML文档的基本组成部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="keyword" content="Mysql,Laravel,Javascript,HTML,CSS,ES6,TYPESCRIPT,后盾人,后盾人教程" />
  6.     <meta name="description" content="后盾人专注WEB开发，高密度更新视频教程" />
  7.     <title>后盾人</title>
  8. </head>
  9. <body>
  11. </body>
  12. </html>
标签 说明
DOCTYPE 声明为HTML文档
html lang:网页的语言，如en/zh等，非必选项目
head 文档说明部分，对搜索引擎提供信息或加载CSS、JS等
title 网页标题
keyword 向搜索引擎说明你的网页的关键词
description 向搜索引擎描述网页内容的摘要信息
body 页面主体内容

图像格式

  • 网络带宽成本很高，图片处理在保证用户体验好的前提下，文件尺寸也要尽可能小
  • 图片属性静态文件，不要放在WEB服务器上，而放在云储存服务器上并使用CDN加速
  • 以JPEG类型优先使用，文件尺寸更小
  • 小图片使用PNG，清晰度更高，因为文件尺寸小，文件也不会太大
  • 网页图标建议使用css字体构建如 iconfont 或 fontawesome
格式 说明 透明
PNG 无损压缩格式，适合图标、验证码等。有些小图标建议使用css字体构建。 支持
GIF 256色，可以产生动画效果（即GIF动图） 支持
JPEG 有损压缩的类型，如商品、文章的图片展示

继续拓展

网页链接

不能通过一个页面展示网站的所有功能，需要在不同页面中跳转，这就是链接所起到的功能。

  1. <a href="http://doc.houdunren.com" target="_blank" title="文档库">后盾人文档库</a>
选项 说明
href 跳转地址
target _blank 新窗口打开 _self 当前窗口打开
title 链接提示文本

打开窗口

下面设置 target 属性在指定窗口打开。

  1. <a href="https://www.houdunren.com" target="hdcms">
  2.         在IFRAME中打开
  3. </a>
  4. <script>
  5.     window.open('https://www.hdcms.com', 'hdcms');
  6. </script>

锚点链接

锚点可以设置跳转到页面中的某个部分。

  1. 为元素添加id 属性来设置锚点
  2. 设置 a 标签的 href 属性
  1. <a href="#comment-1">跳转到评论区</a>
  2. <div style="height: 1000px;"></div>
  3. <div id="comment-1" style="background: green;">
  4.     这是后盾人评论内容区
  5. </div>

也可以跳转到不同页面的锚点

  1. <a href="article.html#comment-1">跳转到评论区</a>