内容索引：

  1. 1. HTML标签：表单标签
  3. 2. CSS

HTML标签：表单标签

  1. * 表单：
  2. 	* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
  3. 	* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
  4.         * 属性：
  5.             * action：指定提交数据的URL
  6.             * method:指定提交方式
  7.                 * 分类：一共7种，2种比较常用
  8.                    * get：
  9.                         1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
  10.                         2. 请求参数大小是有限制的。
  11.                         3. 不太安全。
  12.                    * post：
  13.                         2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
  14.                         2. 请求参数的大小没有限制。
  15.                         3. 较为安全。
  17.         * 表单项中的数据要想被提交：必须指定其name属性
  19. 	* 表单项标签：
  20. 		* input：可以通过type属性值，改变元素展示的样式
  21. 			* type属性：
  22. 				* text：文本输入框，默认值
  23. 					* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  24. 				* password：密码输入框
  25. 				* radio:单选框
  26. 					* 注意：
  27. 						1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
  28. 						2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
  29. 						3. checked属性，可以指定默认值
  30. 				* checkbox：复选框
  31. 					* 注意：
  32. 						1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
  33. 						2. checked属性，可以指定默认值
  35. 				* file：文件选择框
  36. 				* hidden：隐藏域，用于提交一些信息。
  37. 				* 按钮：
  38. 					* submit：提交按钮。可以提交表单
  39. 					* button：普通按钮
  40. 					* image：图片提交按钮
  41. 						* src属性指定图片的路径	
  43. 		   * label：指定输入项的文字描述信息
  44. 			   * 注意：
  45. 				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
  46. 		* select: 下拉列表
  47. 			* 子元素：option，指定列表项
  49. 		* textarea：文本域
  50. 			* cols：指定列数，每一行有多少个字符
  51. 			* rows：默认多少行。

CSS：页面美化和布局控制

  1. 1. 概念： Cascading Style Sheets 层叠样式表
  2. 	* 层叠：多个样式可以作用在同一个html的元素上，同时生效
  4. 2. 好处：
  5. 	1. 功能强大
  6. 	2. 将内容展示和样式控制分离
  7. 		* 降低耦合度。解耦
  8. 		* 让分工协作更容易
  9. 		* 提高开发效率
  11. 3. CSS的使用：CSS与html结合方式
  12. 	1. 内联样式
  13. 		 * 在标签内使用style属性指定css代码
  14. 		 * 如：<div style="color:red;">hello css</div>
  15. 	2. 内部样式
  16. 		* 在head标签内，定义style标签，style标签的标签体内容就是css代码
  17. 		* 如：
  18. 			<style>
  19. 		        div{
  20. 		            color:blue;
  21. 		        }
  23. 		    </style>
  24. 			<div>hello css</div>
  25. 	3. 外部样式
  26. 		1. 定义css资源文件。
  27. 		2. 在head标签内，定义link标签，引入外部的资源文件
  28. 		* 如：
  29.     		* a.css文件：
  30. 				div{
  31. 				    color:green;
  32. 				}
  33. 			<link rel="stylesheet" href="css/a.css">
  34. 			<div>hello css</div>
  35. 			<div>hello css</div>
  37. 	* 注意：
  38. 		* 1,2,3种方式 css作用范围越来越大
  39. 		* 1方式不常用，后期常用2,3
  40. 		* 3种格式可以写为：
  41. 			<style>
  42. 		        @import "css/a.css";
  43. 		    </style>
  45. 4. css语法：
  46. 	* 格式：
  47. 		选择器 {
  48. 			属性名1:属性值1;
  49. 			属性名2:属性值2;
  50. 			...
  51. 		}
  52. 	* 选择器:筛选具有相似特征的元素
  53. 	* 注意：
  54. 		* 每一对属性需要使用；隔开，最后一对属性可以不加；
  56. 5. 选择器：筛选具有相似特征的元素
  57. 	* 分类：
  58. 		1. 基础选择器
  59. 			1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
  60. 		        * 语法：#id属性值{}
  61. 		    2. 元素选择器：选择具有相同标签名称的元素
  62. 		        * 语法： 标签名称{}
  63. 		        * 注意：id选择器优先级高于元素选择器
  64. 		    3. 类选择器：选择具有相同的class属性值的元素。
  65. 		        * 语法：.class属性值{}
  66. 		        * 注意：类选择器选择器优先级高于元素选择器
  67. 		2. 扩展选择器：
  68. 			1. 选择所有元素：
  69. 				* 语法： *{}
  70. 			2. 并集选择器：
  71. 				* 选择器1,选择器2{}
  73. 			3. 子选择器：筛选选择器1元素下的选择器2元素
  74. 				* 语法：  选择器1 选择器2{}
  75. 			4. 父选择器：筛选选择器2的父元素选择器1
  76. 				* 语法：  选择器1 > 选择器2{}
  78. 			5. 属性选择器：选择元素名称，属性名=属性值的元素
  79. 				* 语法：  元素名称[属性名="属性值"]{}
  81. 			6. 伪类选择器：选择一些元素具有的状态
  82. 				* 语法： 元素:状态{}
  83. 				* 如： <a>
  84. 					* 状态：
  85. 						* link：初始化的状态
  86. 						* visited：被访问过的状态
  87. 						* active：正在访问状态
  88. 						* hover：鼠标悬浮状态
  89. 6. 属性
  90. 	1. 字体、文本
  91. 		* font-size：字体大小
  92. 		* color：文本颜色
  93. 		* text-align：对其方式
  94. 		* line-height：行高
  95. 	2. 背景
  96. 		* background：
  97. 	3. 边框
  98. 		* border：设置边框，符合属性
  99. 	4. 尺寸
  100. 		* width：宽度
  101. 		* height：高度
  102. 	5. 盒子模型：控制布局
  103. 		* margin：外边距
  104. 		* padding：内边距
  105. 			* 默认情况下内边距会影响整个盒子的大小
  106. 			* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小
  108. 		* float：浮动
  109. 			* left
  110. 			* right

