零基础教你学前端-3.HTML基本格式

天我们来学习HTML基本格式。

H1 标签定义了一个文档的标题，虽然在浏览器里显示了预期的效果，但它并不是一个符合规范的 html 文档，今天我们就来定义一个标准的 html 文档。

这是一个 html 文档的基本格式，来深入的剖析一下

<!DOCTYPE html> 这个标签会告诉浏览器，后面书写的是HTML5规范的语法，浏览器会按照 HTML5 的语法规范进行解析

<html lang='en'> 包裹了整个页面的所有内容，有时被称为根元素。

<head> 是所有头部元素的容器，描述了文档的各种属性和信息，比如文档的标题，文档引用的样式表和JS脚本文件，页面元信息等等，绝大多数文档头部包含的数据，都不会真正作为内容显示给浏览者。

<title> 设置页面的标题，也就是出现在浏览器标签中的内容，它描述页面被加入入书签或收藏时的标题

<body> 它包含了页面展示的所有内容，比如文字，图片，视频，游戏，可播放的音乐等等

一般情况下一个符合规范的 html 文档都应该使用这个基本格式

回到编辑器我们创建一个文件名字叫 base.html 我们快速的编写好 html 基本格式，在 <body> 标签里写一个 h1 在里面写一些内容，浏览器中打开页面正常的显示了，每个页面都写这么多东西很麻烦我们有 vscode。

删除所有内容在页面里只需一个感叹号，再按一下 tab 键，html 基本格式自动生成了，这时就可以直接在 body 内编写网页内容了。

通过观察基本结构发现标签前面有的有空格有的没有空格这是为什么呢实际上当出现标签嵌套的时候需要保持一个固定的缩进，一般采用两个或者四个空格具体看个人习惯和开发团队的规范，为了方便阅读不推荐混用。有些标签嵌套在一起，这就是标签结构嵌套

在一个标签内再次书写一个标签他们之间形成了这样的包裹关系，别包裹的叫做子标签，包裹的就是父标签。

在父子标签嵌套的时候子标签整体相对于父标签多一套缩进，更加方便阅读。

版规则

缩进

使用2个空格缩进

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小写

只允许使用小写。

所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和CDATA），选择器，特性，特性值（除了字符串）。

<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png"
alt="Google">

行为空格

建议删除行尾白空格。

<!-- 不推荐 -->
<p>What?  </p>

<!-- 推荐 -->
<p>Yes please.</p>

常规Meta规则

编码

如果没有特殊需求，一般采用utf-8编码。如果是cms站点，则遵守该站点的编码规则。

<!-- 网页编码 -->
<meta charset="utf-8">

注释

尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。

注释是否需要详尽，取决于项目的复杂程度。

一般单行注释：

<!-- col -->

模块间注释：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循环注释：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms输出注释：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab选项卡内容注释：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常规HTML设计规则

文档类型

使用html5文档声明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文档类型中的首选：

<!DOCTYPE html>

HTML 的正确性

编写有效、正确的HTML代码，否则很难达到性能上的提升。

可以使用一些工具验证你的代码，如 W3C HTML validator

HTML 的语义性

根据HTML各个元素的用途而去使用它们。

<!-- 不推荐 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推荐 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分标签说明：

div 主要用于布局，分割页面的结构;
ul/ol 主要用于无序/有序列表;
dl/dt/dd 当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签;
span 没有特殊的意义，可以用作排版的辅助，然后在css中定义span;
h1-h6 标题, 根据重要性依次递减;
h1 最重要的标题;
label 使表单更有亲和力而且能辅助表单排版;

不推荐使用的标签：

font 文字的外观，大小和颜色;
u 文本下划线;
center 居中对齐;
s 删除线;
strike 删除线;
noframes 无视框时的内容;
iframe 定义嵌入视图;
isindex 不建议使用（可搜寻，使用input代替）;
dir 目录式列举;
menu 菜单列表;
basefont 定义基本字体;
applet 定义java程序;
frame 定义个别视框;
frameset 视框格式总定义;

多媒体元素降级处理

给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。

<!-- 不推荐 -->
<img src="world.jpg">

<!-- 推荐 -->
<img src="world.jpg"
alt="our world images">

type属性

在样式表和脚本的标签中忽略type属性。

HTML5默认type为text/css和text/javascript类型，所以没必要指定。即便是老浏览器也是支持的。

<!-- 不推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推荐 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代码格式规则

每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。按设计稿划分模块，尽量使页面模块化，模块与模块之前要有清晰的注释。

如上面页面框架，推荐写法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML与SEO

页面良好层次

保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。

<!-- 不推荐 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推荐 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

权重标签使用

H标签使用

