HTML基础——HTML基本要素(二)

1、水平线标记——hr

  水平线用于段落与段落之间的分隔,可使得文档结构清晰明白,使文字编排更为整齐。水平线自身包括很多属性:宽度、高度、颜色、排列对齐等。

  语法:<hr>  (添加一条默认的水平线)

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center><h4>七步诗(曹植)</h4></center>
<hr>
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>

</body>
</html>
  • 水平线宽度与高度——width、height

  默认情况下,插入的水平线是100%宽度,1像素高度。

  语法:<hr width=水平线宽度 height=水平线高度>

水平线宽度可以是确定的像素值,也可以是窗口的百分比;而水平线高度值则只能是像素数。如果在设置水平线时只设置一个值,那另一个则为默认值。

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center>
<font face="隶书" size="+3">七步诗</font>
<hr width="130">
<font size="+1">曹植</font>
</center>

<hr width="60%" height = "4">
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>
<hr width="80%" height = "6">

</body>
</html>
  • 水平线颜色——color

  语法:<hr color="颜色代码">

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center>
<font face="隶书" size="+3">七步诗</font>
<hr width="130" color="#FF0066">
<font size="+1">曹植</font>
</center>

<hr width="60%" height = "4" color="#33FFFF">
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>
<hr width="80%" height = "6">

</body>
</html>
  • 去掉水平线阴影——noshade

  默认情况下,水平线是空心带阴影的立体效果,通过设置noshade参数可以将水平线的阴影去掉。

  语法:<hr noshade>

<html>
<head>
<title>添加水平线</title>
</head>
<body>

<center>
<font face="隶书" size="+3">七步诗</font>
<hr width="130" color="#FF0066">
<font size="+1">曹植</font>
</center>

<hr width="60%" height = "4" color="#33FFFF">
<center>煮豆持作羹, 漉菽以为汁。</center><br/>
<center>萁在釜下燃, 豆在釜中泣。</center><br/>
<center>本自同根生, 相煎何太急。</center>
<hr size="+5" noshade="noshade">

</body>
</html>
  • 水平线对齐方式——align

  默认居中对齐。

  语法:<hr align="对齐方式">    left、right、center

2、其他文字标记

  • 文字标注标记——ruby

  在默认情况下,标注文字很小,但是在HTML中也可以像设置其他文字一样调整标注文字的各种属性,包括大小、颜色等。

语法:

<ruby>
  被说明的文字
  <rt>
  文字标注
  </rt>
</ruby>

<html>
<head>
<title>添加文字标注</title>
</head>

<body>
<ruby>
有情芍药含春泪,无力蔷薇卧晓枝。<br/><br/>
<rt>
作者秦观
</rt>
</ruby>
</body>

</html>
  • 声明变量标记——var

  为突出变量,将其设置为斜体。

  语法:<var> 变量 </var>

<html>
<head>
<title>声明变量标记</title>
</head>

<body>
<p>定义变量<var>x</var>的值为<var>y+6</var><br/><br/>
</body>

</html>
  • 设置地址文字标记——<address>

  用于显示E-Mail、地址等文字内容,主要用于英文字体的显示中。

  语法:<address> 文字 </address>

<html>
<head>
<title>页面地址文字</title>
</head>

<body>
<p>请在上面的文本框中编辑您的代码,然后单击提交按钮测试结果。<address>www.w3school.com.cn</address>
</body>

</html>
时间: 2024-10-17 09:09:23

HTML基础——HTML基本要素(二)的相关文章

GIS基础软件及操作(二)

原文 GIS基础软件及操作(二) 练习二.管理地理空间数据库 1.利用ArcCatalog 管理地理空间数据库 2.在ArcMap中编辑属性数据 第1步 启动 ArcCatalog 打开一个地理数据库 当 ArcCatalog打开后,点击, 按钮(连接到文件夹). 建立到包含练习数据的连接(比如“E:\ARCGIS\2练习二\Exec2”), 在ArcCatalog窗口左边的目录树中, 点击上面创建的文件夹的连接图标旁的 (+)号,双击个人空间数据库- National.mdb.打开它.. 在N

ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法

一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归.所以抛弃之前的那种事件响应的模型,抛弃服务器端控件也理所当然. 但是,如果手写Html标签效率又比较低,可重用度比较低.这时,我们该怎样来提高效率呢?首先,经过上篇我们知道可以通过ViewData传递数据,于是我们可以写出以下的Html代码: <input name="UserName&quo

基础JavaScript练习(二)总结

任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐

windows下mongodb基础玩法系列二CURD操作(创建、更新、读取和删除)

windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) 简单说几句 在mongodb中3元素:db(数据库).collection(集合).document(文档) 其中collection类似于数据库中的表,document类似于行,这样一来我们就将内容对比起来记忆学习了. 数据格式 MongoDB documents是BSON格式(一种类json的一种二进制形式的存

注册页面基础判定制作法二

function valFrom(){ var userName=document.getElementById("userName"); var pwd=document.getElementById("pwd"); var repwd=document.getElementById("repwd"); var email=document.getElementById("email"); var age=document.

C#基础知识篇(二)-----------C#笔记

1.关系运算符(比较运算符) 1.关系运算符有哪些? >,< ==,!= >=,<= 2.关系运算符的作用? 用于比较两个事物之间的关系. 3.什么叫关系表达式? 由关系运算符连接起来的式子叫关系表达式. 注意:所有的关系表达式最终都能计算成一个bool类型的值. 2.逻辑运算符 1.逻辑表达式有哪些? 逻辑与:&& ,逻辑或:||  ,逻辑非:!(又叫取反) 2.逻辑运算 语法:表达式1 逻辑运算符  表达式2 逻辑运算符连接的两个表达式,要最终能求解成一个boo

js基础--javascript基础概念之语句(二)

js基础--javascript基础概念之语句(二)label,break,continue.. break .  continue 语句. break  continue 语句用于在循环中精确控制代码的执行,其中break语句会立即退出循环,执行循环后面的语句. continue 则退出循环后返回到再次进入循环中. 如: var num = 0; for(var i = 0; i<=100; i++){ if(i >= 10){ break; } num = i; } alert(num);

【0002(基础)】Skyline二次开发入门经典系列教程&mdash;&mdash;目录

这段时间由于个人事务太多,以至于没有按照时间更新系列教程,本人将尽快补上所欠章节,在此说声抱歉!   这一章在我心目中占有很重要的地位,因为我想通过这一章的内容来确定整个系列的大致走向.然而在整理的过程中,发现现实远比想象要复杂得多:首先想尽可能介绍较多的知识点,其次又要考虑学习的简易程度,再次又要确定顺当的知识体系流程-- 由于暂时的考虑无论如何也是不可能完备的,因此为了不影响后面教程的编写,暂定把这一章作为一个[流动性质]的可变章节,在编写每一章时,动态根据实际情况修改(添加.移动.修改)系

【0001(基础)】Skyline二次开发入门经典系列教程总览

本人是从2012年开始接触Skyline二次开发的,经历过 v6.0~v6.5(最新的6.6版本还未使用)的所有版本.作为一名非GIS专业毕业的大学本科生,鬼使神差般地进入了这个瑰丽的GIS领域.因此,在从事了4年多的Skyline二次开发工作后,我不能说我是"授业有专攻",更不能说我是"闻道有先后".在这个领域内,大牛之人比比皆是,正是因为他们的存在与指引,才使得我现在有点东西可以写出来供大家交流沟通.   整理这个系列教程的原因主要出于如下几点的考虑: 1.Sk

零基础JavaScript编码(二)

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&