html表单介绍

1.单行文本框

表单的头部一半都是先输入用户注册信息，method有两种数据请求。

post:数据在请求体中，不在url中，安全，可发送大量的数据，例如文件上传

GET:数据在url中,明文发送，适合少量数据，不超过4K。有些数据需要GET，请求参数像书签。还有书签

  1. <form
  2.       action="check.php"
  3.       method="GET"
  4.       style="display: grid; gap: 0.5em"
  5.       onsubmit="return false;"></form>
  1. <h2>用户帐号注册</h2>
  2. <label for="username">帐号:</label>
  3.           <input
  4.             type="text"
  5.             id="username"
  6.             name="username"
  7.             placeholder="不少于9位数"
  8.             required autofocus 
  9.             value="laoshi"/>

1.1 buttom是提交按钮

  1. <buttom>提交</buttom>

输出：

1.2 密码框如帐号框一样复制上方进行修改即可

type中的text改为password可进行密码隐藏

  1. <label for="psw">密码:</label>
  2.           <input
  3.             type="password"
  4.             id="psw"
  5.             name="psw"
  6.             placeholder="不少于6位"
  7.             required
  8.           />

1.3 邮箱输入框和密码帐号也是一样修改内部属性即可

内部样式改为email即可

  1. <label for="email">邮箱:</label>
  2.           <input
  3.             type="email"
  4.             id="email"
  5.             name="email"
  6.             placeholder="demo@email.com"
  7.             required
  8.           />

以上三个都放入同一个表单分组用<fieldset></fieldset>框起来即可得出效果。

输出：

2.单选按钮

单选中的name属性，必须全部一样，才能保证返回到唯一值

checked布尔属性，不需要值，只要存在就是true/真 

  1.  <div>
  2.    <label for="secret">性别:</label>
  3.  <input type="radio" name="gender" id="male" value="male" /><label
  4.             for="male" >男</label>
  1.       <input type="radio" name="gender" id="female" value="female" /><label
  2.         for="female"
  3.         >女</label>
  1.           <input
  2.             type="radio"
  3.             name="gender"
  4.             id="secret"
  5.             value="secret"
  6.             checked
  7.           /><label for="secret">保</label>
  8.         </div>

输出：

3.复选框

把上面复选框复制过来稍作修改即可.

hobby[]表示数组，可以保存一组不同类型的数据，供后端调用.

id是拿来获取元素的还可以和标签label的绑定.

  1. <div>
  2.           <label>爱好:</label>
  1.           <input
  2.             type="checkbox"
  3.             name="hobby[]"
  4.             id="trave"
  5.             value="trave"
  6.           /><label for="trave">旅游</label>
  1.           <input
  2.             type="checkbox"
  3.             name="hobby[]"
  4.             id="shoot"
  5.             value="shoot"
  6.           /><label for="shoot">游戏</label>
  1.           <input
  2.             type="checkbox"
  3.             name="hobby[]"
  4.             id="secret"
  5.             value="secret"
  6.             checked
  7.           /><label for="secret">摄影</label>
  8.         </div>

输出：

4.下拉列表

下拉列表，将变量名和多个值份来来设置，由用户自己选择.

ame，value应该在一个标签内，但是select也就是下拉列表

  1. <div>
  2.           <label>会员等级:</label>
  1.     <select name="" id="">
  2.     <option value="1">铜牌会员</option>
  3.     <option value="2">银牌会员</option>
  4.    <option value="3">金牌会员</option>
  5.    <option value="4">至尊会员</option>
  6. </div>

输出：

5.自定义下拉列表

value标签要输入内容才能进行联想

  1.  <div>
  2.   <label for="">搜索关键字:</label>
  3.   <input type="search" name="search" list="keywords" />
  4.   <datalist id="keywords">
  5.   <option value="怒情湘西">怒情湘西</option>
  6.   <option value="云南虫谷">云南虫谷</option>
  7.   <option value="黄皮子坟">黄皮子坟</option>
  8.   <option value="龙岭迷窟">龙岭迷窟</option>
  9.    </datalist>
  10.         </div>

输出：

6.元素样式的来源

默认样式：用户代理 样式，这是浏览器为每一个内置元素设置的默认样式 

  1.       h1 {
  2.         display: block;
  3.         font-size: 2em;
  4.         margin-block-start: 0.67em;
  5.         margin-block-end: 0.67em;
  6.         margin-inline-start: 0px;
  7.         margin-inline-end: 0px;
  8.         font-weight: bold;
  9.       }

自定义样式：用户定义样式

  1.  h1 {
  2. color: red;
  3. background-color: aqua;
  4.       }

style属性:行内样式，仅限于当前元素

  1. <h1 style="color: royalblue">hello php</h1>

浏览器不检查id的唯一性，唯一性由程序员自己确保

  1. <h2 id="title">今晚天气不错</h2>

