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/>标记定义一个下拉列表。

 

列表标签

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

 

表格标签 

表格相关修饰属性:

border(指定表格的边框的宽度)比如<table border="1">  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个表格相关的标签:

<caption>定义表格标题

<col>为表格的列定义属性

<colgroup>定义表格列的分组

<table>定义表格

<tbody>定义表格主体

<td>定义一个单元格

<tfoot>定义表格的表注(底部)

<th>定义表格的表头

<thead>定义表格的表头

<tr>定义表格的行

 

表单标签 

1.表单域

<form action="后台地址" method="请求方式" name="表单名字">   </form>

2.表单元素

<input type="属性值">    输入型表单元素,单标签

type属性的描述:

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

checkbox   定义复选框

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

hidden  定义隐藏的输入字段

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

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

radio  定义单选按钮

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

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

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



 

Guess you like

Origin blog.csdn.net/m0_59897687/article/details/119724553