• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
井底燕雀傥 显示全部楼层 发表于 2021-8-16 11:36:56 |阅读模式 打印 上一主题 下一主题
DOCTYPE
DOCTYPE(Document Type)
该声明位于文档中最前面的位置,处于html标签之前,此标签告知欣赏器文档利用哪种HTML大概 XHTML规范。
DTD(Document Type Definition)
声明以
  1. <!DOCTYPE>
复制代码
开始,不区分巨细写,前面没有任何内容,如果有其他内容(空格除外)会使欣赏器在IE下开启怪异模式(quirks mode)渲染网页。公共
  1. DTD
复制代码
,名称格式为注册//构造//范例 标签//语言,注册指构造是否由国际标准化构造(ISO)注册,+表示是,-表示不是。构造即构造名称,如:
  1. W3C
复制代码
。范例一样平常是 DTD。标签是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,背面可附带版本号。最后语言是DTD语言的
  1. ISO 639
复制代码
语言标识符,如:EN表示英文,ZH表示中文。XHTML 1.0 可声明三种DTD 范例。分别表示
  1. 严格版本,过渡版本,以及基于框架的HTML文档
复制代码

HTML 4.01 strict
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
复制代码
HTML 4.01 Transitional
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
复制代码
HTML 4.01 Frameset
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
复制代码
HTML5文档范例
  1. <!DOCTYPE html><!-- 使用 Html5 doctype,不区分大小写 -->
复制代码
meta
声明文档利用的字符编码
html5之前
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. html5
  3. <meta charset="utf-8">
复制代码
SEO优化
    标题
  1.     <title>your title</title>
复制代码
    页面描述
  1.     <meta name="description" content="your description">
复制代码
    关键字
  1.     <meta name="keywords" content="your keywords">
复制代码
    网页作者
  1.     <meta name="author" content="your name">
复制代码
    网页搜刮引擎索引方式
  1.     <meta name="robots" content="index,follow">
复制代码
    follow 跟踪链接并分析目标网页。这是默认举动,而且可忽略。
    index  将网页编入索引。这是默认举动,而且可忽略。
    noodp  不利用 Open Directory Project 来创建内容描述。
    noydir 不利用 Yahoo Directory 来创建内容描述。
    noarchive 不答应搜刮引擎表现内容的缓存版本。
    cache 答应搜刮引擎表现内容的缓存版本。
    nocache 不答应搜刮引擎表现内容的缓存版本。
标签
界说文档的结构,使文档的标志更加语义化。
  1. html5 demo
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>html5 demo</title>
  7. </head>
  8. <body>
  9. <header>
  10.   <h1>html5 demo</h1>
  11.   <nav>
  12.   <ul>
  13.    <li>nav1</li>
  14.    <li>nav2</li>
  15.   </ul>
  16.   </nav>
  17. </header>
  18. <section>
  19.   <h1>article aside</h1>
  20.   <article>article</article>
  21.   <aside>aside</aside>
  22. <section>
  23. <footer>footer</footer>
  24. </body>
  25. </html>
复制代码
tips
html5标签更加丰富和完善,div标签好像没有什么用武之地,但是如果仅仅想在文档中到场一段样式,这个时间div标签便派上用场了。
标签在不同欣赏器默认样式会有一些区别,为了一个网页在不同欣赏器中看到的结果一样,通常要先格式化一下标签的样式
  1. @charset "utf-8";
  2. 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,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代码
  1. <script>
  2. document.createElement('header');
  3. document.createElement('nav');
  4. document.createElement('section');
  5. document.createElement('aside');
  6. document.createElement('article');
  7. document.createElement('footer');
  8. </script>
复制代码
标签可编辑属性contenteditable
  1. <article contenteditable></article>
复制代码
以上文章内容渴望对各位朋侪有所帮

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作