Fe-interview: [html] 第2天 html的元素有哪些(包含H5)?

Created on 17 Apr 2019  ·  30Comments  ·  Source: haizlin/fe-interview

[html] 第2天 html的元素有哪些(包含H5)?区分出行内元素、块级元素、空元素并在后面简要标注下作用。如:
行内元素:
br - 换行
...


先不要百度,看看自己能写出多少。

html

Most helpful comment

块级元素:

  • head -
  • meat - 申明页面的诸多属性
  • title - 窗口标题
  • style - 样式
  • body - 文本内容
  • header - 头部块
  • section - 内容块
  • footer - 底部块
  • article - 文章标签
  • aside
  • nav
  • menu
  • bir
  • hr - 下划线
  • h1-h6 描述标题
  • div
  • p
  • ul
  • li
  • ol
  • oi
  • dl
  • dt
  • dd
  • form
  • table
  • theader
  • tbody
  • tr
  • th

行内元素

  • label
  • a
  • span
  • td
  • input
  • button
  • strong
  • b
  • i

去除的元素

  • font

为什么H5新元素都不记得?因为平常没有去使用!

All 30 comments

块级元素:

  • head -
  • meat - 申明页面的诸多属性
  • title - 窗口标题
  • style - 样式
  • body - 文本内容
  • header - 头部块
  • section - 内容块
  • footer - 底部块
  • article - 文章标签
  • aside
  • nav
  • menu
  • bir
  • hr - 下划线
  • h1-h6 描述标题
  • div
  • p
  • ul
  • li
  • ol
  • oi
  • dl
  • dt
  • dd
  • form
  • table
  • theader
  • tbody
  • tr
  • th

行内元素

  • label
  • a
  • span
  • td
  • input
  • button
  • strong
  • b
  • i

去除的元素

  • font

为什么H5新元素都不记得?因为平常没有去使用!

行内元素

  • a
  • b
  • span
  • i
  • em
  • strong
  • block
  • input
  • button
  • select
  • form

块级元素

  • div
  • p
  • ul
  • ol
  • li
  • h1~h6
  • textarea

H5新增

  • header
  • section
  • asize
  • footer
  • nav
  • article
    (不记得了...)

行内元素:

  • a
  • b
  • span
  • strong
  • i
  • em
  • button
  • input
  • label
  • br
  • textarea
  • select

块元素

  • div
  • p
  • h1-h6
  • ol
  • ul
  • li
  • table
  • tbody
  • td
  • tr
  • thead
  • dl
  • dt
  • dd

H5新增元素

  • section
  • article
  • audio
  • video
  • hearder
  • footer
  • small

title caption table下的标题标签
h5新增 canvas

BTW,语义化的标签有利于爬虫,seo,也对网站的accessible开发,比如ARIA很有帮助!

行内元素:

  • a
  • span
  • input
  • button
  • em
  • i
  • sub
  • sup
  • label
  • strong

块级元素

  • div
  • p
  • h1-h6
  • ul
  • ol
  • li
  • table

H5: canvas定义图形;audio定义声音 aside定义页面之外的内容 command定义命令按钮 nav定义导航链接
output输出类型 progress 任务进度

  • block
  • h1-h5
  • div
  • p
  • ul/ol
  • li
  • table
  • form
  • tr
  • header
  • footer
  • section
  • article
  • nav

  • inline

  • span
  • label
  • input
  • button
  • br
  • a
  • td
  • canvas
  • video

  • inline-block

  • img

块级元素:

  • div
  • p
  • h1 h2 h3 h4 h5 h6
  • ol 有序列表, ul无序列表, li,dl定义列表
  • table ,tr
  • address
  • hr
  • pre
  • blockquote 引用块
  • marquee 滚动文本
  • form
  • header,footer,section
  • article,nav
  • textarea

行内元素:

  • span
  • label
  • button
  • input radio video select
  • a
  • br, b, strong, em
  • canvas

行内元素:span b i input button video radio a
canvas
块级元素:div ul li tabel header footer center h1-h6 from p textarea

行内元素:

  • a 超链接
  • input 输入框
  • span 感觉没啥用
  • img 图片标签
  • stong 加粗
  • sub 下标
  • sup 上标
  • i 没啥用
  • audio 、video canvas 音频视频标签
  • select 单选框
  • radio 单选按钮
  • label

块级元素:

  • p 文本块
  • div
  • h1...h6 标题
  • textarea 多行文本框
  • ul、li、ol有序列表 无序列表
  • table 表格
  • hr
  • pre
  • code
  • header
  • footer
  • aside
  • section
  • nav
  • article

https://codepen.io/9lk/pen/oKgQjY

内联元素有哪些?
a img label span sub sup object
i em small strong, br
input button select textarea
内联元素中置换元素有哪些?
所有表单元素
h5标签有哪些?
header footer section
article aside video audio canvas
fieldset address email
块级元素有哪些?
div table
ul ol li dl dt dd
h1~h6 p hr

区块元素
div p address
ul ol li
dl dt dd
table tfoot form
pre h1~h6 hr

内联元素:
img cite(引用)
a br sup sub label(表单标记)
span input textarea
b big i em strong

h5元素:
nav section footer header
aside dialog(对话)
progress(表示进度条) time meter(表示特定范围的值) video audio
menu command(用来处理命令按钮)

块元素:
div p ul li h1~h6 ol dt dd
内联元素:
span img a br em b i strong input
h5元素:
section nav footer header

