HTML基本语法和语义用法规则讲解

本文对html基本语法和语义进行了整理与实例,需要的朋友可以参考下

DOCTYPE

DOCTYPE(Document Type)

该声明位于文档中最前面的位置,处于html标签之前,此标签告知浏览器文档使用哪种HTML或者 XHTML规范。

DTD(Document Type Definition)

立即学习“前端免费学习笔记(深入)”;

声明以开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式(quirks mode)渲染网页。公共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文档类型

meta

声明文档使用的字符编码

html5之前

html5

SEO优化

    标题

    your title

    页面描述

   

    关键字

   

    网页作者

   

    网页搜索引擎索引方式

   

    follow 跟踪链接并分析目标网页。这是默认行为,并且可忽略。

    index  将网页编入索引。这是默认行为,并且可忽略。

    noodp  不使用 Open Directory Project 来创建内容描述。

    noydir 不使用 Yahoo Directory 来创建内容描述。

    noarchive 不允许搜索引擎显示内容的缓存版本。

    cache 允许搜索引擎显示内容的缓存版本。

    nocache 不允许搜索引擎显示内容的缓存版本。

标签

定义文档的结构,使文档的标记更加语义化。

html5 demo   html5 demo   

html5 demo

article aside

article
footer

tips

html5标签更加丰富和完善,p标签似乎没有什么用武之地,但是如果仅仅想在文档中加入一段样式,这个时候p标签便派上用场了。

标签在不同浏览器默认样式会有一些区别,为了一个网页在不同浏览器中看到的效果一样,通常要先格式化一下标签的样式

@charset "utf-8";html{margin:0;padding:0;border:0}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,p,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,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,nav,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标签,需要加一小段JavaScript代码

 document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('aside'); document.createElement('article'); document.createElement('footer');

标签可编辑属性contenteditable

以上就是HTML基本语法和语义用法规则讲解的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544913.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:19:59
下一篇 2025年12月21日 16:20:21

