HTML学习

1.表单学习

例子

效果演示1

代码

  1.   <form action="get">
  2.        <div class="name">
  3.         <div>
  4.             <label for="username">用户名:</label>
  5.             <input type="text" id="username" name="username" autofocus required />
  6.         </div>
  8.         <div>
  9.             <label for="psw">密码:</label>
  10.             <input type="password" id="psw" name="password" required />
  11.         </div>
  13.         <div>
  14.             <label for="my-email">邮箱:</label>
  15.             <input type="email" id="my-email" name="email" required />
  16.         </div>
  18.         <div>
  19.             <label for="male">性别:</label>
  21.             <input type="radio" name="gender" id="male" checked />
  22.             <label for="male">男 </label>
  24.             <input type="radio" name="gender" id="female" />
  25.             <label for="female">女</label>
  26.         </div>
  28.         <div>
  29.             <label for="male">爱好:</label>
  31.             <input type="checkbox" name="hobbies[]" id="game" />
  32.             <label for="game">游戏</label>
  34.             <input type="checkbox" name="hobbies[]" id="programmer" checked />
  35.             <label for="programmer">编程</label>
  37.             <input type="checkbox" name="hobbies[]" id="shoot" />
  38.             <label for="shoot">摄影</label>
  40.             <input type="checkbox" name="hobbies[]" id="swim" />
  41.             <label for="swim">游泳</label>
  42.         </div>
  43.         <div>
  44.         <label for="vip">会员:</label>
  46.         <select name="vip" id="vip">
  47.             <option value="1">金牌会员</option>
  48.             <option value="2">银牌会员</option>
  49.             <option value="3" selected>铜牌会员</option>
  50.             <option value="4">普通会员</option>
  51.         </select>
  52.         </div>
  54.         <label for="introduction">个人简介:</label>
  56.         <div>
  57.             <textarea name="introduction" id="my-introduction" cols="30" rows="10"></textarea>
  58.         </div>
  60.         <div>
  61.             <button>提交</button>
  62.         </div>
  63.     </form>

2.表单学习

例子

效果演示2

代码

  1.   <div class="header">
  2.         <h1>管理后台</h1>
  3.         <div>
  4.             <span>admin</span>
  5.             <a href="">退出</a>
  6.         </div>
  7.     </div>
  9.     <!-- 左侧导航 -->
  10.     <ul class="nav">
  11.         <li><h3><a href="系统管理.html" target="content">系统管理</a></h3></li>
  12.         <li><h3><a href="人员管理.html" target="content">人员管理</a></h3></li>
  13.         <li><h3><a href="考勤管理.html" target="content">考勤管理</a></h3></li>
  14.         <li><h3><a href="内容管理.html" target="content">内容管理</a></h3></li>
  15.         <li><h3><a href="网站首页.html" target="content">网站首页</a></h3></li>
  16.         <li><h3><a href="修改密码.html" target="content">修改密码</a></h3></li>
  18.     </ul>
  20.     <!-- 右侧内容区 -->
  21.     <iframe src="https://map.baidu.com/@13280886.83,2990092.74,12z" frameborder="2" name="content"></iframe>

3.引入样式和优先级

3.1 行内样式

例子

效果演示3

代码

  1.  <h1 style="color:red;font-size: 30px;">h1段落通过行内样式引入CSS样式</h1>

3.2 内部样式

例子

效果演示4

代码

  1.  <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5.     <title>内部样式表</title>
  6.     <!--内部样式表-->
  7.     <style type="text/css">
  8.        div{
  9.            color: green;
  10.        }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>DIV，通过内部样式表引入样式</div>
  15. </body>

3.3 引入外部样式

例子

效果演示5

代码

  1. <head>
  2.     <meta charset="UTF-8">
  4.     <title>外部样式表</title>
  5.     <!--引入外部样式表-->    
  6.     <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9.       <div>DIV，通过外部样式表引入样式</div>
  10. </body>

3.3 行内样式和内部样式表优先级的对比

例子

效果演示6

代码

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>行内样式和内部样式表优先级比较</title>
  4.     <!--内部样式表-->
  5.     <style type="text/css">
  6.         h1{
  7.             color: blue;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <!--行内样式-->
  13.     <h1 style="color:red;">行内样式>内部样式</h1>
  14. </body>

3.3 内部样式和外部样式的比较

例子

效果演示7)

代码

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5.     <title>内部样式表</title>
  6.     <!--内部样式表-->
  7.     <style type="text/css">
  8.        div{
  9.            color: green;
  10.        }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>内部样式表>外部样式表</div>
  15. </body>

3.4 总结

  • 行内样式>内部样式表>外部样式表

更多相关文章

  1. 表单,后台,元素样式的实例演示
  2. 登录表单+iframe后台架构+css优先级
  3. 1. 写一个登录表单,要求有邮箱,密码,登录按钮 2. 写一个简单后台
  4. 一个简单的登陆表单、后台框架及实例演示元素样式来源和优先级
  5. form表单提交、使用iframe编写后台简单布局、css样式分类与优先
  6. 实例演示元素来源与优先级
  7. 表单、内联框架以及CSS基础学习小结
  8. Android的TextView/EditText使用CharacterStyle&SpannableString
  9. Unity调用Android语音合成

随机推荐

  1. android 在TextView中显示EditText,通过B
  2. 【转】Android字体小结
  3. Android文本框布局实例
  4. Android-XmlPullParser解析XML
  5. Android开发个人小记
  6. 如何将library项目打包成jar文件
  7. How to decompile .dex file on Android
  8. Android Studio 4.0 新功能之 AndroidKot
  9. arcgis for android常见问题回答
  10. Android UI设计--半透明效果对话框及acti