h1 权重高，体现当前网页中相对比较重要的信息，但不宜过多，建议一个页面只放一个;
h2 可以做副标题;
h3 可以做新闻列表;
h4-h6 可做相关新闻的列表标签属性完整;

strong、b使用

将需要加粗的文字使用b标签来显示。

将需要强调的文字（主要指包含关键词的信息）使用strong标签来强调主要内容。

注：b是粗体标签，属于实体标签，它所包围的字符将被设为bold（粗体）；strong 是加重语气标签，属于逻辑标签，它的作用是加强字符语气。

标签属性使用

在很多情况下，a都要使用title来说明该链接的相关说明或目的意义。

例如：当使用overflow隐藏掉a中的溢出文字时，该a中的title是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该a中的title同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。

注：仅在img里添加alt标签在火狐提示文字是出不来的，alt是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用title，严谨的写法是img里加入alt和title这两个标签。

精简代码

代码保持精简，最优化，这样搜索引擎才更喜欢。

构建现代网页时，图片是不可或缺的元素之一。它们能够增强视觉吸引力，帮助传达信息，并提升用户体验。然而，如果图片没有得到适当的优化，它们可能会显著拖慢网站的加载速度，影响用户体验和搜索引擎优化（SEO）。在本文中，我们将探讨不同的图片格式，并提供优化这些格式的策略和示例。

常见的图片格式

JPEG（或JPG）

优点：支持高色彩深度，适合处理照片和复杂的图像。
缺点：有损压缩，可能会在高压缩率下失去细节。
使用场景：适用于色彩丰富且没有透明度要求的图片。

PNG

优点：支持透明度，无损压缩，保留细节。
缺点：文件大小通常大于JPEG。
使用场景：适用于需要透明度或者高保真度的图形，如徽标和图标。

GIF

优点：支持动画和透明度（仅限单色透明）。
缺点：仅支持256色，质量较低。
使用场景：适用于简单动画和小图标。

WebP

优点：支持透明度和有损以及无损压缩，压缩率高于JPEG和PNG。
缺点：兼容性不如JPEG和PNG广泛。
使用场景：适用于需要优化加载速度的网页，同时保持较高的图像质量。

SVG

优点：矢量格式，可无限放大而不失真，文件大小小。
缺点：不适合复杂的照片。
使用场景：适用于图标、徽标、图表和其他可缩放图形。

图片优化策略

选择正确的格式

根据图片内容和用途选择最合适的格式。例如，对于网页上的照片，JPEG可能是最佳选择，因为它在保持相对较小的文件大小的同时提供了良好的图像质量。对于需要透明背景的图标，PNG可能更合适。

压缩图片

使用工具或服务压缩图片，减少文件大小。例如，使用在线工具如 TinyPNG 来压缩PNG文件，或者使用 Adobe Photoshop 的“存储为Web所用格式”功能来减小JPEG文件的大小。

调整尺寸

根据需要在网页中显示的大小调整图片尺寸。不要上传超大的图片然后依赖浏览器缩放，因为这会导致不必要的加载时间。

使用响应式图片

通过 HTML5 的 <picture> 元素或 srcset 和 sizes 属性，可以为不同屏幕尺寸提供不同大小的图片。

延迟加载

对于非视口内的图片，可以使用延迟加载（lazy loading）技术。这样，只有当用户滚动到图片位置时，图片才会加载。

使用CDN

使用内容分发网络（CDN）来分发图片，可以减少加载时间，因为图片会从离用户最近的服务器加载。

实例分析

示例1：优化网页照片

假设你有一个高分辨率的照片，原始尺寸为4000x3000像素，文件大小为5MB。如果这张照片要在网页上以800x600像素的尺寸展示，那么：

使用图像编辑工具将尺寸调整为800x600像素。
选择JPEG格式，并设置合适的压缩比例，比如70%的质量。
使用TinyJPG等在线工具进一步压缩处理。
TinyJPG – Compress WebP, PNG and JPEG images intelligently

优化后的图片可能只有100KB左右，大大减少了加载时间。

示例2：优化图标

如果你有一个图标，需要在网页上以多种尺寸展示，并且需要透明背景：

使用SVG格式，因为它支持透明度，且大小不会随着尺寸变化而变化。
如果SVG不可行，选择PNG格式，并确保图片尺寸不大于实际需要的尺寸。

结论

图片优化对于提高网页加载速度至关重要。通过选择合适的图片格式，压缩文件大小，调整尺寸，使用响应式图片技术，实现延迟加载，以及利用CDN，可以确保图片在不牺牲质量的情况下快速加载。这不仅能提升用户体验，还能对SEO产生积极影响。

在线咨询

上一篇：HTML常用全部代码，你懂，你不想成功都难
下一篇：好程序员HTML5培训教程-html和css的使用方法以及样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商