HTML5新增标签及列表标签、表格标签、表单标签

目录

HTML5新增标签

1.结构性标记

2.多媒体标记

3.表单标记

列表标签

表格标签 

表格相关修饰属性:

HTML有10个表格相关的标签:

表单标签 

1.表单域

2.表单元素


HTML5新增标签

1.结构性标记

结构性标记主要用来对页面结构进行划分,就像在设计网页时将页面分为导航、内容部分、页脚等,确保HTML文档的完整性。

● article:用于表示一篇文章的主题内容,一般为文字集中显示的区域。

● header:页面主体上的头部。

● nav:是专门用于菜单导航、链接导航的标记。

● section:用于表达书的一部分或一章,在Web页面应用中,该标记也可用于区域的章节表述。

2.多媒体标记

多媒体标记主要解决了以往通过 Flash等进行视频的一些展示,新增的标记使HTML功能变得更加强大了。

● video:视频标记,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式,如WEBM、MP4、OGG。

● audio:音频标记,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式,如MP3、OGG、WAV。

3.表单标记

表单标记主要用于功能性的内容表达,会有一定的内容和数据的关联。

● datalist:配合< Input/>标记定义一个下拉列表。

 

列表标签

  •  
        和 
          元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); (在这里注意的是浏览器默认字体大小为16px)。
      1.   默认是没有设置间距的。
      2.   元素设置 margin的顶部和底部: 16px(1em) ,无内边距设定。
      3. 元素设置为:margin-left 40px (2.5em)。
      4. list-style-type :设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。
      5. list-style-position :设置在每个项目开始之前,项目符号是出现在列表项内,还是出现在其外。
      6. list-style-image :允许您为项目符号使用自定义图片,而不是简单的方形或圆形。
      7. background-image: 充当项目符号的图片文件的参考路径
      8. background-position: 这定义了所选元素背景中的图像将出现在哪里 - 在我们的示例中设置 0 0,这意味着项目符号将出现在每个列表项的最左上侧。
      9. background-size: 设置背景图片的大小。 理想条件下,我们想要项目符号与列表项的大小相同(比列表项稍大或稍小亦可)。 我们使用的尺寸为1.6rem(16px),它非常吻合我们为项目符号设置的 20px  的填充, 16px 加上 4px 的空格间距,可以使项目符号和列表项文本效果更好。
      10. background-repeat:默认条件下,背景图片不断复制直到填满整个背景空间,在我们的例子中,背景图片只需复制一次,所以我们设置值为 no-repeat

     

    表格标签 

    表格相关修饰属性:

    border(指定表格的边框的宽度)比如

     border=1 表示表格边框的粗细为1像素(默认值),为0表示没有边框。

    width(指定表格的宽度)

    height(指定表格的高度)

    bgcolor(背景颜色)

    background(背景图片)

    cellpadding(指定边框与内容之间的空白)

    cellspacing(指定单元格之间的空白)

    bordercolor(表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor)

    bordercolorlight(亮边框颜色,当border值不为0时设置此值有效。亮边框指定表格的左边和上边的边框)

    bordercolordark(暗边框颜色,当border值不为0时设置此值有效。暗边框指定表格的右边和下边的边框)

    align(表格的对齐方式,值有:left  center  right)

    valign(表格的垂直对齐方式,值有:top  middle  bottom)

    HTML有10个表格相关的标签:

    为表格的列定义属性

    定义表格列的分组

    定义表格标题

    定义表格

    定义表格主体

    定义表格的表注(底部)

    定义表格的表头

    定义表格的行

     

    表单标签 

    1.表单域

     

    2.表单元素

       输入型表单元素,单标签

    type属性的描述:

    button   定义可点击的按钮,用于通过JavaScript启动脚本

    checkbox   定义复选框

    file  定义输入字段和“浏览”按钮,供文件上传

    hidden  定义隐藏的输入字段

    image   定义图像形式的提交按钮

    password   定义密码字段,呈现加密形式

    radio  定义单选按钮

    reset  定义重置按钮,重置按钮会清除表单中的所有数据

    submit 定义提交按钮,会把表单数据发送到服务器

    text 定义单行的输入字段,可在其中输入文本,默认宽度为20字符



     

    你可能感兴趣的:(前端,前端)

    定义一个单元格

    定义表格的表头