HTML基础
1、HTML基础
1、<!--有序列表 应用范围：试卷，问答。。-->
<ol>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>后端</li>
</ol>
2、<!--无序列表 应用范围：导航，侧边栏。。-->
<ul>
<li>Java</li>
<li>Python</li>
<li>前端</li>
<li>后端</li>
</ul>
3、<!--自定义列表 dl:标签 dt:列表名称 dd:列表内容-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dt>位置</dt>
<dd>西安</dd>
</dl>
4、<!--表格table 行：tr、rows 列：td 边框宽度：border="1px"-->
<table border="1px">
<tr align="center">
<!-- colspan 跨列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">小米</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">小明</td>
<td>语文</td>
<td>70</td>
</tr>
<tr>
<td>数学</td>
<td>80</td>
</tr>
</table>
效果
1、有序列表
- Java
- Python
- 前端
- 后端
2、无序列表
- Java
- Python
- 前端
- 后端
3、自定义列表 dl:标签 dt:列表名称 dd:列表内容
- 学科
- 语文
- 数学
- 位置
- 西安
4、表格table 行：tr、rows 列：td 边框宽度：border="1px"
| 学生成绩 | ||
| 小米 | 语文 | 90 |
| 数学 | 100 | |
| 小明 | 语文 | 70 |
| 数学 | 80 | |
<!--表单form 个人比较懒知识点写到一块
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post, get 提交方式
get提交方式，我们可以在url中看到我们提交的信息，不安全，但是高效
post提交方式，比较安全，提交大文件
readonly:只读，不能修改
placeholder：显示输入信息
hidden:隐藏域，但可以地址栏看见提交的value值
required:非空判断，必须要填的
disabled:禁用，变成灰色，不可点击选取
checked:默认选中一项-->
<form action="" method="post">
<p>Root：<input type="text" name="username" value="admin" readonly></p>
<p>用户名：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码：<input type="password" name="pwd" hidden></p>
<!--单选框标签 type:指类型，value:单选框的值-->
<p>性别：
<input type="radio" value="boy" name="sex" checked disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框标签 type:指类型，value:单选框的值-->
<p>爱好：
<input type="checkbox" value="音乐" name="hobbhy">音乐
<input type="checkbox" value="游戏" name="hobbhy" checked>游戏
<input type="checkbox" value="阅读" name="hobbhy">阅读
</p>
<p>按钮：
<input type="button" name="btn1" value="点击">
<input type="image" src=""><!--src是图片路径，可以单击 图片按钮-->
</p>
<p>下拉框：<!-- selected:默认选中-->
<select>
<option value="China">中国</option>
<option value="US" selected>美国</option>
<option value="English">英国</option>
</select>
</p>
<p>文本域：
<textarea name="textarea" rows="5" cols="5">文本内容</textarea>
</p>
<p>文件域：
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--验证 -->
<p>邮箱：
<input type="email" name="emails">
</p>
<!-- pattern:正则表达式 相关网址：https://www.jb51.net/tools/regexsc.htm -->
<p>自定义邮箱：
<input type="text" name="emails" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<p>URL：
<input type="url" name="url">
</p>
<p>商品数量：
<input type="number" name="num" min="0" max="100" step="1">
</p>
<!-- 滑块 -->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框 -->
<p>搜索：
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">点击我试试</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="清空">
</p>
</form>
