商城首页欢迎来到中国正版软件门户

您的位置: 首页 > 文章列表 > 编程开发 > HTML基本语法和语义写法规则与实例

HTML基本语法和语义写法规则与实例

  发布于2026-07-22 阅读(0)

扫一扫,手机访问

HTML文档的DOCTYPE声明,是每个网页文件的第一行代码,它直接决定了浏览器以何种模式来渲染页面——标准模式还是怪异模式。别看它只是一行简单的声明,里面涉及的细节和规范,其实比不少开发者想象的要复杂。下面,就来系统梳理一下这些关键内容。

DOCTYPE

DOCTYPE(Document Type,文档类型)声明位于文档最前面、标签之前,用来告知浏览器当前文档使用的是哪种HTML或XHTML规范。如果这一行写错了,或者前面出现了多余的空格、字符,浏览器(尤其是IE)就可能进入“怪异模式”渲染页面,导致布局错乱。

DTD

DTD(Document Type Definition,文档类型定义)声明以开头,不区分大小写,前面不能有任何内容(空格除外)。公共DTD的名称格式为:注册//组织//类型 标签//语言。其中,“注册”表示该组织是否由国际标准化组织(ISO)注册,+表示是,-表示否;“组织”即组织名称,例如W3C;“类型”一般是DTD;“标签”是指定公开文本的唯一描述性名称,可附带版本号;最后“语言”是DTD语言的ISO 639标识符,例如EN表示英文,ZH表示中文。

XHTML 1.0 可声明三种DTD类型,分别对应严格版本、过渡版本以及基于框架的HTML文档。

HTML 4.01 strict

HTML 4.01 Transitional

HTML 4.01 Frameset

HTML5文档类型

到了HTML5,DOCTYPE声明变得极其简洁,不区分大小写:

meta

声明文档使用的字符编码,在HTML5之前是这样写的:

HTML5中简化为:

SEO优化

页面标题:

your title

页面描述:

关键字:

网页作者:

网页搜索引擎索引方式:

其中,follow表示跟踪链接并分析目标网页(默认行为);index表示将网页编入索引(默认行为);noodp表示不使用Open Directory Project来创建内容描述;noydir表示不使用Yahoo Directory来创建内容描述;noarchive表示不允许搜索引擎显示内容的缓存版本;cache表示允许显示缓存版本;nocache也表示不允许显示缓存版本。

标签

HTML5新增的语义化标签,能够更清晰地定义文档结构:



  
    
    html5 demo
  
  
    

html5 demo

  • na v1
  • na v2

article aside

article
footer

HTML5的标签体系更加丰富和完善,

似乎没有了用武之地。但如果只是想给文档中某一段内容添加样式,
依然是最顺手的选择。

tips

不同浏览器对标签的默认样式略有差异,为了让页面在各浏览器中呈现一致的效果,通常需要先重置标签样式:

@charset "utf-8";
html{margin:0;padding:0;border:0}
a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,na v,object,ol,p,pre,q,section,p,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,na v,section{display:block}
body{line-height:1.5;background:#fff}
table{border-collapse:separate;border-spacing:0}
caption,td,th{text-align:left;font-weight:400;float:none!important}
table,td,th{vertical-align:middle}
blockquote:after,blockquote:before,q:after,q:before{content:''}
blockquote,q{quotes:"" ""}
a img{border:none}
a{text-decoration:none}
:focus{outline:0}

如果要在不支持HTML5的浏览器中使用HTML5标签,需要加入一小段Ja vaScript代码:

另外,HTML5为标签增加了contenteditable属性,让元素内容可编辑:

以上内容涵盖了DOCTYPE声明、字符编码、SEO优化、语义化标签以及实用技巧,希望对各位朋友有所帮助。

本文转载于:https://www.jb51.net/article/111191.htm 如有侵犯,请联系zhengruancom@outlook.com删除。
免责声明:正软商城发布此文仅为传递信息,不代表正软商城认同其观点或证实其描述。
  • using namespace 使用中遇到的问题怎么解决 正版软件
    using namespace 使用中遇到的问题怎么解决
    命名空间的基本概念与常见引入问题在C++等编程语言中,命名空间(namespace)是一种将代码标识符(如变量、函数、类名)封装在特定名称下的机制,其主要目的是避免命名冲突,尤其是在大型项目或使用多个第三方库时。使用“using namespace”指令可以将指定命名空间中的所有名称引入当前作用域,
    9天前 0
  • c语言函数递归 实操经验总结:这些技巧很实用 正版软件
    c语言函数递归 实操经验总结:这些技巧很实用
    理解递归的基本原理在C语言中,递归是一种函数调用自身的编程技术。要掌握它,首先需要理解其核心思想:将一个复杂的大问题,分解为一个或几个与原问题相似但规模更小的子问题,直到子问题足够简单,可以直接求解。这个过程通常包含两个关键部分:递归出口和递归体。递归出口定义了问题何时不再继续分解,即最简单、可直接
    9天前 0
  • c语言函数递归 怎么选?常见方案对比分析 正版软件
    c语言函数递归 怎么选?常见方案对比分析
    递归函数的基本概念与适用场景在C语言编程中,递归是一种函数调用自身的编程技巧。它并非适用于所有问题,但在处理某些具有自相似结构的问题时,能提供极其清晰和优雅的解决方案。递归的核心思想是将一个大规模问题分解为一个或多个同类型但规模更小的子问题,直到子问题简单到可以直接求解。典型的适用场景包括树形结构的
    9天前 0
  • Objective-C 内存管理入门:从 alloc 到 dealloc 的生命周期详解 正版软件
    Objective-C 内存管理入门:从 alloc 到 dealloc 的生命周期详解
    理解内存管理的基石在Objective-C的编程世界中,内存管理是开发者必须掌握的核心技能之一。它直接关系到应用的性能、稳定性与资源利用效率。与一些采用自动垃圾回收机制的语言不同,Objective-C在很长一段时间里,依赖一套基于引用计数的、需要开发者部分介入的管理规则。这套规则的核心思想是明确的
    9天前 0
  • 如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏 正版软件
    如何正确使用 dealloc 以避免 iOS 应用中的内存泄漏
    理解 dealloc 的角色与时机在 iOS 应用开发中,内存管理是保障应用性能与稳定性的基石。dealloc 方法是 Objective-C 中对象生命周期结束时的关键回调,它标志着对象即将被系统回收内存。正确理解其触发时机至关重要:当一个对象的引用计数降为零时,运行时系统会自动调用该对象的 de
    9天前 0