HTML总结
1.初步了解
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="JAVA"> <meta name="description" content="Java learing"> <title>我的网页</title> </head> <body> Hello,World! </body> </html>
- DOCTYPE:告诉浏览器使用什么规范
- head标签代表网页头部
- meta用来描述网站信息
- body标签代表网页主体
- title网页标题
<body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体</h2> </section> <footer> <h2>网页尾部</h2> </footer> </body>
2.基本标签
-
标题标签
<!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4>
-
段落标签
<!--段落标签-->
<p>两只老虎两只老虎</p>
<P>跑得快跑得快</P>
<P>一只没有耳朵</P>
- 单独成行
-
换行标签
<br/>
-
水平线标签
<hr/>
-
粗体斜体
<strong>粗体</strong> <em>斜体</em>
-
特殊符号
空 格<br/> 大于号><br/> 小于号<<br/> 版权号©<br/>
3.图像标签
<!--img学习
src:图片地址
相对地址,绝对地址
../ 上一级目录
alt:加载失败替代
title:鼠标悬停文字
width:宽
height:高
-->
<img src="../resource/image/1.png" alt="360图标" title="嘻嘻嘻嘻" width="300" height="300">
4.链接标签
-
<!--a标签学习 href:必填,目标页面 target:表示窗口在哪里打开 _blank 在新标签中打开 _self 在旧标签中打开 -->
-
示例
<a href="demo1.html" target="_self">点击我跳转到页面一</a> <a href="https://www.baidu.com">跳转到百度</a>
-
图片跳转链接
<a href="demo1.html"> <img src="../resource/image/1.png" alt="360图标" title="嘻嘻嘻嘻" width="300" height="300"> </a>
-
锚链接
<a name="top">顶部</a><br/> ………………………………………… ………………………………………… ………………………………………… <!--锚链接 1.需要一个锚标记 2.跳转到标记 --> <a href="#top">回到顶部</a>
-
邮件链接
<!--邮件链接 邮件链接:mailto qq邮箱:qq推广 --> <a href="mailto:417610688@qq.com">点击联系我</a>
5.列表
-
有序列表
<!--有序列表--> <ol> <li>python</li> <li>Python</li> <li>运维</li> <li>C++</li> <li>前端</li> </ol>
-
无序列表
<!--无序列表 应用范围:导航,侧边栏 --> <ul> <li>python</li> <li>Python</li> <li>运维</li> <li>C++</li> <li>前端</li> </ul>
-
自定义列表
<dl> <dt>学科</dt> <dd>java</dd> <dd>python</dd> <dd>Linux</dd> </dl>
6.表格
-
行列属性
<!--表格table 行:tr 列:td --> <!--colspan 跨列--> <!--row span 跨行-->
-
示例
<body> <table border="3px"> <!--border:列表样式--> <tr> <!--colspan 跨列--> <td colspan="3">学生成绩</td> </tr> <tr> <!--row span 跨行--> <td rowspan="2">悟空</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">八戒</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table></body>
-
结果
7.媒体元素
-
音频视频
<!--音频和视频 src:资源路径 controls:控制条 autoplay:自动播放 --> <audio src="../resource/Audio/1.MP3" controls autoplay></audio> <viedo></viedo> <!--viedo同上-->
8.内联框架
<!--iframe内联框架
src:地址
w-h:宽度高度
target:目标
-->
<iframe src="" name="hello" frameborder="0" width="100px" height="100px"></iframe>
<a href="demo1.html" target="hello">点击跳转</a>
- target指向name
9.重点:表单
-
表单开头结尾
<!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:post,get 提交方式 --> <form action="demo1.html" method="get"> </form>
-
文本输入框
<!--文本输入框:input type="text" value 默认初始值 maxlength 最长能写几个字符 size 文本框的长度--> <p>名字: <input type="text" name="username" value="666" maxlength="8" size="30" placeholder="请输入用户名" required></p> <!--密码框:input type="password"--> <p>密码: <input type="password" name="pwd"></p>
-
单选/多选框
<!--单选框标签 value 单选框的值 name 组名 checked 默认值 --> <p>性别: <input type="radio" value="boy" name="sex" checked/>男 <input type="radio" value="girl" name="sex"/>女 </p>
<!-- 多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="sleep" name="hobby" checked>代码 <input type="checkbox" value="sleep" name="hobby">聊天 <input type="checkbox" value="sleep" name="hobby">游戏 </p>
-
文本域
<!--文本域 input type="file" --> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p>
-
文件域
<!-- 文件域--> <p> <input type="file" name="files"> <input type="button" value="上传" name="upload"> </p>
-
邮箱验证
<!--邮件验证--> <p> <label for="email" >邮箱:</label> <input type="email" name="email" id="email" > </p>
-
URL/数字
<!--URL--> <p> <input type="url" name="url"> </p> <!--数字--> <p> <input type="number" name="num" max="100" min="0" step="10"> </p>
-
滑块
<!--滑块 --> <p>音量: <input type="range" name="voice" min="10" max="100" step="10"> </p>
-
搜索框
<!--搜索框--> <p>搜索: <input type="search" name="search"> </p>
-
增强鼠标可用性
<!--增强鼠标可用性--> <label for="mark">点击输入</label> <input type="text" id="mark">
-
自定义邮箱(pattern正则表达式)
<p>自定义邮箱: <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> <p>
-
表单提交与重置
<p> <input type="submit"> <input type="reset"> </p>