端午节--------------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次

“.”：除了换行之外的所有字符

所以当要用"."时，需要用"."来表示。