整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5 常见的语义标记(布局)

HTML5 常见的语义标记(布局)

lt;header> 显示网站名称、主题或者主要信息

<nav> 网站的连接菜单

<aside> 用于侧边栏

<main> 表示页面的主要显示内容, 页面有且只有一个,

不应该被任何其他结构标签包含, 不能是以下元素的后代: section/nav/footer/header/aside/article等。

<article> 用于定义主内容区

<section> 用于章节或段落

<footer> 位于页脚,用来放置版权声明、作者等信息

结构化标志也可以可以自由配置,并没有规定<aside>标记一定得写在<article>标记下方。

article和section可以相互嵌套

<!DOCTYPE HTML>
<html>
<head>
<meta charset="GB2312"/>
<title>背包客旅行札记</title>
</head>
<body>
<header id="header">
<hgroup>
<h1>背包客旅行札记</h1>
<h4>旅行是一种休息,而休息是为了走更长远的路</h4>
</hgroup>
<nav>
<ul>
<li><a href="#">关于背包客</a></li>
<li class="current-item"><a href="#">国内旅游</a></li>
<li><a href="#">国外旅游</a></li>
<li><a href="#">与我联络</a></li>
</ul>
</nav>
</header>
<article id="travel">
<section>
<h2>Hello World!</h2>
<p>四季都是结合旅行的季节。</p>
<p>不一定要花大钱,做点功课和多点自信,就能享受旅游的美好</p>
</section>
<aside>
<figure>
<img src="photo.png" alt="悠闲"/>
</figure>
</aside>
</article>
<footer>
HTML网页练习
</footer>
</body>
</html>

注意:

<hgroup> 标签用于对网页或区段(section)的标题进行组合。

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

则一:支持已有的内容

以下四段代码,在xhtml中只有第一段是正确的;而在html5中,所有的都是正确的

XML/HTML Code

<img src="foo" alt="bar" />

<p class="foo">Hello world</p>

<img src="foo" alt="bar">

<p class="foo">Hello world

<IMG SRC="foo" ALT="bar">

<P CLASS="foo">Hello world</P>

<img src=foo alt=bar>

<p class=foo>Hello world</p>

原则二:平稳退化

浏览器在遇到不识别的type值时,会将type的值解释为text

input type="number"

input type="search"

input type="range"

input type="email"

input type="date"

input type="url"

原则三:

正确的标签嵌套我们在写HTML时总是需要标签的层级嵌套来帮我们完成HTML的书写,但这些HTML的嵌套是有一定的规则的,如果要细说的话,我们可能要用几个章节来描述,那么我今天这里要说的是,我们在写HTML时不应该犯以下这样的超级错误:

上图的结构我们是常见的,比如说首页的标题,那么我们就应该注意了,不能把“<h1>”放在“<a>”标签中,换句话说,就是不能么块元素和在行内元素中。上面只是一个例子,只是希望大家在平时的制作中不应该犯这样的超级错误。

原则四:. 在使用javascript改变页面元互的显示效果时,尽量用className属性更改。应该尽量避免用element.style.color="#ff0000"之类的语句,尤其是在一次更改多次属性的时候。这样做有两个理由:方便维护和节约客户端资源。使用className改更的时候,页面只需要重新渲染一次,而且style属性更改时,每次都要重新渲染,这比开销是很大的。

原则五:

使用更好的命名这里所说的命名就是给你的页面中相关元素定义类名或者是ID名,很多同学都有这栗的习惯,比如说有一个元素字体是红色的,给他加上“red”,甚至布局都写“left-sidebar”等,但是你有没有想过,如果这个元素定义了“red”后,过几天客户要求使用“蓝色”呢?或者又说,那时的“left-sidebar”边栏此时不想放在左边了,而是想放在右边,那么这样一来我们前面的命名可以说是一点意义都没有了,正如下面的一个图所示:

那么定义一个好的名就很得要了,不但自己能看懂你的代码,而且别人也能轻松读懂你的代码,比如说一个好的类名和ID名“mainNav”、“subNav”、“footer”等,他能描述所包含的事情。不好的呢,比如前面所说的。

原则六:

:避免不必要的复杂性

html4

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html5

<!DOCTYPE html>

html4

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

html5

<meta charset="utf-8">

页布局分为:网页头部、网页主题、网页底部。

初学html时制作出来的页面非常丑陋,是因为没有添加CSS样式和布局排版,完全按照元素自身的特性来排列元素。事实上,对于这些标签还有一个专门的属性来控制元素的显示方式,是像div那样快元素显示,还是像span那样行内显示,这个属性就是display属性。

block快元素的默认值,inline行内元素的默认值,inline-block行内块元素,none设置元素不会被显示。

下面我们来做个一个页面用float属性来实现网页的布局。

样张图片:

下面我们就用浮动来进行编辑代码如下:

看一下css样式表:

下面来看一下我们设计出来的效果:

布局差不多没什么大的区别,小编现在也是初学者,希望提出建议

作者:润邦网络科技