1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML学习笔记二(常用标签)

HTML学习笔记二(常用标签)

时间:2018-08-04 02:53:46

相关推荐

HTML学习笔记二(常用标签)

HTML学习笔记二(常用标签)

文章目录

列表标签无序列表(unordered list)有序列表(ordered list)定义列表(definition list) 表格标签表格中的属性表格中的其它标签表格的结构 表单标签form标签input标签数据列表多行文本框(文本域)下拉列表 多媒体标签video标签audio标签详情和概要标签marquee标签HTML中被废弃的标签HTML实体 meta其它类型eywords类型Descriiption类型Author类型Refresh类型Robots类型

列表标签

无序列表(unordered list)

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后格式: li 英文是 list item, 翻译为列表项

<h4>选择居住城市(CN)</h4><ul><li>北京</li><li>上海</li><li>广州</li><li>铁岭</li></ul>

ul应用场景:

导航条商品列表等新闻列表

注意事项:

这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)“北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行”, 那么就必须有严格的排名,北京必须写在前面

浏览器会给无需列表自动添加先导符号,但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是

增加无序列表的语义

其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面

由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签

虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

<ul><li>好吃的<ul><li>牛奶</li><li>面包</li></ul></li><li>日用的<ul><li>毛巾</li><li>牙膏</li></ul></li></ul>

有序列表(ordered list)

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分格式:

<h4>中国房价排行</h4><ol><li>北京</li><li>上海</li><li>广州</li><li>铁岭</li></ol>

ol应用场景: xxx排行榜其实ol应用场景并不多, 因为能用ol做的用ul都能做注意事项:ol和ul就是语义不一样,怎么使用都是一样的以及注意点都一样其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

定义列表(definition list)

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述格式: dt英文definition title, 翻译为定义标题dd英文definition description, 翻译为定义描述信息

<dl><dt>北京</dt><dd>国家的首都, 看升国旗的地方</dd><dt>上海</dt><dd>魔都, 遍地是黄金的地方</dd></dl>

注意事项:

- dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面

由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签dd和dt和li标签一样是容器标签, 里面可以添加任意标签定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

表格标签

作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式格式: table定义表格tr定义行td定义单元格

<!--先定义一个表格, 然后通过tr告诉浏览器这个表格中一共有多少行, 然后再通过td告诉浏览器这一行中一共有多少个元素(一共有多少列)--><table><tr><td></td><td></td></tr><tr><td></td><td></td>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。