案例：

  1. 	<!DOCTYPE html>
  2. 	<html lang="en">
  3. 	<head>
  4. 	    <meta charset="UTF-8">
  5. 	    <title>注册页面</title>
  6. 	<style>
  7. 	    *{
  8. 	        margin: 0px;
  9. 	        padding: 0px;
  10. 	        box-sizing: border-box;
  11. 	    }
  12. 	    body{
  13. 	        background: url("img/register_bg.png") no-repeat center;
  14. 	        padding-top: 25px;
  15. 	    }
  17. 	    .rg_layout{
  18. 	        width: 900px;
  19. 	        height: 500px;
  20. 	        border: 8px solid #EEEEEE;
  21. 	        background-color: white;
  22. 	        /*让div水平居中*/
  23. 	        margin: auto;
  24. 	    }
  26. 	    .rg_left{
  27. 	        /*border: 1px solid red;*/
  28. 	        float: left;
  29. 	        margin: 15px;
  30. 	    }
  31. 	    .rg_left > p:first-child{
  32. 	        color:#FFD026;
  33. 	        font-size: 20px;
  34. 	    }
  36. 	    .rg_left > p:last-child{
  37. 	        color:#A6A6A6;
  38. 	        font-size: 20px;
  40. 	    }
  42. 	    .rg_center{
  43. 	        float: left;
  44. 	       /* border: 1px solid red;*/
  46. 	    }
  48. 	    .rg_right{
  49. 	        /*border: 1px solid red;*/
  50. 	        float: right;
  51. 	        margin: 15px;
  52. 	    }
  54. 	    .rg_right > p:first-child{
  55. 	        font-size: 15px;
  57. 	    }
  58. 	    .rg_right p a {
  59. 	        color:pink;
  60. 	    }
  62. 	    .td_left{
  63. 	        width: 100px;
  64. 	        text-align: right;
  65. 	        height: 45px;
  66. 	    }
  67. 	    .td_right{
  68. 	        padding-left: 50px ;
  69. 	    }
  71. 	    #username,#password,#email,#name,#tel,#birthday,#checkcode{
  72. 	        width: 251px;
  73. 	        height: 32px;
  74. 	        border: 1px solid #A6A6A6 ;
  75. 	        /*设置边框圆角*/
  76. 	        border-radius: 5px;
  77. 	        padding-left: 10px;
  78. 	    }
  79. 	    #checkcode{
  80. 	        width: 110px;
  81. 	    }
  83. 	    #img_check{
  84. 	        height: 32px;
  85. 	        vertical-align: middle;
  86. 	    }
  88. 	    #btn_sub{
  89. 	        width: 150px;
  90. 	        height: 40px;
  91. 	        background-color: #FFD026;
  92. 	        border: 1px solid #FFD026 ;
  93. 	    }
  95. 	</style>
  97. 	</head>
  98. 	<body>
  100. 	<div class="rg_layout">
  101. 	    <div class="rg_left">
  102. 	        <p>新用户注册</p>
  103. 	        <p>USER REGISTER</p>
  105. 	    </div>
  107. 	    <div class="rg_center">
  108. 	        <div class="rg_form">
  109. 	            <!--定义表单 form-->
  110. 	            <form action="#" method="post">
  111. 	                <table>
  112. 	                    <tr>
  113. 	                        <td class="td_left"><label for="username">用户名</label></td>
  114. 	                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
  115. 	                    </tr>
  117. 	                    <tr>
  118. 	                        <td class="td_left"><label for="password">密码</label></td>
  119. 	                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
  120. 	                    </tr>
  122. 	                    <tr>
  123. 	                        <td class="td_left"><label for="email">Email</label></td>
  124. 	                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
  125. 	                    </tr>
  127. 	                    <tr>
  128. 	                        <td class="td_left"><label for="name">姓名</label></td>
  129. 	                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
  130. 	                    </tr>
  132. 	                    <tr>
  133. 	                        <td class="td_left"><label for="tel">手机号</label></td>
  134. 	                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
  135. 	                    </tr>
  137. 	                    <tr>
  138. 	                        <td class="td_left"><label>性别</label></td>
  139. 	                        <td class="td_right">
  140. 	                            <input type="radio" name="gender" value="male"> 男
  141. 	                            <input type="radio" name="gender" value="female"> 女
  142. 	                        </td>
  143. 	                    </tr>
  145. 	                    <tr>
  146. 	                        <td class="td_left"><label for="birthday">出生日期</label></td>
  147. 	                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
  148. 	                    </tr>
  150. 	                    <tr>
  151. 	                        <td class="td_left"><label for="checkcode" >验证码</label></td>
  152. 	                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
  153. 	                            <img id="img_check" src="img/verify_code.jpg">
  154. 	                        </td>
  155. 	                    </tr>
  157. 	                    <tr>
  158. 	                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
  159. 	                    </tr>
  160. 	                </table>
  162. 	            </form>
  164. 	        </div>
  166. 	    </div>
  168. 	    <div class="rg_right">
  169. 	        <p>已有账号?<a href="#">立即登录</a></p>
  170. 	    </div>
  172. 	</div>
  174. 	</body>
  175. 	</html>

