HTML——框架集—常用标签

最新推荐文章于 2024-08-09 15:13:41 发布
Jhinhua
最新推荐文章于 2024-08-09 15:13:41 发布
阅读量1.1k
点赞数
分类专栏： Web前端
本文链接：https://blog.csdn.net/piduocheng0577/article/details/104899052
版权
Web前端专栏收录该内容
72 篇文章 2 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.换行标签 -->
		<span>普通文本标签 与CSS 结合来设置文本样式</span>
		<br />
		<b>加粗字体的标签</b>
		
		<!-- 2.特殊符号 -->
		<!-- 空格： &nbsp; 
		在标签中有空格存在的话 只会显示一个 如果想显示多个空格 就需要&nbsp;完成
		-->
		<p>床 &nbsp;&nbsp;&nbsp;前明月光</p>
		
		<!-- 大于号 小于号的显示 -->
		<!-- 需求： 在文档上显示出来的内容使用尖括号包含的
			<a>
		 -->
		 <a href="http://www.baidu.com">&lt;a&gt;</a>
		 
		 <!-- 3.div 块标签 -->
		 <!-- 结合CSS 来对页面进行布局的。 他一般是当做容器标签来使用的 -->
		 <!-- <div style="position: fixed; right: 0; bottom: 0;"> -->
			 <!-- <input type="text" style="position: fixed; right: 50px; bottom: 0;"/>
			 <button style="position: fixed; right: 0; bottom: 0;">按钮</button> -->
		 <!-- </div> -->
		 <!-- position取值及作用
         static - 普通流；relative - 相对定位；absolute - 绝对定位；fixed - 固定定位，sticky - 粘性定位。	 
		 1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
————————————————
版权声明：本文为CSDN博主「WFY_WFY」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/WFY_WFY/article/details/101918567 -->
		 <div style="position: fixed; right: 0; bottom: 0;">
			 <input type="text" />
			 <button >按钮</button>
		 </div>
		 
		 <!-- 4.表单标签
		  采集用户的输入的信息
		  
		  分为三部分：
				表单标签
					form 在标签通过属性包含 数据提交的服务器地址和数据提交的方式
						数据提交的服务器地址： 接受传递数据的服务器
						提交方式： get和post
							get --- 会直接将提交的数据拼接在服务器地址的后面
							post --- 把数据存放在数据包中的  不会直接在服务器地址后面拼接显示的
								隐私的信息 都是采用的post
				表单域
					采集用户的信息
						输入框 或者 选择按钮  下拉菜单等等
				表单按钮
					确认提交 或者 复位
		  -->
		  <!-- 
		   表单域 --- 大部分情况下使用的是input标签
				通过不同的type属性 显示不同的采集状态
				input
					type
							text(普通的输入框)
							password(密码框 -- 输入的信息显示的是密文)
							submit 提交按钮
							email 邮箱框 --- 做了一些邮箱格式的判断
							radio 单选框
							checkbox 复选框  可以实现多选的情况
							hidden 隐藏域
							file 文件域
							number数值输入框
							range 滑动块
							search 搜索框
							date 日期
							time 时间
					placeholder 设置空白提示语
					value 设置后者获取表单域的内容
					name 设置的是服务器端接受提交的数据准备的字段名
							这个字段名是自定义 但是要和服务器端一致
					checked 表示的是这个字段是默认选中的
					readonly  只读
					required   必填项
					disabled  禁用模式
					pattern  正则表达式
							JS - /包含的是正则表达式/
				select --- 下拉菜单
					option是菜单中的选项
				textarea 文本域 评论的操作
		   -->
		  <!-- #以自己的计算机作为服务器 
		  action  绑定的是服务器的地址
		  method 设置数据提交方式
		  -->
		<form action="#" method="get">
			<!-- 表单域 -->
			<p>用户名:<input  type="text" placeholder="请输入用户名" value="123" name="uname" readonly></p>
			<p>密码:<input type="password" placeholder="请输入密码" name="upsw" required pattern="^\w{6,12}$" /></p>
			<p>邮箱:<input type="email" placeholder="请输入邮箱" name="uemail" /></p>
			<!-- <p>
				性别：
				<input type="radio" name="usex" value="男" checked /> <span>男</span>
				<input type="radio" name="usex" value="女" /> <span>女</span>
			</p> -->
			<!-- 
			 label-for 为了增加用户的点击范围
				for绑定的是被增加点击范围的选择框的id属性值
			 -->
			 <p>
			 	性别：
			 	<input type="radio" name="usex" value="男" checked id="man"/> <label for="man">男</label>
			 	<input type="radio" name="usex" value="女" id="woman" disabled /> <label for="woman">女</label>
			 </p>
			 
			 <p>
				 爱好：
				 <input type="checkbox" name="ulike" value="打篮球" id="bb" /><label for="bb">打篮球</label>
				 <input type="checkbox" name="ulike" value="打游戏" id="game" /><label for="game">打游戏</label>
				 <input type="checkbox" name="ulike" value="学习" id="study" /><label for="study">学习</label>
			 </p>
			 
			 <!-- 下拉菜单： 常见的就是地址的选择 -->
			<p>
				所在城市：
				<select name="city">
					<option>北京</option>
					<option>上海</option>
					<option>广州</option>
					<option>深圳</option>
					<option>杭州</option>
					<option>南京</option>
				</select>
			</p>
			
			<!-- 隐藏域：数据是已知的 不需要用户输入的 但是提交数据的时候服务器是需要的 -->
			<p><input type="hidden" name="uid" value="1001011" /></p>
			<!-- 
			 例如：
				用户： 用户id -- 针对于每个用户是唯一
				购买东西 --- 登陆平台 --- 
				买东西 付款 --- 得知道哪个用户付款的
			 -->
			
			
			<!-- 文件域 -->
			<p><input type="file" name="ufile" /></p>
			
			<!-- 数值的取值范围的最大值
			 max
			 最小值
			 min
			 当前值 value
			 步长 step
			 -->
			<p><input type="number" name="uage" max="10" min="0" step="2" value="4"></p>
			
			<!-- 滑动块 
			max
			最小值
			min
			当前值 value
			-->
			<p><input type="range" name="urange" max="10" min="0" value="0"/></p>
			
			<p><input type="search" name="userach"></p>
			
			<p><input type="date" name="udate"></p>
			<p><input type="time" name="utime"></p>
			
			<p>
				<!-- 文本域 
				rows 显示行数
				cols 显示的列数
					可以设置宽和高的变化
				-->
				<textarea rows="10" cols="20"></textarea>
			</p>
			
			<p><input type="color" name="ucolor"  /></p>
			
			<!-- 表单按钮 -->
			<p><input type="submit" value="注册">
			<input type="reset" value="复位">
			</p>
			<!-- <p><input type="reset" value="复位"></p> -->
		</form>
	</body>
</html>