整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

在学习html？这一篇文章就够了

家好，我是四川新华电脑学院小张，

这篇文章讲解Html的相关知识，如果想从零开始学习php编程的小伙伴，请从淼哥的第一篇文章看！

上次文章讲解的是DTD，也就是我们常说的DOCTYPE。

我们继续讲解。

<!DOCTYPE html>-------------------------DOCTYPE 声明了文档类型

<html> ------------------------------------文档类型html开始标记

<head> -----------------------------------头部标记

<title>我的第一个标题</title>

</head> ----------------------------------头部结束标记

<body> ---------------------------------文件主体

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body> ----------------------------------文件主体结束

</html> ----------------------------------文档类型html结束标记

这个是我们上次讲解的html架构。

接着我们继续讲解。

html标签

•写法<html></html>

HTML标签是HTML文档的根标签，在HTML中标签是一层嵌套一层的，而<HTML>标签是根标签（最外面一层的标签），所有其他的标签都写在这个标签中。

根标签我们可以理解为最外层的标签。（看上面的结构）

文档头信息

HTML又包含head标签和body标签，其中head标签中设置文档头信息，body标签中设置文档的内容。

<head> 标签用于定义文档的头部，它是所有头部元素的容器。

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

那么怎么理解元信息呢？比如对于网页本身的一些描述，该网页的标题？该网页的描述，该网页用的什么字符编码！等等，这些信息描述着网页，用户又看不到这些信息。

比如某个人的性别，姓名，当你看到这个人，可以看到外貌，身高，穿衣服的颜色。但是你并不知道这个人的姓名，有的也不知道性别。尤其像某些中性一点的长相。是吧。元信息不会渲染，但是属于该网页的信息。

  • base标签

（该标签应该学习了a img link form这几个标签之后在学习，看不懂没关系，可以先了解）

base标签，是嵌套在head标签中的一个标签。这个标签是一个可选标签，也就是可以有，也可以没有！

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。比如：我有个<a href='aa.html'>标签,那么浏览器会从当前文档的url，比如当前文档的url是www.xxxx.com/aa/bb/cc.html，浏览器会把www.xxxx.com/aa/bb/路径拿出来，和aa.html组成新的url，那么这个超链接就会变成www.xxxx.com/aa/bb/aa.html。

使用 <base> 标签可以改变这一点。

如果我们将base设置成为其他的url。<base href="http://www.myweb.com/i/" />那么，还是<a href='aa.html'>标签，就会把http://www.myweb.com/i/这个路径拿出来和aa.html组成新的url地址。那么这个url超链接就会变成http://www.myweb.com/i/a.html这个链接了。

浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

base标签的用法

<base href="http://www.myweb.com/i/" /> ------必选属性。（你有这个标签，就必须拥有这个属性）

<base target="_blank" /> ------------------可选属性。target意思是目标，打开超链接的方式，

当然也可以将两个属性写到一个base标签中。

<base href="http://www.myweb.com/i/" target="_blank"/>

默认target的属性是_self，也就是点击超链接，在当前页面的框架中打开。（为什么不是当前页面呢？因为页面有可能嵌套在框架里）

  • link标签

<link> 标签定义文档与外部资源的关系。 也就是说定义外部CSS文件存放的位置。因为如果将CSS全部写在网页中，这样显的页面太乱，一般都是单独存放在一个CSS 文件中的。

<link> 标签最常见的用途是链接样式表CSS。

用法： <head> <link rel="stylesheet" type="text/css" href="test.css"></head>

  • meta标签

<meta> 元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

由于meta信息相对比较复杂我们将在以后HTML高级课程中讲解

最常用meta标签是：

<meta charset=“utf-8”/>

设置页面编码写法。（页面编码注意，要设置的编码和文档的编码统一，否则会出乱码）

具体编码以后的文章讲解。

  • script标签

<script> 标签用于定义客户端脚本，比如 JavaScript。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 的常见应用是图像操作、表单验证以及动态内容更新。

