笔记内容很简单，不适合初学，只供个人复习参考
1 <!DOCTYPE html> 2 <!--DOCTYPE说明使用的HTML版本--> 3 <html lang="en"> 4 <!--注释的快捷键 ctrl + /--> 5 <head> 6 <!--描述性标签，它用来描述我们网站的一些信息--> 7 <meta charset="UTF-8"> 8 <meta name="Keywords" content="java"> 9 <title>第一个HTML程序</title> 10 </head> 11 <body> 12 <!--标题标签--> 13 <h1>一级标题</h1> 14 <h2>二级标题</h2> 15 <!--段落标签--> 16 <p>这是一整段 ，下面的内容肯定和这段内容换行</p> 17 、aaa 18 <!--水平线标签--> 19 <hr> 20 <!--换行标签--> 21 你好</br>啊 22 <!--字体和样式标签--> 23 <strong>粗体</strong> 24 <em>斜体</em> 25 <!--特殊标签,用到啥自己查--> 26 你 好 27 ©版权标签 28 <font color="red">正文</font> 29 <!-- img学习，其中src是图片地址，alt是图片不存在时的替换文字，其余的 30 非必填 31 --> 32 <img src="b.jpg" alt="测试图片",title = "悬浮文字"/><br/> 33 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/> 34 <!--_blank指在新页面打开--> 35 <a href="https://www.baidu.com" target="_blank">点我跳转到百度</a> 36 <!--锚链接--> 37 <a href="#top">跳转到顶端</a> 38 <!--设置锚点down，href就可以跳转到该锚点，甚至可以跨页面跳转到指定锚点，mailto:是邮件链接，可以跳转到指定邮件--> 39 <a name="down">down</a> 40 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/> 41 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/> 42 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/> 43 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/> 44 <img src="b.jpg" ,width="50",heigth = "150",title = "悬浮文字"/><br/> 45 <a href="#down">跳转到down</a> 46 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表</title> 6 </head> 7 <body> 8 <!--有序列表--> 9 <ol> 10 <li>java</li> 11 <li>python</li> 12 <li>运维</li> 13 <li>c++</li> 14 </ol> 15 <!--无序列表--> 16 <ul> 17 <li>java</li> 18 <li>python</li> 19 <li>运维</li> 20 <li>c++</li> 21 </ul> 22 <!--dl是自定义列表--> 23 <dl> 24 <dt>学科</dt> 25 <dd>java</dd> 26 <dd>python</dd> 27 <dd>运维</dd> 28 <dd>c++</dd> 29 <!--表格table学习--> 30 </dl> 31 <table border="1px"> 32 <tr> 33 <td colspan="4">1-1</td> 34 </tr> 35 <tr> 36 <td rowspan="2">2-1</td> 37 <td>2-2</td> 38 <td>2-3</td> 39 <td>2-4</td> 40 </tr> 41 <tr> 42 <td>3-1</td> 43 <td>3-2</td> 44 <td>3-3</td> 45 </tr> 46 47 </table> 48 49 <!--视频和音频学习--> 50 <!-- 51 src 资源路径 52 controls:控制条 53 autoplay:自动播放 54 --> 55 <audio src="a.mp3" controls autoplay></audio> 56 <video src="b.mp4" controls autoplay></video> 57 <header> 58 <h2>网页头部</h2> 59 </header> 60 <section> 61 <h2>网页主体</h2> 62 </section> 63 <footer> 64 <h2>网页脚步</h2> 65 </footer> 66 </body> 67 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--内联框架，在指定区域嵌入一个页面--> 9 <iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe> 10 <!--点击链接把指定网页加载到本地指定的内联区域里面--> 11 <iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe> 12 <a href="https://www.cnblogs.com/henuliulei/" target="hello">点我跳转</a> 13 <h1>注册</h1> 14 <!--表单form 15 action表单提交的位置， 16 method：提交方式，post比get安全些 17 --> 18 <form action="Test01.html" method="post"> 19 <p> 20 用户名：<input type="text" name="username"> 21 </p> 22 <p> 23 密码：<input type="password" name="pwd"> 24 </p> 25 <p>性别： 26 <input type="radio" value="boy" name="sex">男 27 <input type="radio" value="girl" name="sex">女 28 </p> 29 <p>爱好： 30 <input type="checkbox" value="sleep" name="hobby"> 睡觉 31 <input type="checkbox" value="code" name="code">敲代码 32 <input type="checkbox" value="chat" name="chat">聊天 33 </p> 34 <p> 35 <input type="submit"> 36 <input type="reset"> 37 </p> 38 </form> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉框，列表框</title> 6 </head> 7 <body> 8 <!--下拉框--> 9 <p> 10 <select name="列表名称"> 11 <option value="China">中国</option> 12 <option value="us">美国</option> 13 <option value="eth">瑞士</option> 14 </select> 15 </p> 16 <!--列表框--> 17 <p>反馈： 18 <textarea name="textarea" cols="50" rows="10">文本区域</textarea> 19 </p> 20 <p> 21 <input type="file" name="files"> 22 <input type="button" value="上传" name="upload"> 23 </p> 24 <!--邮箱验证--> 25 <p>邮箱： 26 <input type="email" name="email"> 27 </p> 28 <p>URL: 29 <input type="url" name="url"> 30 </p> 31 <p>商品数量 32 <input type="number" name="num" maxlength="10" max="10" min="0" step="1"> 33 </p> 34 <p>音量滑块： 35 <input type="range" min="1" max="100" name="voice"> 36 </p> 37 <p>搜索 38 <input name="find" type="search"> 39 </p> 40 <!--表单的三个应用 隐藏域，只读，禁用--> 41 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--表单的三个应用 隐藏域hidden，只读readonly，禁用disabled--> 9 <!--placeholder的作用是提示信息，requred是非空判断pattern正则表达式 --> 10 <form action="Test01.html" method="post"> 11 <!-- 只读 --> 12 <p> 13 用户名：<input type="text" placeholder="请输入用户名" name="username" value="admin" readonly required> 14 实际名：<input type="text" placeholder="请输入实际名字" name="username1" required> 15 </p> 16 <p> 17 密码：<input type="password" name="pwd" hidden> 18 </p> 19 <p>性别： 20 <input type="radio" value="boy" name="sex" checked disabled>男 21 <input type="radio" value="girl" name="sex">女 22 </p> 23 <p> 24 <input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"> 25 </p> 26 <p> 27 <!--增强鼠标可用性--> 28 <label for="mark">你点我试试</label> 29 <!--点击之后跳转到文本框--> 30 <input type="text" id="mark"> 31 </p> 32 <p> 33 <input type="submit"> 34 <input type="reset"> 35 </p> 36 </form> 37 </body> 38 </html>