标记语言——短语元素
互联网 发布时间:2008-10-17 18:55:15 作者:佚名
我要评论
点击这里返回网页教学网 HTML教程 栏目.
上文:标记语言——表单
原文出处
Chapter 6 <strong>,<em>与其他短语元素
在引言和前面的章节中,已经稍微提到过语义标签的概念,使用标签为文件标识意义,而不是单纯的以标签设定显示效果.设计完
<code>
<code>元素的设计目的是在XHTML页面内展示代码示例,举例来说,当你想分享某段CSS时,你可以这样写:
<code>
#content {
width: 80%;
padding: 20px;
background: blue;
}
</code>
一般来说,可视化浏览器会以定宽serif字体显示<code>标签中的内容.当然,我们也能加上CSS规则,指定我们喜欢的显示方式.
code {
font-family: Courier, serif;
color: red;
}
如此一来,<code>的内容就会变成红色的Courier字体了. <samp>
<samp>元素是用来标识程序与script的示例输出的,举例来说,如果我想讨论正在编写的Perl script输出结果,我可能会标集成这样:
<p>When the script has executed, at the command line you will see the message <samp>script was successful!</samp>.</p>
这边我以<samp>把script的输出示例围起来,同时我们也能以CSS规则为程序输出示例设定独特的样式,就像刚才为<code>做的一样. <var>
与<samp>相关的,<var>是用来标记程序的变量和引用用的,举例来说,如果我们正在讨论XSLT样式表,那么我能写下:
<p>I'm going to pass the parameter <var>lastUpdated</var> to my main.xsl file.</p>
许多浏览器会以斜体显示<var>标签的内容,但是你可以写一条简单的规则去掉预设值,如果你不喜欢斜体的话.我们能用CSS的font-style属性改变显示效果:
var {
font-style: normal;
font-family: Courier, serif;
color: purple;
}
最后让我们看看<kbd>元素,完成短语元素的部分. <kbd>
<kbd>元素可以用来标记使用者要输入的文字,举例来说,如果我正在解释如何使用刚才指定的accesskey把光标切换到搜索框内,我可能会这样写:
<p>To quickly change focus to the search input field, Mac users type <kbd>Command 9</kbd>.</p>
你大概猜得到我接下去要说什么了,没错,只要使用简单的CSS规则,你就能调整所有的<kbd>元素的样式,与其他短语元素一样. 结论
回顾一下在这章中看过的内容,首先探讨<strong>和<em>优于同等显示效果的<b>和<i>的原因,同时也研究了如何单纯设定粗体或斜体显示效果,CSS是正确的方法.
也讨论了其他的短语元素,以<cite>标记人物,出版物开始,并证明了结构化标记语法对显示效果,资料解析的好处.
并示范了如何以适当的元件标记缩写名词,略称,提升网页的易用性,同时以额外的CSS展示,语音规则强化定义内容.最后则看到剩下的短语元素,每个元素都具备一般文字不同的预设样式,但是我们也能快速地为单一页面或者整个网站轻易的设计简单的CSS规则,为这些元素指定想要的显示样式.
这章里出现了一些对很多人来说相当陌生的标签,标准化在中国展开后很可悲的被曲解成div css,真不知道该怎么说,希望能看到的人能正确认识到标准化之路的路标--语义化文档
<code>元素的设计目的是在XHTML页面内展示代码示例,举例来说,当你想分享某段CSS时,你可以这样写:
<code>
#content {
width: 80%;
padding: 20px;
background: blue;
}
</code>
一般来说,可视化浏览器会以定宽serif字体显示<code>标签中的内容.当然,我们也能加上CSS规则,指定我们喜欢的显示方式.
code {
font-family: Courier, serif;
color: red;
}
如此一来,<code>的内容就会变成红色的Courier字体了. <samp>
<samp>元素是用来标识程序与script的示例输出的,举例来说,如果我想讨论正在编写的Perl script输出结果,我可能会标集成这样:
<p>When the script has executed, at the command line you will see the message <samp>script was successful!</samp>.</p>
这边我以<samp>把script的输出示例围起来,同时我们也能以CSS规则为程序输出示例设定独特的样式,就像刚才为<code>做的一样. <var>
与<samp>相关的,<var>是用来标记程序的变量和引用用的,举例来说,如果我们正在讨论XSLT样式表,那么我能写下:
<p>I'm going to pass the parameter <var>lastUpdated</var> to my main.xsl file.</p>
许多浏览器会以斜体显示<var>标签的内容,但是你可以写一条简单的规则去掉预设值,如果你不喜欢斜体的话.我们能用CSS的font-style属性改变显示效果:
var {
font-style: normal;
font-family: Courier, serif;
color: purple;
}
最后让我们看看<kbd>元素,完成短语元素的部分. <kbd>
<kbd>元素可以用来标记使用者要输入的文字,举例来说,如果我正在解释如何使用刚才指定的accesskey把光标切换到搜索框内,我可能会这样写:
<p>To quickly change focus to the search input field, Mac users type <kbd>Command 9</kbd>.</p>
你大概猜得到我接下去要说什么了,没错,只要使用简单的CSS规则,你就能调整所有的<kbd>元素的样式,与其他短语元素一样. 结论
回顾一下在这章中看过的内容,首先探讨<strong>和<em>优于同等显示效果的<b>和<i>的原因,同时也研究了如何单纯设定粗体或斜体显示效果,CSS是正确的方法.
也讨论了其他的短语元素,以<cite>标记人物,出版物开始,并证明了结构化标记语法对显示效果,资料解析的好处.
并示范了如何以适当的元件标记缩写名词,略称,提升网页的易用性,同时以额外的CSS展示,语音规则强化定义内容.最后则看到剩下的短语元素,每个元素都具备一般文字不同的预设样式,但是我们也能快速地为单一页面或者整个网站轻易的设计简单的CSS规则,为这些元素指定想要的显示样式.
这章里出现了一些对很多人来说相当陌生的标签,标准化在中国展开后很可悲的被曲解成div css,真不知道该怎么说,希望能看到的人能正确认识到标准化之路的路标--语义化文档
相关文章
文章介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,本文主要给大家介绍HTML img标签和超链2025-06-20- HTML meta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引,本文给大家介绍HTML中meta2025-06-20
input 标签主要用于接收用户的输入,随 type 属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTML input 标签,感兴趣的朋友一起看看吧2025-06-20
这篇文章主要介绍了html 滚动条滚动过快会留下边框线的解决方案,解决方法很简单,可以将 dialog 单独拿出来别放在 transform 的子元素里,需要的朋友可以参考下2025-06-09- 本文将介绍如何使用<img>标签在 HTML 中添加图片,并展示一些常见的用法和技巧,通过本文的介绍,应该掌握了在 HTML 中添加和调整图片的基础知识,感兴趣的朋友一起看2025-05-16
- HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格2025-03-12
- 本文介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,感兴2025-02-24
在 Web 开发中,文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧,我们可以创造出许多独特的效果,例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空2024-11-17
在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码2024-09-25- 在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域(textarea)的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保2024-09-25






最新评论