html01基本标签
01.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <!--设置网页的自动跳转功能--> <meta http-equiv="refresh" content="3;url=http://www.jd.com"/> <title>这是第一个网页</title> </head> <body> 3秒钟之后自动跳转到 京东首页！ </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <title>清平乐诗词</title> </head> <body> <h1>清平乐·年年雪里</h1> <em>朝代:宋代</em> 作者：<strong>李清照</strong> <hr/> <p> 原文：<br/> 年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br/> 今年海角天涯，萧萧两鬓生华。<br/> 看取晚来风势，故应难看梅花。<br/> </p> <!-- h1 - h6都是 标题标签 em:斜体 strong:字体加粗 p:段落 会自动换行 自身闭合标签 <br/>：换行 <hr/>:水平线 --> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>特殊字符</title> </head> <body> <h1>特殊字符</h1> 张三 李四 <br/> 5>4 <br/> 4<5 <br/> "字符串" <br/> 版权符号© <br/> Tm : ™ alt+153（小键盘上输入） <br/> R : ® <br/> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片</title> </head> <body> <!-- src：图片的位置 使用的相对路径 width：图片的宽度 height:图片的高度 title:鼠标悬停在图片上 显示的文字 如果没有设置alt属性，图片不显示时也会替代图片 alt：图片不显示时也会替代图片显示文字 ../ 代表返回上次目录 --> <img src="../images/cat.jpg" width="300" height="300" title="这是一只可爱的小猫咪" alt="小猫咪不见了"/> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>播放歌曲</title> </head> <body> <audio controls="controls" autoplay="autoplay"> <source src="musics/mm.mp3"> <source src="musics/dstw.mp3"> </audio> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>播放视频</title> </head> <body> <video src="musics/QQ.mp4" controls="controls" autoplay="autoplay"/> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片</title> </head> <body> <!-- href:需要访问的界面 超链接跳转的路径 a ：超链接标签 target:访问的界面在哪个窗口显示 _self 是默认值 在本页面 显示 _blank 重新打开一个新的窗口显示 --> <a href="http://www.baidu.com" target="_blank">百度首页</a> <a href="http://www.jd.com" target="_blank">京东首页</a> <a href="http://www.taobao.com" target="_blank">淘宝首页</a> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>锚链接</title> </head> <body> <!-- 锚链接的场景1： 01.从本页面中的A位置 跳转到本页面的B位置 一个界面内的跳转 使用 #标记名称 --> <a href="#cat">跳转到锚链接的标记位置</a> <img src="../images/cat.jpg" width="700"> <img src="../images/cat.jpg"> <img src="../images/cat.jpg"width="700"> <img src="../images/cat.jpg"> <!--定义一个标记 --> <a name="cat">这是锚链接的标记</a> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>锚链接</title> </head> <body> <!-- 锚链接的场景2： 02.从本页面的A位置 跳转到另一个页面的B位置 两个界面内的跳转 使用 另一个网页的名称#标记名称 --> <a href="html锚链接06.html#cat">跳转到锚链接的标记位置</a> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> <!-- 01.没有顺序 每个li独占一行 02.默认的li标签之前有 实心的小圆点 后面我们学css的时候 可以去掉或者改变样式 03.适用于新闻栏以及导航界面！ --> <ul> <li>无序列表内容1</li> <li>无序列表内容2</li> <li>无序列表内容3</li> <li>无序列表内容4</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <!-- 01.有顺序 每个li独占一行 02.默认的li标签之前有数字 后面我们学css的时候 可以去掉或者改变样式 03.适用于 问卷调差，试卷。。。。 --> <ol> <li>有序列表内容1</li> <li>有序列表内容2</li> <li>有序列表内容3</li> <li>有序列表内容4</li> </ol> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>自定义列表</title> </head> <body> <!-- 01.没有顺序 每个dt dd独占一行 02.默认没有任何标记 --> <dl> <dt>C盘</dt> <dd>文件夹1</dd> <dd>文件夹2</dd> <dt>D盘</dt> <dd>文件夹1</dd> <dd>文件夹2</dd> </dl> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <!-- form中的属性 action:表单中的元素被提交的位置 method： 01.get 我们输入的元素内容会在url中显示 不安全 02.post url中不会显示我们的输入 相对来说安全 input 表中中 name的值：是在我们服务器获取用户输入的时候使用的 根据name的值 获取value属性的值 placeholder：占位符 如果用户没有输入 就会出现默认的值 type的值 01.text:文本输入框 02.password：密码输入框 03.submit: 提交的按钮 04.button：普通的按钮，不具有提交的功能 05.reset : 表单重置 清空用户所有的输入 不会清空默认值 必须在form表单中 才有意义 06.radio :单选按钮 必须设置name属性值 而且属性值必须一致 07.hidden :隐藏域 页面上不会显示 但是如果提交到服务器 肯定会获取这个隐藏域的值 属性： checked="checked" 只能在单选和复选框中 使用 size：文本框的显示长度 maxlength:限制用户输入的长度 --> <form action="#" method="post"> 用户名：<input type="text" name="userName" placeholder="请输入您的用户名"><br/> 密码：<input type="password" name="pwd"><br/> 性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <br/> 爱好：<input type="checkbox" name="love" checked="checked">足球 <input type="checkbox" name="love">篮球 <input type="checkbox" name="love">乒乓球 <br/> 请选择文件：<input type="file"><br/> 月份:<select size="2"> <option>请选择</option> <option selected="selected">1月份</option> <option>2月份</option> <option>3月份</option> </select><br/> 协议:<textarea rows="5" cols="5"> </textarea><br/> 隐藏域:<input type="hidden" name="age" value="5"><br/> <input type="submit"><br/> <input type="button" value="普通按钮"><br/> <input type="reset"><br/> </form> </body> </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>form表单练习</title> 6 </head> 7 <body> 8 <!-- 9 disabled="disabled": 禁用属性 10 readonly="readonly" :只读属性 11 --> 12 <h1>用户登录</h1> 13 <form action="login.html" method="post"> 14 用户名：<input type="text" name="userName" value="admin" readonly="readonly"><br/> 15 密码：<input type="password" name="pwd"><br/> 16 <input type="radio" name="a">简约版 17 <input type="radio" name="a">豪华版<br/> 18 <input type="checkbox" name="b">记住密码 19 <input type="checkbox" name="b">安全登录<br/> 20 <button type="submit" disabled="disabled">提交</button> 21 <button type="reset">重置</button> 22 </form> 23 24 25 </body> 26 </html>