相关推荐

  • Win7如何更改默认浏览器?

    浏览器是一种能够展示网页服务器或文件系统中的html文档内容,并支持用户与之互动的软件。许多用户的电脑上都安装了多个浏览器,但很少有人了解如何设定默认浏览器。今天,小编就为大家讲解一下如何设置默认浏览器。 如何更改IE浏览器的默认设置 打开IE浏览器,在主界面上找到并点击工具菜单,随后在下拉列表中选…

    2026年8月28日
    000
  • Spark vs. Flink — 核心技术点

    Spark vs. Flink — 核心技术点Spark vs. Flink — 核心技术点Spark vs. Flink — 核心技术点Spark vs. Flink — 核心技术点

    引言 Apache Spark 是一个综合性且高效的分布式计算引擎,兼具批处理和流计算能力,利用内存进行并行计算。官方数据表明,Spark的内存计算速度比MapReduce快100倍。作为当前最流行的计算框架,Spark已展现出其卓越的性能。 Apache Flink 是一个分布式大数据处理引擎,提…

    2026年8月28日 用户投稿
    300
  • b站视频怎么镜像翻转_B站视频画面镜像处理技巧

    1、使用B站手机客户端可直接开启镜像翻转:进入全屏播放后点击右上角三个点,选择【镜像翻转】即可实时切换画面方向。2、通过B站网页版HTML5播放器也可实现:在电脑端播放视频时点击设置齿轮,开启【镜像画面】开关即生效。3、如需永久保存镜像效果,可借助剪映等剪辑软件对视频进行水平翻转处理后再导出使用。 …

    2026年8月28日
    100
  • PHP文件上传与数据库记录:常见问题排查与最佳实践

    本教程旨在解决PHP文件上传成功但数据库记录失败的常见问题。我们将深入分析代码中的逻辑错误,提供有效的调试策略,包括SQL语句检查和错误报告,并推荐使用预处理语句以增强安全性与稳定性,确保文件上传与数据库操作同步完成。 引言 在web开发中,文件上传是一个常见且重要的功能。它通常涉及两个主要步骤:将…

    2026年8月27日
    200
  • GreatSQL 8.4.4-4 GA (2025-10-15)

    GreatSQL 8.4.4-4 GA (2025-10-15) 版本信息 发布时间:2025年10月15日 版本号:8.4.4-4, Revision d73de75905d 下载链接:https://www.php.cn/link/b68f0b79fc8f10966e8642318429eab6…

    2026年8月27日
    300
  • VSCode怎么运行多个HTML_VSCode同时启动多个网页开发调试教程

    答案:在VSCode中同时运行和调试多个HTML文件可通过Live Server插件、http-server命令行工具或配置launch.json实现;推荐使用http-server配合多根工作区进行预览,或通过launch.json的compounds功能组合多个调试配置,实现多页面协同调试,提升…

    2026年8月27日
    100
  • VBA与数据库——添加新的数据库驱动程序

    在前面provider字符串编写中,我们已经探讨了如何查找电脑上安装的数据库驱动程序。现在,让我们继续了解如何添加新的数据库驱动程序。 在使用Windows系统上的Office Excel时,Access数据库通常是非常方便的选择。然而,由于我在使用Access时遇到了一些问题,我转而使用了SQLi…

    2026年8月27日
    100
  • PHP函数库设计原则是什么_PHP函数库设计最佳实践

    设计PHP函数库需遵循命名清晰、单一职责、输入验证、文档化等原则。函数名应动词开头,如sendEmail();每个函数只做一件事;参数需校验并抛出异常;添加PHPDoc注释;避免全局依赖;返回值保持一致。 设计PHP函数库时,核心目标是提升代码的可重用性、可维护性和易用性。良好的函数库不仅让开发者使…

    2026年8月27日
    100
  • qq浏览器怎么批量删除重复的收藏夹_QQ浏览器重复收藏夹批量清理技巧

    首先使用QQ浏览器内置整理功能可快速批量删除重复书签,进入收藏夹后点击整理选项,系统自动扫描并允许勾选删除重复项;若重复较多,建议导出收藏夹为HTML文件,通过电脑端Excel或文本工具提取网址并删除重复内容,再重新导入;还可借助第三方书签管理工具如Raindrop.io导入数据,利用其智能识别功能…

    2026年8月27日
    200
  • VSCode怎么调出HTML模板_VSCode快速生成HTML基础模板结构教程

    答案:在VSCode中输入!后按Tab键即可快速生成HTML5模板,也可使用html:5或doc等Emmet缩写,若失效需检查文件类型和设置,还可通过自定义snippets.json实现个性化模板。 在VSCode中快速生成HTML基础模板结构,最直接也最常用的方法就是利用其内置的Emmet功能。你…

    2026年8月26日
    200
  • 告别繁琐的DOM操作:如何使用s9e/sweetdom优雅地处理XML和XSLT模板

    可以通过一下地址学习composer:学习地址 最近在开发一个需要频繁操作xml文档,尤其是xslt模板的项目时,我遇到了一个让人头疼的问题。php原生的dom扩展虽然功能强大,但其api设计往往显得过于底层和繁琐。例如,创建一个新元素、将其插入到指定位置,或者执行一个xpath查询,都需要好几行代…

    2026年8月26日
    100
  • 微信公众号小程序怎么做_微信公众号关联小程序开发教程

    微信公众号小程序怎么做_微信公众号关联小程序开发教程微信公众号小程序怎么做_微信公众号关联小程序开发教程微信公众号小程序怎么做_微信公众号关联小程序开发教程微信公众号小程序怎么做_微信公众号关联小程序开发教程

    先完成小程序开发与审核,再通过公众号后台授权绑定。需先注册开发者账号并认证公众号,创建小程序项目后使用微信开发者工具进行开发,提交审核通过后,在公众号后台关联小程序AppID,实现多入口展示与运营联动。 微信公众号关联小程序,核心在于先独立完成小程序的开发与审核,然后通过公众号后台进行简单的授权绑定…

    2026年8月26日 用户投稿
    100
  • UC浏览器视频小窗播放怎么用_UC浏览器视频小窗播放方法

    在UC浏览器播放视频时,按返回键或滑动退出可启用小窗模式;02. 若未自动开启,可通过菜单手动选择“小窗播放”;03. 小窗支持拖动、缩放与手势控制,便于多任务操作。 如果您在观看视频时希望同时浏览其他内容,可以使用UC浏览器的视频小窗播放功能,让视频以悬浮窗口的形式继续播放。该功能适用于移动端操作…

    2026年8月26日
    000
  • 微信公众号字体怎么改_微信公众号文章字体样式修改教程

    微信公众号字体怎么改_微信公众号文章字体样式修改教程微信公众号字体怎么改_微信公众号文章字体样式修改教程微信公众号字体怎么改_微信公众号文章字体样式修改教程微信公众号字体怎么改_微信公众号文章字体样式修改教程

    答案是微信公众号不支持自定义字体上传,但可通过字号、颜色、加粗、段落样式及第三方工具等现有功能,结合品牌化排版策略,在统一规范下提升文章视觉风格与阅读体验。 微信公众号文章的字体样式修改,说实话,并没有一个直接的“选择字体”菜单让你像Word那样随意切换成宋体、黑体或者其他个性化字体。它的核心在于通…

    2026年8月26日 用户投稿
    300
  • VSCode怎么自动生成HTML_VSCode快速生成HTML基础模板结构教程

    输入!按Tab即可生成HTML5模板,VSCode通过Emmet实现高效编码,支持自定义片段和高级缩写,提升开发效率。 说实话,刚开始用VSCode写HTML的时候,我也觉得每次都要手动敲 、 、 那些东西挺麻烦的。后来才发现,VSCode在快速生成HTML基础模板结构这方面做得真是相当到位,主要就…

    2026年8月26日
    000
  • 如何优雅地抓取网页数据?simplehtmldom助你轻松搞定

    可以通过一下地址学习composer:学习地址 在日常的web开发中,我们常常会遇到一个令人头疼的需求:从外部网站提取特定信息。比如,你需要构建一个比价工具来抓取不同电商平台的商品价格,或者开发一个内容聚合器来收集各大新闻网站的头条。 面对这些任务,你可能会尝试各种方法。如果HTML结构简单,也许几…

    用户投稿 2026年8月26日
    000
  • 如何解决Magento2CSP兼容性难题,yireo/magento2-csp-utilities助你构建更安全的网站

    可以通过一下地址学习composer:学习地址 当安全性遇上兼容性:Magento 2 CSP的痛点 作为一名magento开发者,我们都知道网站安全的重要性。内容安全策略(csp)是防御跨站脚本(xss)攻击的强大工具,它通过限制浏览器可以加载的资源来减少攻击面。在magento 2中启用csp是…

    用户投稿 2026年8月26日
    000
  • 告别API错误响应的混乱:如何使用phpro/api-problem构建统一、清晰的接口错误处理机制

    Composer在线学习地址:学习地址 你的 API 错误响应,是不是也一团糟? 在现代 web 开发中,api 接口是前后端协作的核心。一个设计良好、文档清晰的 api,能够极大地提升开发效率。然而,很多时候我们却忽略了一个关键环节:api 的错误响应。 你是否也曾遇到过以下场景,让你在开发过程中…

    用户投稿 2026年8月26日
    000
  • Python爬虫抓取智联招聘(基础版)

    Python爬虫抓取智联招聘(基础版)Python爬虫抓取智联招聘(基础版)Python爬虫抓取智联招聘(基础版)Python爬虫抓取智联招聘(基础版)

    运行平台: WindowsPython版本: Python3.6IDE: Sublime Text其他工具: Chrome浏览器 1、网页分析 1.1 分析请求地址 以北京海淀区的Python工程师为例进行网页分析。打开智联招聘首页,选择北京地区,在搜索框输入”Python工程师&#82…

    2026年8月26日 用户投稿
    100
  • 如何解决PHP中复杂的HTML/XML解析与操作问题,arthurkushman/query-path助你轻松驾驭!

    可以通过一下地址学习composer:学习地址 告别繁琐:PHP 处理 HTML/XML 的痛与思 在日常的 php 开发中,我们经常需要与各种 html 或 xml 文档打交道。无论是从第三方网页抓取信息,还是处理复杂的 xml 配置,亦或是动态生成和修改 html 片段,这些任务都不可避免。然而…

    用户投稿 2026年8月26日
    100

发表回复

登录后才能评论
关注微信