这有一个不错的html 学习资源:https://www.w3schools.com/tags/tag_hn.asp

简单了解html 基础元素

有以下内容:

shiny function HTML5 equivalent creates
p <p> A paragraph of text
h1 <h1> A first level header
h2 <h2> A second level header
h3 <h3> A third level header
h4 <h4> A fourth level header
h5 <h5> A fifth level header
h6 <h6> A sixth level header
a <a> A hyper link
br <br> A line break (e.g. a blank line)
div <div> A division of text with a uniform style
span <span> An in-line division of text with a uniform style
pre <pre> Text ‘as is’ in a fixed width font
code <code> A formatted block of code
img <img> An image
strong <strong> Bold text
em <em> Italicized text
HTML Directly passes a character string as HTML code

使用这些代码时,shiny 将会将它们转换为对应的html 代码:

  1. > h1("My title")
  2. <h1>My title</h1>

我们除了可以直接在fluidPage 函数内使用,也可以将他们作为参数传递给titlePanel, sidebarPanel, or mainPanel:

  1. ui <- fluidPage(
  2. h1("My title"),
  3. titlePanel(h2("My title")),
  4. sidebarLayout(
  5. sidebarPanel(h3("My title")),
  6. mainPanel("main panel")
  7. )
  8. )

03. shiny 的html 元素 - 图1

感受以下各级标题的魅力吧:

  1. ui <- fluidPage(
  2. titlePanel("My Shiny App"),
  3. sidebarLayout(
  4. sidebarPanel(),
  5. mainPanel(
  6. h1("First level title"),
  7. h2("Second level title"),
  8. h3("Third level title"),
  9. h4("Fourth level title"),
  10. h5("Fifth level title"),
  11. h6("Sixth level title")
  12. )
  13. )
  14. )

03. shiny 的html 元素 - 图2

我们还可以通过align参数调整文本的位置:

  1. ui <- fluidPage(
  2. titlePanel("My Star Wars App"),
  3. sidebarLayout(
  4. sidebarPanel(),
  5. mainPanel(
  6. h6("Episode IV", align = "center"),
  7. h6("A NEW HOPE", align = "center"),
  8. h5("It is a period of civil war.", align = "center"),
  9. h4("Rebel spaceships, striking", align = "center"),
  10. h3("from a hidden base, have won", align = "center"),
  11. h2("their first victory against the", align = "center"),
  12. h1("evil Galactic Empire.")
  13. )
  14. )
  15. )

03. shiny 的html 元素 - 图3

格式化文本

我们可以通过下面的格式化文本例子,一窥html 语法的各个元素:

  1. ui <- fluidPage(
  2. titlePanel("My Shiny App"),
  3. sidebarLayout(
  4. sidebarPanel(),
  5. mainPanel(
  6. p("p creates a paragraph of text."),
  7. p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
  8. strong("strong() makes bold text."),
  9. em("em() creates italicized (i.e, emphasized) text."),
  10. br(), # 空格一段
  11. code("code displays your text similar to computer code"),
  12. # 可以给一段内容分配相同的风格
  13. div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
  14. br(),
  15. p("span does the same thing as div, but it works with",
  16. span("groups of words", style = "color:blue"), # 类似div 但可以在元素内部进行调整
  17. "that appear inside a paragraph.")
  18. )
  19. )
  20. )

03. shiny 的html 元素 - 图4

图片

如果想要将图片添加到shiny中,我们需要将图片保存在:

03. shiny 的html 元素 - 图5

接着使用函数img:

  1. ui <- fluidPage(
  2. titlePanel("My Shiny App"),
  3. sidebarLayout(
  4. sidebarPanel("empty panel"),
  5. mainPanel(
  6. p("Here is one of my cute photo."),
  7. img(src = "cute.png", height = 500, width = 400)
  8. )
  9. )
  10. )

03. shiny 的html 元素 - 图6

这里还有进阶内容:https://shiny.rstudio.com/articles/html-tags.html