CSS&HTML标签的更多相关文章

  1. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  2. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  3. Css - 页面标签页图标

    Css - 页面标签页图标 <head>     <meta charset="utf-8" />     <title>京东(JD.COM)- ...

  4. CSS常用标签-手打抄录-感谢原未知博主-拜谢了

    CSS常用标签   CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...

  5. 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版

    实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...

  6. HTML&CSS基础-标签的属性

    HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...

  7. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  8. CSS各类标签用法——选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. CSS - Select 标签在不同浏览器中的高度设置

    当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...

随机推荐

  1. fianl关键词

    一.final关键字概述 final关键字具有最终或不可改变的含义,可用于修饰类.变量.方法.因此被final修饰的类.变量.方法具有以下特征: --final修饰的类不能被继承: --final修饰 ...

  2. ch1_6_2求解删除公共字符问题

    输入两个字符串,从第一字符串中删除第二个字符串中所有的字符.例如,输入"They are students."和"aeiou",则删除之后的第一个字符串变成&q ...

  3. 攻防世界 reverse Replace

    Replace 湖湘杯2018 查壳upx,手动脱壳,修复IAT,去掉重定向便可以运行. ida查看,流程清晰.关键函数check_E51090. int __cdecl main(int argc, ...

  4. NetCore的缓存使用详例

    关于我 作者博客|文章首发 缓存基础知识 缓存可以减少生成内容所需的工作,从而显著提高应用程序的性能和可伸缩性. 缓存最适用于不经常更改的 数据,生成 成本很高. 通过缓存,可以比从数据源返回的数据的 ...

  5. k8s：py项目发布完整流程

    k8s:py项目发布流程 1. 编写Dockerfile # cat Dockerfile FROM python:3.6-slim USER root RUN apt-get update & ...

  6. [2020年10月28日普级组]1408.MSWORLD

    1408. M S W O R L D 1408.MSWORLD 1408.MSWORLD 题目描述 Bessie , Farmer John 的优选牛,刚刚获得了一个牛科动物选美比赛的冠军!并得到了 ...

  7. [树形DP]二叉苹果树

    二 叉 苹 果 树 二叉苹果树 二叉苹果树 题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定 ...

  8. 以Aliyun体验机为例，从零搭建LNMPR环境(下)

    使用云服务器搭建 Web 运行环境,尤其是搭建常见的 LNMPR(Linux+Nginx+MySQL+PHP+Redis) 环境,对于开发人员是必备的职场基本技能之一.在这里,借着搭建我的" ...

  9. 深入了解springcloud gateway 的限流重试机制

    前言 前面给大家介绍了Spring Cloud Gateway的入门教程,这篇给大家探讨下Spring Cloud Gateway的一些其他功能. Spring Cloud Gateway中的重试 我 ...

  10. redis的并发竞争问题是什么？如何解决这个问题？

    这个也是线上非常常见的一个问题,就是多客户端同时并发写一个key,可能本来应该先到的数据后到了,导致数据版本错了.或者是多客户端同时获取一个key,修改值之后再写回去,只要顺序错了,数据就错了. 而且 ...