day026html

2021-02-12 14:01:21 阅读：157 来源： 互联网

## html02

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form01</title>
</head>
<body>
<h3>form 表单提交</h3>
   <form action="myWeb.html" method="get"> <!--//表单可以提交到一个网页也可以是一个请求-->
       <p>name:<input name="name" type="text" required/></p>
       <p>psw:<input name="psw" type="text" placeholder="请输入密码"/></p>
        <p>自定义邮箱：parrent<input type="email" placeholder="请输入正确邮箱"
        pattern="[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
        /></p>
       <!--表单验证 placeholder 默认值提示信息 required 非空  pattern 正则表达式-->
       <p>password:<input name="password" type="password"/></p>
       <p>text默认 maxlength最多输入字符数:<input name="text" type="text" maxlength="10"/></p>
       <p>radio:单选框<input name="sex" type="radio" value="man"/></p>
       <p>radio:<input name="sex" type="radio" value="girl"/></p>
       <p>checkbox:多选框<input name="ss" type="checkbox" /></p>
       <p>checkbox:<input name="ss" type="checkbox" /></p>
       <p>button<input name="btn" type="button" value="click long"/></p>
       <p>image:图片按钮<input name="image" type="image" src="../img/xc.jpg" width="20px" height="20px"/></p>
       <p>file<input name="files" type="file" value="dddd"/></p>
       <p>email会自动验证包含@<input name="email" type="email" value="email0000"/></p>
       <p>url自动验证<input name="url" type="email" value="url0"/></p>
       <p>number数字<input name="number" type="number" value="number2"/></p>
       <p>
           滑块音量：range step="2"每一步增量
           <input type="range" max="10" min="0" step="2" name="voice"/>
       </p>
       <p>
           搜索：
           <input id="search" type="search" name="search"/>
       </p>
       <label for="search">点击指向位置</label>
       <p>
           <select name="select1">
               <option value="dd">china</option>
               <option value="usa">usa</option>
               <option value="v">girls</option>
           </select>
       </p>
       <p>
           <textarea name="textares" cols="10" rows="5">textarea</textarea>
       </p>
       <input type="submit" value="提交"/>
       <input type="reset" value="重置"/>
    </form>
</body>
</html>




<!DOCTYPE html>
<html lang="en"><!--网页总标签-->
<head><!--头部标签-->
    <meta charset="UTF-8"><!--描述标签-->
    <meta name="keywords" content="我的网页">
    <meta name="description" content="来这里练习">
    <title>frist web</title><!--网页标题-->
</head>
<body><!--主体标签-->

<header>
    <h3>i am header</h3>
</header>

<section>i am section</section>

Hello Girl
<hr/>
<!--有序列表ol-->
<ol>
    <li>ol li1有序列表 多用于试卷问答形式</li>
    <li>ol li2</li>
    <li>ol li3</li>
    <li>ol li4</li>
</ol>
<ul>
    <li>ul li1无序列表 多用于导航侧边栏</li>
    <li>ul li1=2无序列表</li>
    <li>ul li1=3无序列表</li>
</ul>
<dl>
    <dt>dl 自定义列表中dt 多用在公司网站底部 </dt>
    <dd>dl dd </dd>
    <dd>dl dd </dd>
    <dd>dl dd </dd>
</dl>
<table border="1px">
    <tr>
        <td colspan="3">成绩</td>
        <!--<td>2</td>-->
        <!--<td>3</td>-->
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>yuwen</td>
        <td>600</td>
    </tr>
    <tr>
        <!--<td>1</td>-->
        <td>shuxu</td>
        <td>300</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>英语</td>
        <td>322</td>
    </tr>
    <tr>
        <!--<td>1</td>-->
        <td>物理</td>
        <td>311</td>
    </tr>
</table>
<hr/>
<h1>wo shi h1</h1>
<p>i am p</p>
<b>i am b</b>
<i>i am i </i>
<strong>i am strong</strong><br/>
<span>up have a br</span>
<em>i am em</em>
<p>&nbsp;空 &nbsp;格</p>
<p>&gt;大于gt，&lt;小于lt，&copy;copy版权</p>
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<a href="#a1" target="_blank" title="找锚点1" name="iam">点我去锚点1</a>
<video src="../mm/map.mp4" autoplay controls>video视频放器:autoplay 自动播放controls：进度条</video>
<audio src="../mm.mp3" controls> audio 音频播放器 </audio>
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px"><img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<p id="a1">锚点1</p><a href="#" title="top">回顶部</a>


<footer>i am footer</footer>
<a href="www.jjc.com" target="hello">在内联框架中打开</a><!--在内联框架中打开-->
<iframe name="hello" src="http://www.hao123.com" width="1000px" height="600px" frameborder="1"></iframe>
</body>
</html>

标签：dl,ol,--,dd,am,day026html,li1
来源： https://www.cnblogs.com/wwwzhqwww/p/14398761.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

day026html