用法<script type="text/javascript">document.write("Hello World!") ></script> 以后学javascript将会用到，这里只做了解。

  • style标签

<style> 标签用于为 HTML 文档定义样式信息。（内联CSS样式）

在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。

用法<head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head>

该标签将会在学习CSS时用到，这里只做了解

  • title标签

<title> 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。

同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

用法<title>网页标题</title>

<title> 标签是 <head> 标签中唯一要求包含的东西。（必须有title标签）

  • head 标签总结

<head>标签唯一要求包含的标签是<title>其他那几种可以包含也可以不包含，但是一般我们会包含<meta charset=“utf-8”>告诉浏览器我们的文件编码是什么。

常用的标签有：

<meta name=“keywords” content=“关键字”>告诉搜索引擎这个页面的关键字

<meta name=“description” content=“页面介绍”>告诉搜索引擎这个页面的简介

meta标签，会在Html高级部分继续讲解。

<body>页面主体信息

body 元素包含html的所有显示web内容（比如文本、超链接、图像、表格和列表等等。）

Body中可以使用块级标签和内联标签来显示文档结构

块级标签：h1~h6,p,div,table,ul,dl,from标签等

内联标签：a,img,span,I,strong,select标签等

什么块级标签（元素）呢？块级标签和内联标签区别是什么？

块级元素(block)特性:总是独占一行

内联元素(inline)特性:和相邻的内联元素在同一行。

标签和元素是一个意思！

<body>中包含的标签？

  • 标题标签

通过<h1>~<h6>六个标签定义不同大写的标签。

  • 文本格式化标签

早期编写html代码的时候，那个时候css用的很少，所以有一些标签来文本格式化。现在基本都用CSS来格式化文本的大小颜色粗体等等。

而更多时候使用这些标签来进行占位，利用CSS来渲染这些标签。常用的是span。

  • html中的注释

注释用来说明、注解、注释代码。给人看的不会被执行。

格式为：<!– 注释内容-->

浏览器页面不会被显示，而页面源代码中可以看到注释的内容。因为项目越大，或者你的页面越大，当时可能你能看懂。时间长了肯定看不明白。如果有注释的话，可以马上理解当时为什么要这么做。

  • 水平线

在HTML代码中加入一条水平线利用<hr />来操作。

  • 段落标签-<p>

浏览器会自动地在段落的前后添加空行，一般用在大段的文章。

  • 换行标签<br/>

<br/>标签可以实现换一个新行 ,正常来说，你在编写html页面的时候，无论怎么换行，在页面用浏览器打开的时候，是不会换行的，如果加入了<br/>标签，浏览器就会认为这里该换行显示了。

  • 链接<a>标签

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

1、通过使用 href 属性 - 创建指向另一个文档的链接

<a href=“链接的文件名” target=“_blank”>链接名</a>

2、通过使用 name 属性 - 创建文档内的书签

一般锚点链接主要用于网页太长了，想浏览的那个位置需要滚轮滚动好几下才能到达那个位置，而使用锚点（书签）直接可以准确的跳转到你想去的位置。

<a name=“文档标签名”>文档标签</a>

文档中对锚进行命名（创建一个书签）

<a href=“#tips”>链接名</a>

同一个文档中创建指向该锚的链接用关键字#+锚名字

<a href="http://www.xxx.com.cn/html/html_links.asp#tips">有用的提示</a>

也可以链接到其他网络上的页面锚的链接

  • 图像<img>

可以使用img标签在页面上显示一张图片。

格式：

<img src=“图片路径” width=“宽” height=“高” alt=“图片无法显示时的提示”title=“鼠标放图片上的提示”/>

备注：一般只设置宽即可，浏览器会根据图片大小进行缩放。如果强行设置宽、高，有的时候图片会失真。

  • 列表标签

列表标签分为有序标签和无序标签

