实际网站的HTML结构，对比非语义化标签的差异

一，HTML的意义 HTML：超文本标记语言，是指能够包含链接，图片，程序，视频等非文字元素的页面 二：HTML的主要结构 ：声明文档类型，用于告诉浏览器以什么样的方式对该文档进行渲染，如果没有这个声明则使用怪异模式进行渲染，有则使用标准模式进行渲染； ：页面的根标签：限定了页面的开始和结束，在这个标签包裹 和标签；注意点： 标签闭合：例如这个标签，闭合就用，也就是添加斜杠完成，除了标签外，其它的除了自闭合标签和空标签以外的标签都可以使用这种方式进行闭合； 添加语言：在标签内，可以添加属性lang属性来告诉浏览器当前文档使用的是何种语言，例如： lang = "en"就是告诉浏览器当前文档使用的是英语； 3.书写：标签的书写全部使用小写英文； 三：HTML书写规范 行级元素不要包裹块级元素：例如这样是错误的，但是块级元素可以包裹行级元素； 标签闭合：例如： ；标签全部用英文小写书写； 标签用尖括号进行包裹：； 四：关于标签 在标签内，你会见到一个叫的标签，例如下面这样： 上面的就是文档的元标签，它可以通过一些属性提供的值来标示这个文档的元信息，例如解码方式，关键词等，它是一个自闭合标签，不需要闭合，它不提供任何文档的内容； 标签的常用属性介绍： 1.charset：charset属性有一个值，这个值填写的是编码方式，例如：charset = "UTF-8"就是标明该文档的编码方式是 UTF-8，其它的编码方式还有gbk，Unicode等； 2.http-equiv：http-equiv：该属性可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，要与content属性一起使用，正确的格式是：http-equiv = "参数"，例如：http-equiv = "X-UA-Compatible"； 3.content：用于标示数据传输中的值； 4.name：name属性要与content属性一起使用，name属性常用的值有： ①：viewport：例如： viewport这个值用来限定用户是否能缩放或放大页面，最大和最小多少； ②：keywords：例如： keywords值顾名思义，是用来告诉浏览器这个页面的关键词是什么，方便搜索引擎进行关键词抓取； ③：description：例如： description值用来告诉搜索引擎这个页面大体内容的描述，以及搜索出来检索显示的信息； 常见问题之——内容文字变成乱码 例子： 网页文字变乱码 1.出现的原因：在标签内的编码方式是UTF-8 编码方式 而我们的解码方式是： 解码方式 由上可以看出文字变乱码是编码方式和解码方式的不同所造成的； 2 . 如何解决：设置编码方式和解码方式相同即可 3 . 此外还要注意，有些编辑器默认保存的编码方式就是utf-8，例如sublime 默认保存的编码方式。 HTML语义化是指使用合适的HTML标签和属性来格式化文档内容。一些实际网站的HTML结构可以用来进行案例分析，对比非语义化标签的差异。 以网页头部为例，非语义化的写法可能会使用div标签来表示头部，而语义化的写法则会使用header标签来表示头部。使用header标签可以更准确地表达页面的结构和内容，提高可读性和可维护性。 另一个例子是网页主体部分，非语义化的写法可能会使用div标签来表示主体，而语义化的写法则会使用main标签来表示主体。使用main标签可以更清晰地表达页面的主要内容，让页面结构更易于理解。 在页面底部的表示中，非语义化的写法可能会使用div标签来表示底部，而语义化的写法则会使用footer标签来表示底部。使用footer标签可以更明确地表达页面的底部内容，提高页面的可读性和可访问性。 综上所述，HTML语义化的案例分析可以通过对比非语义化标签和语义化标签的差异来展示。通过使用合适的HTML标签和属性，可以使网页结构更有意义，提高网页的可读性和可维护性

这篇好文章是转载于：学新通技术网