HTML5语义元素的使用_程序开发

HTML5语义元素的使用

admin

2023-06-11 16:41:56

0次

传统页面的构造方法

<div class="Header"> 
<h2>因为痛，所以叫青春h2> 
<p class="Teaser">写给独自站在人生路口的你p> 
<p class="Byline">[韩]金兰都p> 
div> 
 
<div class="Content"> 
<p><span class="LeadIn">青春span>, 之所以艰难，是因为孤单。p> 
......完整内容见附件
div> 
 
<div class="Footer"> 
<p class="Disclaimer">上述这些是译的观点p> 
<p> 
<a href="AboutUs.html">关于我们a> 
<a href="Disclaimer.html">申明a> 
<a href="ContactUs.html">联系我们a> 
p> 
<p>Copyright © 2013p> 
div>

因为使用了

元素，所以添加样式表很容易。下面，就是为页眉及其中的内容添加样式的规则。

1-1 为

添加样式，使页眉具有蓝色带边框

.Header { 
  background-color: #7695FE; 
  border: thin #336699 solid; 
  padding: 10px; 
  margin: 10px; 
  text-align: center; 
}

1-2 为页眉中的

（这里是文章标题）添加样式

.Header h1 { 
  margin: 0px; 
  color: white; 
  font-size: xx-large; 
}

1-3 为页眉中的子标题添加样式

.Header .Teaser { 
  margin: 0px; 
  font-weight: bold; 
}

1-4 为页眉中的属名添加样式

.Header .Byline { 
  font-style: italic; 
  font-size: small; 
  margin: 0px; 
}

其余的样式参见附件。上述代码实现的页面的整体样式如下：

HTML5语义元素的使用

上述页面编写规范，通过使用

，元素把大部分的工作交给了样式表。而通过元素可以为处在其它元素中的少量文本添加样式，通过

不仅可以为整个内容区块添加样式，还可以构建整个页面的结构。

使用HTML5改造页面

是当今Web设计的必备元素，它是一个直观、多用途的容器，可以通过它为页面中的任何区块应用样式。但是

的问题在于：它本身不反映与页面相关的任何信息。你在页面中看到

元素时，你知道这是一个独立的区块，但是不知道这个区块的意图。

HTML5可以改进这种情况，可以把

换成具有描述性的语义元素，如

、

上一篇：HTML5元素<hgroup>和<figure>及<aside>的使用

下一篇：用nodejs 改造一个移动版本的网站

HTML5语义元素的使用

（这里是文章标题）添加样式
.Header h1 {
  margin: 0px;
  color: white;
  font-size: xx-large;
}

相关内容

热门资讯

HTML5语义元素的使用

（这里是文章标题）添加样式 .Header h1 { margin: 0px; color: white; font-size: xx-large; }

相关内容

热门资讯

（这里是文章标题）添加样式
.Header h1 {
margin: 0px;
color: white;
font-size: xx-large;
}