行内元素

  • a
  • b
  • span
  • i
  • em
  • strong
  • block
  • input
  • button
  • select
  • form

块级元素

  • div
  • p
  • ul
  • ol
  • li
  • h1~h6
  • textarea

H5新增

  • header
  • section
  • asize
  • footer
  • nav
  • article
    (不记得了...)

textarea 不是块级

div textarea table tbody tr td ul ol li dl dt dd h1-h6
p span em form input img a br strong
header footer nav

pre code &nbsp canvas svg audio video

行内元素:
a
b
span
strong
i
em
button
input
label
br
textarea
select
块元素
div
p
h1-h6
ol
ul
li
table
tbody
td
tr
thead
dl
dt
dd
H5新增元素
section
article
audio
video
hearder
footer
nav
canvas

@hishuling 严格来说 tr 不能算是块级元素,因为在标准里是这么说的:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes

同样,按照标准的说法,块级别的元素的display属性只有'block', 'list-item', 和'table'
我不知道是不是百分百正确,我只是从文档里看来的,希望各位可以帮忙指正
相关链接:
https://www.w3.org/TR/CSS2/visuren.html#block-formatting

https://www.w3.org/TR/CSS2/visuren.html#block-level

块级元素:
head
body
div
p
h1-h6
hr
header
footer
main
article
aside
nav
section
ul
li
ol
oi
dl
dt
dd
from
table
thead
hbody
行内元素:
span
a
b
br
strong
tr
td
img
input

块状:
div
section
p
h
行内:
a
span
i
H5:
audio
video
article
header
footer

块级元素:
div p h1-h6 ol ul li table tbody td tr thead dl dt dd
行内元素:
a b span strong i em button input label br textarea select
h5新增元素:
header nav section aside article footer video audio canvas main mark progress

常用块级元素:

  1. 常用:div、p、ul、li、ol
  2. 结构:aside、footer、header、nav、section、main
  3. 文章:address、article、figure、figcaption、h1、h2、h3、h4、h5、h6、pre
  4. 表格:table、thead、tbody、tfoot、th、td、caption
  5. 表单:form
  6. 其他:canvas

常用行内元素:

  1. 常用:a、img、span
  2. 文本:em、i、strong、small
  3. 表单:button、input、label、option、progress、select、textarea
  4. 媒体:audio、video

// 表单类
form(块级)
input、textarea、button、select、label

// 布局结构类(以下基本属于块级元素)
div、p、h1、h2、h3、h4、h5、h6、ul、li、ol、table、tr、td、thead、tbody。
span(内联元素)

// 媒体相关(以下基本属于内联元素)
audio、vedio、img、canvas、a

// h5语义化标签
header、footer、section、article、aside

// 功能类标签
link、meta、title、html、body、script

// 其他不常用的标签
br、hr

行内

  • a
  • i
  • em
  • strong
  • span
  • a
  • br
  • button
  • label
  • input
  • select
  • tr
  • td
  • img

块级

  • html
  • body
  • header
  • section
  • footer
  • article
  • sider
  • nav
  • ol
  • ul
  • li
  • dt
  • dd
  • div
  • h1~h6
  • p
    -form

..记不全。。。

html
body
header
footer
section
sider
nav
div
h1-h6
p
span
em
strong
i
form
input
select
option
submit
button
area
checkbox
table
thead
tbody
tfooter
th
tr
td
img
video
canvas
音频...
ol
ul
li
hr
br
label

块级元素:
head、body、div、ol、ul、li、h1~h6、p、di、dt、dd、table、address、blockquote 、form...
行内元素:
a、img、span、i、em、sub、sup...
h5新增:
header、footer、canvas、article、nav、section、audio、video...

刚接触没多久,自己用HTML标签都是按照这套路来布局的,下面列举这些应该都是块级元素吧?

  <head></head>
  <body>
      <header>
         <hr/>
         <canvas>
         </canvas>
     </header>
      <main>
          <aside></aside>
          <section>
              <div>....</div>
         </section>
      </main>
      <footer>
          <nav></nav>
     </footer> 
  </body>

该题的本意是让你大致说说各种类型的HTML元素的作用,回答的时候不必要详尽列出所有的HTML元素,每个类别中只需要说几个代表性的即可。

定义

什么是HTML元素?使用HTML标签描述的内容叫HTML元素。HTML 标签的目的是向文档传递含义,也叫HTML Semantic。使用合适的HTML标签能够使你的页面更规范和更具有语义性。

至于块级元素还是行内元素,更容易区分,块级元素用来组织页面的结构,内联元素旨在区分文本的一部分,以赋予特定的功能和含义。内联元素通常包含一个或几个单词。

HTML元素大致可以分成以下几种类别

定义页面结构(Structure elements)

head, body, h1-h6, footer(h5), header(h5), section(h5), article(h5), aside(h5), nav(h5)

定义内容(Text elements)

p, ul, ol, li, blockquote, table, form

区分内容,行内元素允许区分文本的一部分(Inline elements)

strong, em , a, small, abbr

通用元素(generic elements)

div, span

其他元素

audio, video, canvas

参考

块级元素
prev
code
cite
caption
address
canvsa
ifrom
head
body
title
style
header
section
footer
article
aside
nav
br
hr
h1-h6
div
p
ul
li
ol
dl
dt
form
table
tr
th

行内
blockquote
audio
area
map
label
a
span
td
input
button
strong
b
i
em

Was this page helpful?
0 / 5 - 0 ratings