HTML5的设计列表和超链接

<一:无序列表

 二:有序列表

1.<ol> 的reversed为新增属性,reversed 代表降序,start代表有序列表的起始值,type代表在列表中使用过的标记类型。

 

 3.描述列表

<dl>..</dl> :标识描述列表

<dt>.</dt>:标识词条

<dd>.</dd>:标识解释

4.菜单列表

<menu>可以包含<command> <menuitem> 用于定义命令和项目。

<menu>包含2个专用属性

label:定义菜单的课件标签。

type:定义要显示的哪种菜单类型。取值如下:

list:描述列表菜单。

context:定义上下文菜单,该菜单必须在用户能够与命令进行交互之前被激活。

toolbar:定义工具栏菜单,活动式命令,允许用户立即与命令交互。

 

 三:超链接

1.<a>标签用法:<a href="#">连接文本</a>

<a>标签属性:

downloadfilename规定被下载的超链接目标
hrefURL规定连接指向的页面URL
hreflanglanguage_code规定被链接的文档语言
mediamedia_query规定被链接的文档是为何中媒介优化
reltext当前文档和被链接文档的关系
target_blank,_parent,_self,_top,framename规定在何处打开链接文档
typeMIME type规定被链接文档打开的MIME类型

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的 HTML/CSS3 新闻列表示例,每个新闻都有一个超链指向相关文章的页面: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新闻列表</title> <style> /* 设置新闻列表样式 */ .news-list { list-style: none; padding: 0; } /* 设置新闻标题样式 */ .news-title { font-size: 20px; font-weight: bold; margin: 10px 0; } /* 设置新闻摘要样式 */ .news-summary { font-size: 16px; line-height: 1.5; margin: 0; } /* 设置新闻链样式 */ .news-link { color: #007bff; text-decoration: none; } /* 设置鼠标悬停时链样式 */ .news-link:hover { text-decoration: underline; } </style> </head> <body> <ul class="news-list"> <li> <a href="https://example.com/article-1" class="news-link"> <h2 class="news-title">新闻标题1</h2> <p class="news-summary">这是新闻1的摘要内容。</p> </a> </li> <li> <a href="https://example.com/article-2" class="news-link"> <h2 class="news-title">新闻标题2</h2> <p class="news-summary">这是新闻2的摘要内容。</p> </a> </li> <li> <a href="https://example.com/article-3" class="news-link"> <h2 class="news-title">新闻标题3</h2> <p class="news-summary">这是新闻3的摘要内容。</p> </a> </li> </ul> </body> </html> ``` 在这个示例中,我们使用了无序列表(`<ul>`)来创建新闻列表,并对其应用了一些基本的 CSS 样式。每个新闻都包含一个超链(`<a>`)标签,其中 `href` 属性指向相关文章的页面,而 `class` 属性用于设置链的样式。我们还为新闻标题和摘要设置了自己的 CSS 样式,以便它们在列表中正确地显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值