关于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基本语法和语义写法规则

Javascript中正则表达式的使用及基本语法_正则表达式

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

以上就是关于HTML基本语法和语义写法规则与实例分析的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:00:01
下一篇 2025年12月21日 17:00:19

相关推荐

  • HTML标签中行内元素和块级元素详解

    本文主要和大家详细介绍了html常用的标签中行内元素和块级元素,需要的朋友参考下吧,希望能帮助到大家。 块元素(block element) HTML标签分类明细      * address – 地址     * blockquote – 块引用     * center …

    好文分享 2025年12月21日
    000
  • HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解

    winform结合html5能实现什么功能?突有心血来潮,想在里面嵌套一个微信网页版,下面小编给大家介绍下html阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法,一起看看吧,希望能帮助到大家。 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一个微…

    2025年12月21日 好文分享
    000
  • html中form与表单提交操作的方法总结

    本文主要介绍了html中form元素与表单提交方面的知识,需要的朋友可以参考一下,希望能帮助到大家。 form元素 form元素的DOM接口是HTMLFormElement,继承自HTMLElement,因而它与其他的HTML元素拥有相同的默认属性,不过它自身还有几个独有的属性和方法: 属性值 说明…

    2025年12月21日
    000
  • 如何实现HTML中鼠标经停时整行(tr)变色

    本文主要介绍了html中实现鼠标经停时整行(tr)变色的相关资料,需要的朋友可以参考下,希望能帮助到大家。 使用纯CSS实现在鼠标经过一个表格的某一行的时候,要整行的背景颜色发生变化,以表明该行正中焦点: change tr.change:hover { background-color:#00FF…

    好文分享 2025年12月21日
    000
  • html实现在消息按钮上增加数量角标的实现代码

    我们知道微信或者qq在有未读消息的时候,就会有红色的数量提示,本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下,希望能帮助到大家。 html代码: 消息4 css代码: /*角标 */ .ii{ display: none; background: #f00; bord…

    2025年12月21日
    000
  • 关于html页面跳转传递参数问题解答

    本文主要介绍了html页面跳转传递参数问题的相关资料,需要的朋友可以参考下,希望能帮助到大家。 效果如下: a页面 点击跳转按钮后 在b页面可以获取到对应的值。 代码如下: 立即学习“前端免费学习笔记(深入)”; a页面:  a页面 $(function(){ name = $(“#name”).t…

    2025年12月21日
    000
  • 结合css用Html 实现动态显示颜色块的报表效果

    本文将结合css来通过实例代码讲解,如何使用html的颜色块动态展示数据功能,非常不错,代码简单易懂,需要的朋友参考下,希望能帮助到大家。 利用html的颜色块动态展示数据 *{ padding: 0; margin: 0; } .tubiao,.jihua,.shiji,.riqi{ width:…

    好文分享 2025年12月21日
    000
  • HTML中 table鼠标拖拽排序功能的实现

     table是html里不可缺少的一项属性,很多地方我们都要用到,本文主要介绍了html table鼠标拖拽排序功能的相关资料,需要的朋友可以参考下,希望可以帮助到大家。 效果图: 1.引入文件 2.给元素附上sortable类 立即学习“前端免费学习笔记(深入)”; 3.开启并配置 $(funct…

    2025年12月21日
    000
  • 关于HTML用正则表达式检验表格方法

    本文主要介绍了html用正则表达式检验表格的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下,希望对大家有帮助。 正则表达式在JavaScript脚本中是很好用的检验语法规则的方法。但是与Java中的正则表达式有所不同。它需要在regex规则上以“^”开始,以”$”结束。以下让我…

    好文分享 2025年12月21日
    000
  • HTML多图上传预览功能的实现

    最近平凡用到网页多图上传预览的功能,感觉挺不错的,今天小编抽空给大家分享下基于html实现多图上传预览功能,希望能帮助到大家。 自己最近写了一个网页多图上传的脚本,感觉挺实用的,细节就不要说了,直接贴代码了~ .pro_img{ margin-left:10px;margin-top:10px;wi…

    好文分享 2025年12月21日
    000
  • 浅谈HTML空链接的作用

    空链接: 就是没有目标端点的链接。本文就为大家带来一篇浅谈HTML空链接的作用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 格式显示内容 空连接的作用 1.设为首页 立即学习“前端免费学习笔记(深入)”; onclick=”this.…

    好文分享 2025年12月21日
    000
  • 总结类html标题,段落,换行,水平线,特殊字符

    本文是关于html比较基础的知识,我们就和大家分享html标题,段落,换行,水平线,特殊字符相关知识。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。希望能帮助到大家。 标题 XML/HTML Code复制内容到剪贴板 一级标题 二级标题 立即学习“前端免费学习笔记(深入)”; 对齐方式有le…

    2025年12月21日
    000
  • 实例介绍HTML文本格式化的知识

    本文就为大家带来一篇html文本格式化的简单实例(详解)。希望大家学完能掌握html 文本格式化的知识,更好的去运用。 一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化。 This text is boldThis text is strongThis text is bigTh…

    2025年12月21日
    000
  • HTML中标签栏的几种实现方法

    html中标签的用法很多,本文为大家推荐一篇标签栏的几种实现方法,对学习标签知识很有用,希望能帮助到大家。 标签页:分类    +    描述 标签栏:分类 =>让用户明白自己在哪里,将要去哪里 一、css命名方式:   立即学习“前端免费学习笔记(深入)”; XML/HTML Code复制内…

    2025年12月21日 好文分享
    000
  • 关于script在html中的摆放位置解析

    以前一直觉得script在html中的任何位置都可以,今天做一个需求的时候才更正了自己的错误思想啊–script的位置也不是随便放的。本文主要谈论关于script在html中的摆放位置。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。希望能帮助到大家。 首先是想实现一个select…

    好文分享 2025年12月21日
    000
  • HTML里的事件怎么使用

    事件是经常由客户的操作或者是通过浏览器的功能来触发的,使用js在任意时刻也可以触发特定的事件。这次就来给大家说一下html里常用的事件思路 DOM中的事件模拟 在document对象上使用creatEvent()方法创建event对象。参数是要创建的事件类型的字符串。 DOM2:字符串都使用英文复数…

    好文分享 2025年12月21日
    000
  • HTML页面跳转及参数传递问题

    这篇文章给大家详细介绍了html页面跳转及参数传递问题,希望能帮助到大家。 HTML页面跳转: window.open(url, “”, “width=600,height=400”); 第二个参数:_self,在当前窗口打开窗口;_blank(默认值),在另外的新建窗口打开新窗口; 立即学习“前端…

    好文分享 2025年12月21日
    000
  • React中的HTML转义写法

    在JSX中输出固定内容 直接使用utf-8字符 {代码…} 使用HTML转义字符 {代码…} 或者十进制的转义字符 {代码…} 动态内容的转义 但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义,本文我们就和大家分享React中的…

    好文分享 2025年12月21日
    000
  • HTML实现简单的提示框

    本文我们将和大家分享HTML实现简单的提示框,由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法。 function show(obj,id) { var objp = $(“#”+id+””); /** 这里我们可以使用…

    2025年12月21日
    000
  • 总结HTML网页中插入视频的方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持ogg theora或者vp8(如果这玩意儿没出事的话)的(opera、mozilla、chrome),支持h.264的(safari、ie 9、chrome),都不支持的(ie6、7、8)。好吧,现在让我们从技术层面来认识html 5的视…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信