html 标签

回到主页

文末老王儿子的地为什么在老李的地里？请大家发挥思维想象空间！并将你的想法展示在此文章的评论区中

超链接

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <a href="https://baidu.com" title="点击一下，了解更多" target='_Self'>百度一下</a>
 </body>
 </html>
 ​

href属性：超链接指定跳转网页地址

title属性：提示

target属性：self 在当前页打开页面 blank在新页面打开

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <p id='top'></p>
     <a href="https://baidu.com" title="点击一下，了解更多" target='_Self'>百度一下</a>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <p id=>小猿圈</p>
     <a href="#top">回到顶部</a>
 </body>
 </html>
 ​

当a标签的href属性设置为指定标签的id时，点击a标签会直接跳到置顶标签的位置

发送邮箱

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <a href="mailto:pythonliuwei@gmail.com">联系我们</a>
 </body>
 </html>
 ​

a标签的href属性设置为mailto:你的邮箱 可以启动邮箱发送

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <img src="图片指定的位置" alt="">
     <img src="如果图片在同级目录下直接写图片名称" alt="">
     <img src="如果图片在同级文件夹里直接写同级文件夹/图片名称" alt="">
 </body>
 </html>
 ​

img属性

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <img src="图片指定的位置" alt="" width="200" height="200">
 </body>
 </html>
 ​

img标签 width属性 宽度

img标签 height属性 高度

img标签 alt属性 图片加载失败指定提示文本内容

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <form action="  规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
         <input type="text" placeholder="这里写提示信息">
         <input type="password">
         <input type="submit" value="立即注册">
     </form>
 </body>
 </html>
 ​

input标签 type属性 设置text 文本内容

input标签 type属性 设置password 输入时密码以点显示

input标签 placeholder属性 提示信息

from标签 action 属性 将标签内容向服务器提交数据

from标签 method属性 请求方法 ：get 或者 post

form表单结构改变

通过P标签包裹input标签来实现

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <form action="  规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
         <p>
             <input type="text" placeholder="这里写提示信息">
         </p>
         <p>
             <input type="password">
         </p>
         <p>
             <input type="submit" value="立即注册">
         </p>
     </form>
 </body>
 ​
 </html>

input 更改type属性 变为 单选按钮

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <form action="  规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
         <p>
             男：<input type="radio" name="sex" checked="checked">
         </p>
         <p>
             女：<input type="radio" name="sex">
         </p>
     </form>
 </body>
 ​
 </html>

input标签更改type属性为radio 设置为选择框

input标签更改name属性为相同的属性值 可以起到互斥效果！实现单选框的效果

input标签 checked 属性 默认选中 属性值写checked

复选框

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <form action="  规定当提交表单时向何处发送表单数据。" method="这里写get或者post">
         <p>
             web前端：<input type="checkbox" checked="checked">
             java：<input type="checkbox">
             python：<input type="checkbox">
         </p>
     </form>
 </body>
 ​
 </html>

input标签type属性更改为checkbox 设置为复选框

复选框 就是多选

单选下拉框

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <p>
         <select name="class" id="">
             <option value="a" selected='selected'>html</option>
             <option value="b">css</option>
             <option value="c">js</option>
         </select>
     </p>
 </body>
 ​
 </html>

option标签 selected属性设置为selected 表示默认选中

多选下拉框

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <p>
         <select name="class" id="" multiple="multiple">
             <option value="a" selected='selected'>html</option>
             <option value="b">css</option>
             <option value="c">js</option>
         </select>
     </p>
 </body>
 ​
 </html>

select 标签 multiple属性设置为multiple 为多选

文本域表面

可以让用户输入多行文字

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <textarea name="" id="" cols="30" rows="10"></textarea>
 </body>
 ​
 </html>

textarea标签 cols属性 设置宽度

textarea标签 rows属性 设置高度

重置按钮

当用户输入完信息 按到重置按钮后！用户输入的信息会被清空

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <form action="">
         <p>
             <input type="text">
         </p>
         <p>
             <input type="reset" value='重置'>
         </p>
 ​
 ​
     </form>
     
 </body>
 ​
 </html>

input标签type属性设置为reset 实现点击重置按钮后实现清空输入用户已内容

label标签

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <form action="">
         <p>
             <label for="username">用户名：</label>
             <input type="text" id='username'>
         </p>
         <p>
             <label for="password">密码：</label>
             <input type="password" id='password'>
         </p>
 ​
 ​
     </form>
     
 </body>
 ​
 </html>

label 标签for属性的属性值设置为input标签的id属性的属性值可以进行关联。

div标签

可以把div标签看作一个区域 

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 ​
 <body>
     <div>
         <p>老王家的地</p>
     </div>
     <div>
         <p>老李家的地</p>
         <div>
             <p>老王儿子的地</p>
         </div>
     </div>
     <div>
         <p>老孙家的地</p>
         <div>
             <p>老李家的地</p>
         </div>
     </div>
     <div>
         <p>一个div相当于页面上的一块区域，你要问我老王儿子的地为什么在老李家！你得去问老王</p>
     </div>    
 </body>
 ​
 </html>