HTML5与表单：构建现代网页的基石-CSDN博客

本文链接：https://blog.csdn.net/runlonglong/article/details/124698402

1：html常用标签

1：特殊字符

注意：分号也是特殊字符的一部分

2：表格标签

Html中的表格和单元格类似：

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义行），每行被分割为若干单元格（由 <td> 标签定义列，或者说单元格）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、表单、表格等等。

如果需要表头，可以使用<th>标签,表头默认居中加粗。

表格的常用属性介绍：

1：border：表格的边框

2：align：表格水平位置，也可以用于tr和td中，表示的是单元格内容的水平位置

3：bordercolor：边框颜色

4：width：表格宽度，可以使用比例，也可以使用像素

5：height：表格高度

6：cellpadding：单元格的内容和边框之间的距离

7：cellspacing：两个单元格之间距离的大小

8：bgcolor：表格的背景色，也可以用于tr和td

9：background：表格的背景图片，也可以单独的用于某一个单元格

10：colspan：合并列，当前的单元格占几个列，横向合并，横跨几列

11：rowspan：合并行，单元格纵向跨越的行数

3：表单标签

表单在网页中主要负责数据采集功能；

表单标签主要是用来和服务器进行交互的。可以把客户端浏览器上的数据，通过这个表单发送给服务器端，

服务器就可以获取到其中的数据，然后对其中的数据进行解析。

html中使用form标签完成。表单标签其实是一组标签的组合，不是一个标签。

表单元素是允许用户在表单中（比如：输入框、文本域、下拉列表、单选框、复选框等等）输入信息的元素。

在html中使用<form>来定义表单：

常见的表单元素有：

在form标签中经常使用其他标签：

input主要是用来让用户输入数据的标签。input标签中的type属性，可以设置当前让用户输入的数据填写的类型

input标签的type属性

type="text" 文本框，主要用于让用户输入可见的数据，input的默认属性；

type="password" 密码框，主要用于让用户输入不可见的数据

type="radio" 单选按钮，这个一般是让用户选择的，注意name属性必须一致

type="checkbox" 复选框，用户可以选择多个条件

type="file" 选择文件，可以把本地的文件上传到服务器

type="submit" 提交，提交整个form表单中的数据到服务端

type="reset" 重置，把form表单中的数据重置到初始状态

type="button" 按钮，就是一个简单按钮，没有任何的点击效果

type="image" 图片，可以代替submit提交

type="hidden" 隐藏数据，页面上不会显示，但是这个数据依然会在选择提交的时候提交给服务端

<select> 下拉框，需要和option标签一起使用

<textarea rows="5" cols="40"> 文本区域，其中rows文本区域显示的多少行，cols用于显示文本区域每行多少列

能简单就简单点，能点的就不要让用户输入，千万不要高估用户的智商

1 、制作简历

2、使用上面的简历模板加表单便签，实现用户在浏览器上输入内容

2：h5介绍

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 是 W3C 与 WHATWG 合作的结果。

W3C 指 World Wide Web Consortium，万维网联盟。

WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于web表单和应用程序，W3C专注于 XHTML 2.0。在2006年双方决定进行合作，来创建一个新版本的 HTML。

HTML5 建立的一些规则：

1、新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

2、减少对外部插件的需求（比如 Flash）

3、更优秀的错误处理

4、更多取代脚本的标记

5、HTML5 应该独立于设备

HTML5新特性

1.更好的页面结构,添加<header><footer>等标签

2.多媒体，用于媒介回放的 video 和 audio 元素

3.图像效果，用于绘画的 canvas 元素，svg元素等

4.离线存储,对本地离线存储的更好的支持

5.设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，

6.连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术

3：视频元素

H5出现之前，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

不需要安装插件，只需要浏览器支持H5即可。

语法：<video src="" controls=””></video>，src表示视频的地址，可以设置窗口的宽度和高度

重要HTML属性

controls：control：如果出现该属性，则显示控件，比如播放按钮。每个浏览器中的播放控件都不太一样，但用途都一样，都可以控制开始和结束，跳到新位置和调节音量
autoplay：autoplay：如果出现该属性，视频在就绪后马上播放。不设置autoplay

属性，必须是用户单击播放按钮才会播放音频文件。
loop：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放.

浏览器对视频文件的支持

为了兼容更多的浏览器，这样写，更友好：

<video>

您的浏览器不支持 video 元素。

</video>

4：音频元素

在html5还没确定之前，如果想要在网页上听音乐看视频唯一的办法就是用flash，意思是当你没有给浏览器装载Flash插件的话那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，当然这些能否实现还跟你用的浏览器有关。

使用语法
<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲您的浏览器不支持html5的audio标签</audio>
属性
src 是歌曲的路径
controls 播放控制如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.
loop 歌曲循环在标签里添加该属性歌曲循环
autoplay 当歌曲加载后自动播放，但是只有pc端可以实现移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)