美文网首页
2018-08-21html列表

2018-08-21html列表

作者: 菩灵 | 来源:发表于2018-08-23 08:43 被阅读5次

html列表

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:


快捷键:ol>li*3
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,代码如下:

快捷键:ul>li*5
<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释,代码如下:

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>
  • 快捷键写法:平级用+,父子级用>。
    例如:dl>(dt+dd)*3

  • Emmet插件按Tab不显示的问题:

安装完成后我们利用Emmet插件去快速生成HTML代码,例如输入html:5按住Tab键即可生成HTML文件完整的结构,但是很多人在安装完成后输入html:5然后按住Tab键并没有反应,这是什么原因导致的呢?原来Emmet默认的快捷键是Ctrl+E,我们需要将其设置成常用的Tab键。

在菜单栏选择Preferences-->PackageSettings-->Emmet-->KeyBindings-->User,将以下信息粘贴进去即可。

[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}]

相关文章

  • 2018-08-21html列表

    html列表 有序列表 在网页上定义一个有编号的内容列表可以用 、 配合使用来实现,代码如下: 在网页上生成的列表...

  • Markdown 系列(三) 列表

    无序列表 由圆点组成的列表 列表1 列表2 列表3 列表1 列表2 列表3 列表1 列表2 列表3 +-*这三种符...

  • markdown常用的语法

    列表 有序列表: 列表项 1 列表项 2 无序列表: 列表项 1 列表项 2 列表项 3 列表项 4 列表项缩进两...

  • markdown常用语法

    标题 列表 无序列表- 列表1 - 列表1.1 -列表1.2- 列表2 有序列表1. 列表1 1. 列表1....

  • html阶段第二节第一天

    高级标签 列表标签 无序列表 列表一 列表二 ...... 有序列表 列表一 列表二 ...... 定义列表dl...

  • markdown测试

    段落 三级标题 四级标题 五级标题 列表 无序列表 列表1 列表2 列表3 列表1 列表2 列表3 有序列表 列表...

  • 学习小组Day1笔记-Herobrine

    Day1-Herobrine 列表 无序列表 无序列表 无序列表 无序列表 有序列表 有序列表 有序列表 有序列表...

  • H5学习从0到1-H5列表(8)

    列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 ...

  • 第一篇简书

    MarkDown首次使用 无序列表 列表1 列表2 列表3 有序列表 有序列表1 有序列表2 有序列表3 有序列表...

  • 标题

    列表1 列表2 子列表1 子列表2 子列表3子子列表1子子列表2子子子列表1子子子列表2

网友评论

      本文标题:2018-08-21html列表

      本文链接:https://www.haomeiwen.com/subject/nlcdiftx.html