html小结

html：超文本编辑语言。
一、基础符号： 需要记住
1、标签 h
2、文本 p
3、换行 br
4、水平线 hr
5、粗体 strong
6、斜体 em
7、空格 &nbsp
8、版权好 &copy
二、列表：有序无序自定义

<!--有序列表：试卷，考题-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>c++</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c</li>
    <li>c++</li>
</ul>
<!--自定义列表-->
<dl>
    <dt>科目</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c</dd>
    <dd>c++</dd>

    <dt>地址</dt>
    <dd>山西</dd>
    <dd>陕西</dd>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>

三、表格 :table tr表示行 td 表示列

<!--表格
行 tr
列 td
-->
<table border="1px">
    <tr>
        <!--colspan表示跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <!--rowspan表示跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

四、超链接 ：三种 1、跳到一个新的网页。2、跳到本网站指定位置，锚链接。3、打开邮件。

<a name="top">顶部</a>
<!--
超链接：
1、跳转到指定网页
target="_blank" 跳转新的页面
target="_self"  在这个页面打开新的超链接
2、跳转到网页的指定位置:锚链接 name别名，后使用#
-->
<a href="https://www.baidu.com" target="_blank">点击跳转到百度页面</a> <br>
<a href="https://www.baidu.com" target="_self">点击跳转到百度页面</a> <br>
<a href="#top">回到顶部</a>
<!--超链接邮件-->
<a href="mailto:237001416@qq.com">联系我</a>

五、媒体元素

<!--视频和音频
controls  表示显示播放窗口
autoplay  表示自动播放
-->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>

六、表单

<form action="表格.html" target="_self" method="get">
    <!--input 中type决定什么框
    text password radio checkbox button image file number range search submit reset
    其他按钮 textarea  select——option
    -->
    <!--input中的主要类型，value表示默认值，maxlength最大字数，size表示文本框长度
    判断输入内容： required 不能为空  placeholder 提示信息  pattern 正则表达式-->
   <p>名字：<input type="text" name="username" required ></p>
    <p>密码：<input type="password" name="password" placeholder="123456"
                 pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$"></p>
    <!--单选框-->
    <p>
        <!--name相同只能选择一个-->
        性别：
        <input type="radio" value="boy" name="sex"> 男
        <input type="radio" value="girl" name="sex"> 女
    </p>
    <!--多选框-->
    <p>
       爱好：
        <input type="checkbox" name="hobby" value="game">游戏
        <input type="checkbox" name="hobby" value="code">代码
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="chat">聊天
    </p>
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resouce/1.png">
    </p>
    <!--选择框 -->
    <p>
        国家：<select name="表单名称" id="">
        <option value="chain">中国</option>
        <option value="america">美国</option>
        <option value="japan">日本</option>

    </select>
    </p>
    <!--文本域-->
    <p>
        <textarea name="txt" id="" cols="30" rows="10">文本域</textarea>
    </p>
    <!--上传文件   hidden隐藏-->
    <p>
        <input type="file"  name="doc" value="选择文件" hidden>
    </p>
    <!--数字框-->
    <p>
       数字： <input type="number" max="100" min="10" step="5">
    </p>
    <!--滑块-->
    <p>
       音量 <input type="range" name="voice" max="100" min="0">
    </p>
    <!--搜索框  disabled 不能提交禁用-->
    <p>
        搜索：<input type="search" name="search" disabled>
    </p>
    <p><input type="submit" value="提交">
        <input type="reset" value="清空表单"></p>
</form>