当然、有序列表前面也可以更改序号，需要在CSS中学习改变序号的方法。

  • 二级列表<dl>标签

  • 表格标签-table

Table标签用来制作表格，表格由若干个行<tr>组成，每一行又由若干个单元格<td>组成。

Table标签中使用tr标签定义行，td标签定义一行中的一个列。如：定义一个一行四列。

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table>标签的cellpadding 属性规定单元边沿与其内容之间的空白。

<table>标签的cellspacing 属性规定单元格之间的空间。

横向合并单元格-colspan

表格-table-竖向-rowspan

  • 内联框架

可以使用iframe在页面中在嵌入另外一个页面。

  • 分区标签-div

    Div是块级标签，主要是用来作为标签容器，和规划页面结构（页面布局）的

    用法：

    <div style="margin:auto;border:1px solid #f00;width: 300px;height: 600px"></div>

在很早以前，小编刚入行的时候，那个时候CSS不流行，页面布局全部都用表格来做。那酸爽实在无法用言语来表达。而现在都是用CSS来进行页面布局。这个div标签页是以后布局常用的标签。

  • Span标签

Span标签是内联标签，没有特殊功能。主要是用来做为文本的容器，span标签主要是配合CSS来处理文字。

比如，我只想让几个文字编程红颜色的，这个时候就可以用span标签配合CSS来做了。

  • 框架集-frameset

我们可以使用frameset标签把一个页面窗口分隔成多个窗口，然后使用frame标签为每一个窗口制定一个页面

使用rows/cols的值规定每行或每列占据屏幕的面积,中间用逗号分隔。

frameset不能放在body中，如果放在body中不能显示框架 ！

在最新的html5中已经删除了这个标签了

  • 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

比如我们想在网页使用空格，直接按空格键是肯定不好使的，所以使用使用实体&nbsp; !

  • 音频

<embed src="helloworld.swf" height=“100” width=“100”/>

<embed> 标签是 HTML 5 中的新标签。

使用embed标签可以在网页中嵌入Flash，Mid，MP3等嵌入式内容

现在html5出了很多新的标签，以后会专门有讲解html5的文章。

今天我们一起了解了html相关的很多标签。其实都很简单。只要自己动手做一做，就可以做出来了。如果想要做出精美的页面，还是需要配合css来实现的哦。

明天我们继续讲解html的一些其他相关知识。手写不宜！请给小编点个赞！十分感谢。

文将详细介绍如何在.NET桌面程序中使用自定义的XML配置文件来保存和读取设置。除了XML之外，我们还将探讨其他常见的配置文件格式，如JSON、INI和YAML，以及它们的优缺点和相关的NuGet类库。最后，我们将重点介绍我们为何选择XML作为配置文件格式，并展示一个实用的示例。

1. 背景

在.NET桌面程序中，通常使用setting文件来保存程序的配置信息。使用setting文件的方法很简单，只需在项目中添加一个setting文件，然后通过Properties.Settings.Default来获取和保存设置即可。

我的开源项目 HackerScreenSaver[1] 之前就是使用这种方式，但是当我在升级 Windows11 的内核版本后，发现当程序在被系统以屏保程序启动后，无法加载配置了。

如此这般就需要使用其他方式来存储配置文件了。毕竟，setting文件并非唯一可用于保存设置的方式。我们可以选择存储到注册表，或者自己写配置文件并保存。

2. 常见的配置文件格式

对于一些简单的配置我们甚至可以直接写一个二进制文件，当然一般情况下我们还是选择常见格式的配置文件，比如：JSON、INI 和 YAML。

