表格、表单和H5

最新推荐文章于 2024-03-20 14:07:37 发布

我们仰望同一片星空

最新推荐文章于 2024-03-20 14:07:37 发布

阅读量67

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_49491274/article/details/129842772

版权

1.表格

（1）创建表格

<table>                     <!-- 用于定义一个表格 -->
    <caption>表格标题</caption>
        <tr>     
            <th>表头</th>    <!-- 有加粗居中效果 -->
            ...        
       </tr>
      <tr>                  <!-- 定义表格的一行 -->
            <td>单元格内的文字</td>
            ...               <!-- <td></td>的对数=列数 -->
      </tr>
      ...
</table>

（2）表格属性

（3）表格属性

<thead></thead>：用于定义表格的头部。必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

（4）合并单元格

跨行合并：rowspan

跨列合并：colspan

2.表单

一个表单的三个基本组成部分：表单标签、表单域、表单按钮

（1）表单标签

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
        <!-- 提交方式取值为get或post -->

（2）input控件

多选一：给一组的radio命名相同的名字name。

（3）label标签

lable作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

（4）textarea控件（多行文本输入框）

（5）下拉菜单

<option selected ="selected ">选项1</option> 
  <option>选项2</option>
  <option>选项3</option>
  ...

</select>

（6）fieldset标签

<legend>Personalia:</legend>

Name: <input type="text"><br>

Email: <input type="text"><br>

Date of birth: <input type="text">

</fieldset>

3.HTML5

（1）HTML5中新多媒体元素

<audio>

定义音频内容

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

<video>

定义视频（video 或者 movie）

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

<source>

定义多媒体资源 <video> 和 <audio>

属性	值	描述
media	media_query	规定媒体资源的类型，供浏览器决定是否下载。
src	URL	规定媒体文件的 URL。
type	MIME_type	规定媒体资源的 MIME 类型。
sizes		不同页面布局设置不同图片大小。
srcset	URL	<source> 应用于 <picture> 标签时需要使用到。指定在不同情况下使用的图像 URL。

（2）HTML5中新表单元素

<datalist>

定义选项列表。需与 input 元素配合使用该元素，来定义 input 可能的值。

实例：
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

（3）HTML5中新的语义和结构元素

<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。

<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域

<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。

<section>

定义文档中的节（section、区段）。

（4）HTML5中标签使用

<body>
    <header>
定义了文档的头部区域
<nav>定义导航</nav>
</header>
    <div>
        <article>定义页面独立的内容区域</article>
        <aside>定义页面的侧边栏内容</aside>
<section>定义段落节</section>
    </div>
    <footer>定义 section 或 document 的页脚</footer>
</body>