常用列表、表单验证 、表单数据传输方式(get和post)

1.列表:提升用户的体验度 展示较多的数据

无序列表<ul>    声明标签    <li>    列表项(独占一行、块级元素:末尾处自带换行符)
遵循W3C标准,<ul>标签里面只能嵌套<li>标签,不能嵌套其他标签
<li>标签里面可以嵌套任意标签
无序列表
<ul>
<li></li>
</ul>
有序列表

<ol>
<li></li>
</ol>
定义列表

<dl>
<dt></dt>
<dd></dd>
</dl>
2.媒体元素:html5
视频元素:mpeg4 webm
自动播放:autoplay

<video>
<source src="mpeg4文件(mpeg4文件)" type="video.mpeg4" />
<source src="webm文件(webm文件)" type="video.webm" />
</video>

音频元素:mp3 ogg
<audio>
<source src="mp3 文件(mp3 文件)" type="audio.mp3" />
<source src="ogg文件(ogg文件)" type="audio.ogg" />
</audio>
3.表格:由行+列
border:表格内边框    1px, red solid(实线)(粗细,颜色,线条样式)
border:表格内部的边框则是 1 
**注:在html中的border只能表示边框粗细**
<table>
<tr><td></td><td></td>
</tr>
<tr></tr>
</table>
表格跨行+跨列的问题:都是在td元素上设置的
跨行的属性:rowspan
跨列的属性:colspan
4.iframe
在一个页面中跳转到另一个页面
超链接配合iframe使用
<a href = "#" target="iframe的标识">点我呀</a>
<iframe src="目标页面" width="宽" height="高" name="标识">
5.表单:为了提交数据
**6.get和post的异同?**
请求的提交方式:
    get 请求方式 超链接<a> 将请求的url地址显示在浏览器的地址栏中,
传输少量的数据(4~6KB)
post 请求方式 传输大量的数据文件等。
表单元素既支持post,又支持get,不会将请求的url地址放在地址栏中,传输大量的数据
可以在后台进行设置。(不考虑硬件的条件下)
无论是get还是post 编码格式都是相同的。(表单(1))
encType(编码类型):(1)application/x-www-form-urlencoded 属性会将表单提交的数据转换成url。
url请求的地址?username=jhz&password=123;
    (2):multipart/form-data 上传文件的时候 enctype的取值必须是multipart/form-data method必须是post。
<form action="提交表单的地址" method="默认是get" enctype="urlIncode"> 
...
</form>
7.表单元素:
type:代表不同类型的表单元素
文本框:text
密码框:password
**下拉框:select**
单选框:radio   name 属性值设置为一致
复选框:checkbox    check   默认选中
重置按钮:reset
提交按钮:submit
**多行文本域:textarea**
隐藏域:hidden
文件域:file    文件不设置value值

name:表单元素的标识(推荐 添加)

value属性 对应表单元素的值而已

required:属性 必填 无法提交表单

readonly:属性 只读(不能被修改和选中)
display 不展示
disable 禁用
eg:
1、<input type="hidden" value=""></input>对所有的文本框都起作用(隐藏域,多用于存数据)
2、<input type="text" value="" style="display:none"></input>对象隐藏后,对象不占任何空间
3、<input type="text" value="" style="visibility:hidden"></input>对象隐藏后,还有占有相应的空间大小
4、<input type="text" value="" style"width:0;height:0;"></input>

placeholder:表单元素的提示文本(元素的提示属性)

pattern:借助正则表达式做数据格式的校验。
pattern="1[357]{9}\d"   `//13、15、17 \d表示0-9的数字

下拉框:select
<select name="selected">
<option value="值" selected(默认选中的意思)>展示的文本
</option>
</select>

表单隐藏域:隐藏部分关键数据-->且后台仍旧可以获取

多行文本域:换行的文本框 定制行的数量和列的数量

<textarea name="info" value="我是好人" rows="行数" cols="列的数量" required>

<label for="1">姓名:</label><input id="1" type="text" name="username"  placeholder="输入必须是2-6位字符" required/></br>
8.为什么要进行表单验证?
如果通信(网络)很差,那么注册一个(正确的)账号要花好长时间,对用户来说是非常烦的,对服务器来说增加了其工作的压力。要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。
表单验证的优点如下:
1)减轻服务器的压力
2)保证数据的可行性
所以在客户端就对表单进行验证是非常有必要的。

猜你喜欢

转载自blog.csdn.net/pojpoj/article/details/81138761