如何将更多HTML元素添加到榆树代码？

Question

我尝试实现更多的html元素,如title(h1)或img src.我在我的代码中采用了h1方法,但遗憾的是没有工作.按钮和输入,我在文档中找到但我并没有真正得到(也来自其他教程)如何实现其他元素.

-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "todos" ]
    ]
    [ div[] [ input [ placeholder  " Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] []
    , input [ placeholder  " Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    ]
    , div []
  [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
    ]
    ]

此版本也不起作用:

view : Model -> Html Msg
view model =
  div []
    [ div [h1 [] [ text "todos" ]
    ]
    ,div[] [ input [ placeholder  " Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] []
    , input [ placeholder  " Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    ]
    , div []
  [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
    ]
    ]

Answer 1

您的代码中有很多流浪括号.我重新格式化它以产生以下内容:

view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "todos" ]
    , div[] [ input [ placeholder  " Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] [] ]
    , input [ placeholder  " Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ] ]
    ]

这是你和我的版本的差异.

该div函数有两个参数:属性列表和元素列表.请注意,在我上面的版本中,删除了一些导致编译失败的错误括号.