HTML表格、表单

 

1.表格标签

表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。

 

（1）表格标题

定义和用法：caption 元素定义表格标题。

<table>

<caption>我是表格标题</caption>

</table>

（2）合并单元格

跨行合并：rowspan

跨列合并：colspan

合并单元格的步骤：

   1、先判断跨行合并还是跨列合并

        2、跨行合并用rowspan属性，跨列合并用个colspan属性  

        3、将rowspan 或者colspan写在第一个要合并的单元格上

        4、将合并的行数和列数写在指定的属性值上

        5、将多余的单元格注释掉

2.表单标签

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

1. action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

2. method用于设置表单数据的提交方式，其取值为get或post。

3. name用于指定表单的名称，以区分同一个页面中的多个表单。

表单的input输入类型

1、email

<form action="demo-form.php">

  E-mail: <input type="email" name="usremail">

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>

2、url

<form action="demo-form.php">

  添加你的主页: <input type="url" name="homepage"><br>

  <input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p>

3、number： 只能输入数字

4、search： 搜索框

<form action="demo-form.php">

  Search Google: <input type="search" name="googlesearch"><br>

  <input type="submit">

</form>

5、range

范围，可以进行拖动，通过value进行取值

<form action="demo-form.php" method="get">

Points: <input type="range" name="points" min="1" max="10">

<input type="submit">

</form>

<p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p>

、color

<form action="https://www.runoob.com/try/demo_source/demo-form.php">

  选择你喜欢的颜色: <input type="color" name="favcolor"><br>

  <input type="submit">

</form>

6、time

<form action="demo-form.php">

  选择时间: <input type="time" name="usr_time">

  <input type="submit">

</form>

7、date

<form action="demo-form.php">

  生日: <input type="date" name="bday">

  <input type="submit">

</form>

8、month

<form action="demo-form.php">

  生日 ( 月和年 ): <input type="month" name="bdaymonth">

  <input type="submit">

</form>

9、week

<form action="demo-form.php">

  选择周: <input type="week" name="year_week">

  <input type="submit">

</form>

3、HTML中的语义标签

body>
    <header>

定义了文档的头部区域

<nav>定义导航</nav>

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

<section>定义段落节</section>
    </div>
    <footer>定义 section 或 document 的页脚</footer>
</body>

 四、多媒体

、Audio(音频)

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

Chrome在2018年10月份更新后关闭了audio、video媒体autoplay自动播放。
</audio>

Video(视频)

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

您的浏览器不支持Video标签。

</video>

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