7.属性选择器

选择器:用于选择页面一个或多个元素的字符串
声明1;
声明2;
选择器 + 声明块 + 规则
使用属性选择器
id选择器是高频选择器及常用，简写为#title

  1. <style>
  3.       [id="title"] {
  4.         color: red;
  5.         background-color: aqua;
  6.       } 
  7.       #title {
  8.         color: saddlebrown;
  9.         background-color: salmon;
  10.       }
  11.     </style>
  1.     <p class="demo">今晚菜很好</p>
  2.     <h2 class="demo">css很好玩</h2>
  1. <style>
  2.   [class="demo"] {
  3.     color: brown;
  4.     background-color: blueviolet;
  5.   }
  7.   .demo {
  8.     color: chartreuse;
  9.     background-color: cornflowerblue;
  10.   }
  11. </style>
  12. ```

8.标签选择器

标签选择器
!important(最高属性) > style属性 > id > class > tag
!important 和style属性都是 用在 样式的调试 

  1.     <style>
  2.       h2 {
  3.         color: crimson !important;
  4.       }
  5.       aaa. {
  6.         color: darkgreen;
  7.       }
  8.       #test {
  9.         color: darkorange;
  10.       }
  11.     </style>
  1.     <h2 id="test" class="aaa">老师</h2>

三大通用属性:几乎所有的元素都可以使用的属性:style , id, class
选择当前h3有三种选择器:
标签, class, id
将id,class,tag,想像成一个三位整数,初始为 0, 0 ,0
百位 十位 个数
id class tag
0 - 0 - 0
百位对应: id
十位对应: class
个位对应: tag

  1.     <h3 id="a" class="b">hello</h3>

0,0,1

  1.       h3 {
  2.         background-color: darkseagreen;
  3.       }

0,0,2

  1.       body h3 {
  2.         background-color: darkslateblue;
  3.       }

0.0,3

  1.       html body h3 {
  2.         background-color: deeppink;
  3.       }

0,1,0

  1.       .b {
  2.         background-color: deepskyblue;
  3.       }

0,1,1

  1.       h3.b {
  2.         background-color: fuchsia;
  3.       }
  1.       #a {
  2.         background-color: goldenrod;
  3.       }

因为有许多框架有原始的样式，这些不能改动

element ui，layui ，bootstrap

blockquote

9.外部样式

使用外部样式让<h1>标签中的内容变色，先创建一个css样式文件。css加入颜色代码。

  1. <body>
  2.     <h1>春天</h1>
  3.   </body>

css的代码

  1. h1 {
  2.   color: green;
  3. }

回到html文件加入<link>标签,即可使用h1标签中的内容变色

  1. <link rel="stylesheet" href="style.css" />

不用link标签的话用style + import标签也是可以实现的效果

  1. <style>
  2.     @import url(style.css);
  3.   </style>

10.上下文选择器

  1. <ul class="list">
  2.       <li>item1</li>
  3.       <li class="item">item2</li>
  4.       <li>
  5.         item3
  6.          <ul>
  7.           <li>item3-1</li>
  8.           <li>item3-2</li>
  9.           <li>item3-3</li>
  10.         </ul> 
  11.       </li>
  12.       <li>item4</li>
  13.       <li>item5</li>
  14.       <li>item6</li>
  15.       <li>item7</li>
  16.       <li>item8</li>
  17.     </ul>

输出：

子元素选择器是>

  1.       .list > li {
  2.         border: 1px solid #000;
  3.       }

后代选择器 后代: 空格

  1.       .list li {
  2.         border: 1px solid #000;
  3.       }

相邻选择器/next下一个：+

可以用li/*都行

  2.       .list .item + li {
  3.         background-color: green;
  4.       }

所以兄弟全部选中 ：~*

*是通用选择器，级别最低的

  1.       .list .item ~ * {
  2.         background-color: green;
  3.       }

更多相关文章

  1. Html基本语法
  2. html练习之表单标签使用
  3. Visual Studio Code打印html标签快捷写法
  4. HTML 链接，列表与表格标签
  5. Html 常用标签用法与实例
  6. HTML(,,,)标签的使用
  7. 使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
  8. 文档结构与常用HTML标签
  9. HTML 部分标签应用及案例学习

随机推荐

  1. 如何一句话激怒程序员
  2. 利用Zipkin追踪Mysql数据库调用链
  3. 关于 Hive开窗函数
  4. FlutterBoost在Android中的使用
  5. RPC框架实践之：Apache Thrift
  6. Android基础总结八：ContentProvider
  7. 从无到有，支付路由系统升级打怪之路|原创
  8. CTF之Five86-1靶机***实战
  9. Android(安卓)S5PV210 camera驱动（tw9912）
  10. Vue 第一次 commit 原来是这个样子