HTML5学习记录(二)

HTML5学习记录二

这是一篇对于html学习的记录，用于总结与复习。当然如果这篇记录能够给你带来帮助，我会很高兴，如果有错误的地方欢迎回复讨论。

 

媒体元素

 

视频标签

<video src=""></video>

src中填写视频的本地地址或网络链接。

controls

给视频添加播放键、进度条、音量调节及下载。

 ######  autoplay

打开网站自动播放。

音频标签

<audio src=""></audio>

src中填写视频的本地地址或网络链接。

controls

给视频添加播放键、进度条、音量调节及下载。

 

iframe内联框架

 

内联框架单独使用

<iframe src=""></iframe>

在src=""中输入网址，即可在网页中内嵌其他网页。

iframe与a一起使用

<iframe src="" name="html1" frameborder="0" ></iframe>

<a href="http:// www. baidu.com" target="html1">点击打开百度</a>

这种结构可使超链接标签跳转网页在网页中以内嵌的形式打开。

 

表单

​

 

​

 

表单标签

<form action="" method=""></form>

• action:填写表单内数据提交给的地址。

• method：可以填 get 或 post 是提交表单数据的方式，get可以在url看见提交的内容，post的保密性稍高。

<input type="">

文本框

• type="text":默认文本框。

• type="password":密码框，输入不显示密码。

• type="email":邮箱输入框，带有简单的邮箱格式验证。

• type="url":url连接输入框，带有简单的格式验证。

• type="search":搜索框。

  • hidden:隐藏。

单选框：type=“radio”

• name="":填入组名，网页内在同一组内的单选框只能选中一个，不在同一组则相当于多选框。

• value=""：提交时显示的名字。

• checked:默认选择本项选中。

• 在标签后写的字符会在网页显示出来。

多选框type="checkbox"

• name="":填入组名。

• value=""：提交时显示的名字。

• checked:默认选择本项选中。

• 在标签后写的字符会在网页显示出来。

按钮

• type="button":普通按钮，

  • name="":提交时的按钮名。

  • value=""：在网页显示在按钮中的字符。

• type="submit":提交按钮，网页中点击提交。

• type="reset":重置按钮，网页中点击后表单重置。

列表框

• <select name="">:name中填写列表名。

  • <option value="">:value填写单元名。

    • selected:默认选择本项选中。

    • 在标签后写的字符会在网页中作为选项显示出来。

域

• <textarea name=""cols="30" rows="10" placeholder="">:文本域，输入文本。

  • name="":文本域名。

  • cols="30":列数。

  • rows="10":行数。

  • placeholder="":默认显示内容，所有文本框可用。

• <input type="file" name="files">:文件域，提交文件。

  • name="":文件域名。

滑块

• <input type="range" name="range" min="0" max="100" step="5">

  • name="range"：滑块名。

  • min：表示滑块底部的数值。

  • max：表示滑块顶端的数值。

  • step：表示每次拖动滑块改变的数值。

数字验证

• <input type="number" name="number" min="0" max="100" step="1">

  • min：表示最低数字。

  • max：表示最大数字。

  • step：表示每次增加时改变的数值。

<label for="">此处可任意填写</label>

• 给其他标签添加id=""属性，然后将id中的字符填入for="",点击其产生的字符可指向对应id的文本框。

初级验证

• placeholder=""

  • 显示提示信息。

• required

  • 非空提示，当文本框中未填写时将无法提交。

• pattern=""

  • 正则表达式验证，使用正则表达式验证文本框填写是否正确。

---

以上内容学习自【狂神说Java】HTML5完整教学通俗易懂

2020-5-11