端午节--------------html基础
1、<pre>标签可以把空格都显示出来
<pre>你好 今天是端午节 吃粽子了吗 </pre>
2、定义列表通常用于图文编码时
<dl> <dt><img src="image.png"/></dt> <dd>图片描述</dd> <dd>图片描述</dd> </dl>
3、表格的跨行与跨列
<table border=1 style="border-collapse:collapse"> <!-- 设置表格的样式 --> <tr> <td colspan="3">学生成绩</td> <!-- 表格的跨列 --> </tr> <tr> <td rowspan=2>张三</td> <!-- 表格的跨行 --> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan=2>李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>语文</td> <td>91</td> </tr> </table>
输出结果：
4、媒体元素
<video controls loop> <!-- 加入loop元素实现视频循环播放 controls属性实现提供播放、暂停、音量控件；如果改成auto则实现自动播放 --> <source src="video/vedio.avi" type="video/avi"></source> <source src="video/vedio.mp4" type="video/mp4"></source> <source src="video/vedio.webm" type="video/webm"></source>
</video>
5、iframe属性的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试页</title> </head> <body> <h1>上方导航条</h1> <p> <a href="https://www.baidu.com" target="myframe">百度</a><br/> <a href="http://cn.bing.com" target="myframe">bing</a><br/> <a href="http://www.google.cn/" target="myframe">goole</a><br/> </p> <iframe name="myframe" width="800px" height="400px" /> </body> </html>
显示效果为：
6、表单
<form method="post" action="https://www.baidu.com"> <p>名字：<input name="name" type="text" /></p> <p>密码：<input name="pass" type="password"/></p> <p> <input type="submit" name="Button" value="提交"/> <input type="reset" name="Reset" value="重填"/> </p> </form>
7、重置按钮
重置不是清空，是还原到初始状态，比如男女选项，默认男选中状态。已经选择了女，重置按钮会重新选择到男，而不是清空选项，都不选择。
8、多行文本域
<textarea name="textarea" cols="2" rows="3"> 文本内容 </textarea>
cols:显示的行数。rows:显示的行数。
9、文件域
<form action="" method="post" enctype="multipart/form-data"> <p><input type="file" name="files"/><br/> <input type="submit" name="upload" value="上传"/> </p> </form>
10、搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试页</title> </head> <body> <form action="#" method="post"> <p> 请输入搜索的关键词： <input type="search" name="sousuo" placeholder="请输入要搜索的内容"/> </p> </form> </body> </html>
显示结果为：
11、
required：此内容不能为空。
type="hidden":创建一个隐藏域。
readonly:只读。
disabled:禁用。
12、表单元素的标注
当用户使用鼠标单机标注的文本内容时，浏览器会自动将焦点转移到该标注相关的表单元素上。从而增强了鼠标的可用性。
为表单元素进行标注时，需要使用<label>标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试页</title> </head> <body> <form> 请选择性别： <label for="male">男</label> <input type="radio" name="gender" id="male"/> <label for="male">女</label> <input type="radio" name="gender" id="female"/> </form> </body> </html>
此时鼠标移到“男” 就可以选择。
13、pattern属性,正则
"^"：开始
"$"：结束
“\d”：数字
"\D"：非数字
"\s"：空字符
"\S"：非空字符
"\w"：文字
"\W"：非文字
"*"：任意字符（0~N次）
"+"：任意个字符（1~N次）
"?"：是否有（0次或1次）
"{n}"：N次重复
“{n,}”：至少N次
"{n,m}"：n~m次
“.”：除了换行之外的所有字符
所以当要用"."时，需要用"\."来表示。