1.JSON(JavaScript Object Notation) 格式•优点：易于阅读和编写，支持复杂的数据结构，广泛应用于Web API和前端开发。•缺点：根据 JSON 规范，其是不支持注释的（单独 Json 文件在某些编辑器可以正确解析注释，在 .NET Core 中通过 JSON 配置提供程序读取配置时，也可以在配置文件中添加注释）。•相关类库：Newtonsoft.Json（建议使用自带的 System.Text.Json），可参考相关迁移教程[2]。2.INI（Initialization File）•优点：简洁，易于阅读和编辑，适用于存储简单的键值对。•缺点：不支持复杂的数据结构和类型。•相关类库：ini-parser3.YAML（Yet Another Markup Language）•优点：简洁，易于阅读和编辑，支持复杂的数据结构，支持注释。•缺点：缩进敏感，可能导致错误。•相关类库：YamlDotNet

3. HackerScreenSaver 的配置选择

HackerScreenSaver 为了设计的小巧，根据合适原则和简单原则，我最终选择了不需要引入其他第三方的 XML 格式配置文件。

XML（eXtensible Markup Language）具有以下优点：

•可扩展性强，支持复杂的数据结构。•支持注释，便于理解和维护。•作为标准的数据交换格式，易于与其他系统集成。

以下是我们设计的一个简单的配置类 SimpleSetting，用于保存设置：

  • public class SimpleSetting{ // 类的属性和构造函数省略...
     /// <summary> /// 从文件中读取设置 /// </summary> /// <param name="path">配置文件路径</param> public SimpleSetting(string path) { System.Xml.Serialization.XmlSerializer xs = new System.Xml.Serialization.XmlSerializer(typeof(SimpleSetting)); using (System.IO.FileStream fs = new System.IO.FileStream(path, System.IO.FileMode.Open)) { SimpleSetting ss = (SimpleSetting)xs.Deserialize(fs); isLocal = ss.isLocal; uInfo = ss.uInfo; Opacity = ss.Opacity; autoExit = ss.autoExit; } }
     /// <summary> /// 保存设置到文件 /// </summary> /// <param name="path">配置文件路径</param> public void Save(string path) { System.Xml.Serialization.XmlSerializer xs = new System.Xml.Serialization.XmlSerializer(typeof(SimpleSetting)); using (System.IO.FileStream fs = new System.IO.FileStream(path, System.IO.FileMode.Create)) { xs.Serialize(fs, this); } }}

    SimpleSetting 类中包含了从XML文件中读取设置和将设置保存到XML文件的方法。为了使用该类，我们只需要在程序中创建一个 SimpleSetting 对象，然后调用其 Save 和 Load 方法即可。这样，我们就可以在.NET桌面程序中使用自定义的XML配置文件来保存设置了。

    4. 最后

    本文详细介绍了如何在.NET桌面程序中使用自定义的 XML 配置文件以及为何选择 XML 作为配置文件格式。同时，我们还探讨了其他常见的配置文件格式，如 JSON、INI 和 YAML，以及它们的优缺点和相关的 NuGet 类库。希望这篇文章能帮助你找到适合你项目需求的配置文件解决方案！

    References

    [1] HackerScreenSaver: https://github.com/sangyuxiaowu/HackerScreenSaver?wt.mc_id=DT-MVP-5005195
    [2] 相关迁移教程: https://learn.microsoft.com/zh-cn/dotnet/standard/serialization/system-text-json/migrate-from-newtonsoft?wt.mc_id=DT-MVP-5005195

何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。

很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。

如何有效的降低HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运行良好。

在设计和开发过程中需要遵循以下原则：

  • 结构分离：使用HTML 增加结构，而不是样式内容；
  • 保持整洁：为工作流添加代码验证工具；使用工具或样式向导维护代码结构和格式
  • 学习新语言：获取元素结构和语义标记。
  • 确保可访问： 使用ARIA 属性和Fallback 属性等
  • 测试： 使网站在多种设备中能够良好运行，可使用emulators和性能工具。

HTML,CSS 和JavaScript三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容，也不能在头标签中输入文本内容，使代码变得冗长和复杂，相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的，如在Chrome中h1标签元素会渲染成32px的Times 粗体。

三条通用设计规则：

  1. 使用HTML 来构造页面结构，CSS修饰页面呈现，JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。
  2. 如果能用CSS或JavaScript实现就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

文档结构方面也可以做优化，如下：

  • 使用HTML5 文档类型，以下是空文件：
<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>
 <h1>Pesto</h1>
 <p>Pesto is good!</p>
</body>
</html>
  • 在文档起始位置引用CSS文件，如下：
<head>
 <title>My pesto recipe</title>
 <link rel="stylesheet" href="/css/global.css">
 <link rel="stylesheet" href="css/local.css">
</head>

使用这两种方法，浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

在页面底部body结束标签之前输入JavaScript代码，这样有助于提升页面加载的速度，因为浏览器在解析JavaScript代码之前将页面加载完成，使用JavaScript会对页面元素产生积极的影响。

<body>
 ...
 <script src="/js/global.js">
 <script src="js/local.js">
</body>

使用Defer和async属性，脚本元素具有async 属性无法保证会按顺序执行。

可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中，比如下面的代码则容易导致错误且不易于维护：

index.html:

<head>
 ...
 <script src="js/local.js">
</head>
<body onload="init()">
 ...
 <button onclick="handleFoo()">Foo</button>
 ...
</body>

下面的写法比较好：

index.html:

<head>
 ...
</head>
<body>
 ...
 <button id="foo">Foo</button>
 ...
 <script src="js/local.js">
</body>

js/local.js:

init();
var fooButton =
 document.querySelector('#foo');
fooButton.onclick = handleFoo();

验证

优化网页的一种方法就是浏览器可处理非法的HTML 代码。合法的HTML代码很容易调试，且占内存少，耗费资源少，易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

当使用模板时，合法的HTML代码显得异常重要，经常会发生模板单独运行良好，当与其他模块集成时就报各种各样的错误，因此一定要保证HTML代码的质量，可采取以下措施：

  • 在工作流中添加验证功能：使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。
  • 使用HTML5文档类型
  • 确保HTML的层次结构易于维护，要避免元素嵌套处于左开状态。
  • 保证添加各元素的结束标签。
  • 删除不必要的代码 ；没有必要为自关闭的元素添加结束标签；Boolean 属性不需要赋值，如果存在则为True;

代码格式

格式一致性使得HTML代码易于阅读，理解，优化，调试。

语义标记

语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如<header>，<footer>及<nav>。

选择合适的元素来编写代码可保证代码的易读性：

  • 使用<h1>(<h2>,<h3>…)表示标题，<ul>或<ol>实现列表
  • 注意使用<article> 标签之前应添加<h1>标签；
  • 选择合适的HTML5语义元素如<header>，<footer>,<nav>,<aside>;
  • 使用<p>描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
  • 使用<em>和<strong>标签替代<i>和<b>标签。
  • 使用<label>元素，输入类型，占位符及其他属性来强制验证。
  • 将文本和元素混合，并作为另一元素的子元素，会导致布局错误，

例如：

<div>Name: <input type="text" id="name"></div>

换种写法会更好：

 1: <div>
 2: <label for="name">Name:</label><input type="text" id="name">
 3: </div>

布局

要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

  • 使用<p>元素修饰文本，而不是布局；默认<p>是自动提供边缘，而且其他样式也是浏览器默认提供的。
  • 避免使用<br>分行，可以使用block元素或CSS显示属性来代替。
  • 避免使用<hr>来添加水平线，可使用CSS的border-bottom 来代替。
  • 不到关键时刻不要使用div标签。
  • 尽量少用Tables来布局。
  • 可以多使用Flex Box
  • 使用CSS 来调整边距等。

CSS

虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：

  • 避免内联css
  • 最多使用ID类 一次
  • 当涉及多个元素时，可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。


在线咨询
上一篇：免费领取：PDF转word,Excel,ppt,html等工具安装教程（附安装包）
下一篇：把HTML转成PDF的4个方案及实现方法

您的项目需求

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

推荐阅读
友情链接 兴宾区 南木林县 太白县 色达县 昭苏县 巢湖 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服