HTML基本语法和语义写法规则与实例
DOCTYPE声明位于文档最前，决定浏览器渲染模式；DTD定义文档类型及版本；HTML5声明简洁；meta标签用于字符编码、SEO优化；语义化标签如header、nav、article等定义文档结构；需重置标签样式以确保跨浏览器一致性。
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
HTML5的标签体系更加丰富和完善， 不同浏览器对标签的默认样式略有差异，为了让页面在各浏览器中呈现一致的效果，通常需要先重置标签样式： 如果要在不支持HTML5的浏览器中使用HTML5标签，需要加入一小段Ja vaScript代码： 另外，HTML5为标签增加了 以上内容涵盖了DOCTYPE声明、字符编码、SEO优化、语义化标签以及实用技巧，希望对各位朋友有所帮助。 火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力，依托字节自研豆包多模态大模型，凭借火山方舟一站式平台，提供模型精调、推理部署、智能应用搭建等全链路服务，结合高性能AI算力，助力各行业快速落地大模型数字化与智能化应用。 AirBuddy 3 是面向 macOS 的蓝牙外设增强工具，可集中查看 AirPods、Beats 与苹果设备电量，提供快速连接、播放控制、电量提醒、桌面小组件和多台 Mac 外设接力等功能。 AirServer macOS版可把 Mac 转换为无线投屏接收端，通过 AirPlay 或 Google Cast 接收手机、平板和电脑画面，并支持多设备同时连接、高清镜像及会话录制，适合家庭娱乐、课堂教学、会议演示和应用展示。 Autodesk Maya 是面向影视、电视、动画和游戏行业的专业三维制作软件，集多边形与 NURBS 建模、角色绑定、关键帧和动作捕捉动画、Bifrost 特效模拟、材质开发及 Arnold 渲染于一体， AirServer Windows版可把电脑变成AirPlay、Google Cast和Miracast无线投屏接收端，适合会议演示、课堂教学及家庭大屏分享。发送设备通常无需另装客户端，并可同时接收和智能排列多个镜像会话。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}contenteditable属性，让元素内容可编辑：
