当前位置: 代码网 > it编程>网页制作>Css > HTML基本语法和语义写法规则与实例

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

2024年05月15日 Css 我要评论
doctypedoctype(document type)该声明位于文档中最前面的位置,处于html标签之前,此标签告知浏览器文档使用哪种html或者 xhtml规范。dtd(document typ

doctype

doctype(document type)

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

dtd(document type definition)

声明以<!doctype>开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在ie下开启怪异模式(quirks mode)渲染网页。公共dtd,名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(iso)注册,+表示是,-表示不是。组织即组织名称,如:w3c。类型一般是 dtd。标签是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。最后语言是dtd语言的iso 639语言标识符,如:en表示英文,zh表示中文。xhtml 1.0 可声明三种dtd 类型。分别表示严格版本,过渡版本,以及基于框架的html文档

html 4.01 strict

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">

html 4.01 transitional

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">

html 4.01 frameset

<!doctype html public "-//w3c//dtd html 4.01 frameset//en" "http://www.w3.org/tr/html4/frameset.dtd">

html5文档类型

<!doctype html><!-- 使用 html5 doctype,不区分大小写 -->

meta

声明文档使用的字符编码

html5之前

<meta http-equiv="content-type" content="text/html; charset=utf-8">
html5
<meta charset="utf-8">

seo优化

    标题

    <title>your title</title>

    页面描述

    <meta name="description" content="your description">

    关键字

    <meta name="keywords" content="your keywords">

    网页作者

    <meta name="author" content="your name">

    网页搜索引擎索引方式

    <meta name="robots" content="index,follow">

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

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

    noodp  不使用 open directory project 来创建内容描述。

    noydir 不使用 yahoo directory 来创建内容描述。

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

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

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

标签

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

html5 demo
<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>html5 demo</title>
 </head>
 <body>
 <header>
  <h1>html5 demo</h1>
  <nav>
  <ul>
   <li>nav1</li>
   <li>nav2</li>
  </ul>
  </nav>
 </header>
 <section>
  <h1>article aside</h1>
  <article>article</article>
  <aside>aside</aside>
 <section>
 <footer>footer</footer>
 </body>
</html>

tips

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

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

@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,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代码

<script>
 document.createelement('header');
 document.createelement('nav');
 document.createelement('section');
 document.createelement('aside');
 document.createelement('article');
 document.createelement('footer');
</script>

标签可编辑属性contenteditable

<article contenteditable></article>

以上文章内容希望对各位朋友有所帮

(0)

相关文章:

  • css进阶学习 选择符

    css进阶学习 选择符

    在我最早开始写css的时候,其代码上的高自由度就一直很令我困惑。这就是说,同一个设计,如果让不同的人来实现,最终的代码一定是有差异的。但这存在一个问题,如果不同... [阅读全文]
  • 使用css实现全兼容tooltip提示框

    最终效果图:基本原理先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合…

    2024年05月15日 网页制作
  • 前端从浏览器的渲染到性能优化

    问题前瞻1. 为什么css需要放在头部?2. js为什么要放在body后面?3. 图片的加载和渲染会阻塞页面dom构建吗?4. dom解析完才出现页面吗?5. 首屏时间根据什么来判…

    2024年05月15日 网页制作
  • 使用css实现全兼容浏览器的三角形

    在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹毛求疵”,越来…

    2024年05月15日 网页制作
  • 详解浏览器的缓存机制

    前言浏览器缓存是前端性能优化的重要一环,对于前端效率提升的重要性,不言而喻。之前对于浏览器缓存也是一知半解,这次借着h5页面缓存优化的东风整理了一下本地浏览器端的缓存机制,如强制缓…

    2024年05月15日 网页制作
  • 详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 css 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素…

    2024年05月15日 网页制作

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

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com