032 HTML标签,表格,表单,iframe,CSS

一:html标签

	HyperText Markup Language:超文本标记语言,编写网页的语言,解释型语言(写出来代码直接就能运行)
								那么什么是编译型语言呢,比如C语言。  C源代码 ---> 编译 ---> 二进制文件 ---> 计算机解释执行
	源代码是纯文本
		放在Web根目录下,以html和htm为后缀
	html语言的运行环境是浏览器
	标记语言
		尖括号里面包含关键字
		标签
			标签中有属性,属性对应属性值
			单标签
			双标签
		html文档结构
			头部:文档控制信息,包括整个页面的说明和编码等等
			身体:真正显示文档内容的部分
	<html>
		<head>
			<titile>
				
			</title>
			<meta charset="utf-8">		
		</head>
		<body>
			主体代码
		</body>
	</html>
			
	常用标签:
		<title></title>						浏览器标签页标题
		<meta charset="utf-8">				告诉浏览器我的编码格式是utf-8
		<h1></h1>							标题
		<p><p>								段落
		<br/>								换行标签
		<span>文字</span>					完成对文字的控制
		<div></div>							块级元素
		<a href="http://www.xxx.com" target="_blank">点我进入下一页面</a>	
				超链接,从一个页面跳转到另一个页面,"_blank":在新的标签页打开。不写target就是在当前页面打开
				绝对路径:"http://www.baidu.com"
				相对路径:"./login.html"
		<img src="">						在页面中引入图片资源
			src=""							可以写绝对路径也可以找相对路径

	注释:
		<!--
			注释内容
		-->
	特殊字符,html实体
		&nbsp;		空格
		<			&lt;
		>			&gt;
		&			&amp;
		"			&quot;

 
 

二:html表格

基本表格
	定义3行3列
	<table>					定义表格
		<tr>				定义行
			<td colspan = "2">xxx</td>	定义列,colspan横跨2列,然后要记得删除一列,要不然会有“表格挤出去”的情况
			<td></td>
			<td></td>			若有colspan则这行注释
		</tr>
		<tr>
			<td rowspan="2">xxx</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>			# 若有rowspan则这行注释
			<td></td>
			<td></td>
		</tr>
	</table>

 
 

三:html表单

什么是表单?
	搜索框
	登录框
	文件上传
	注册
	留言板
	
	向服务器提交信息
	搜集用户信息
	
交互
	信息双向交流
读写执行:
	读取	获取信息
	写入	发出信息

小技巧
	管理控制台
	查看器
		DOM		文档对象模型	树形结构
				浏览器构造的
	控制台
		可以执行js代码
	调试器
		不做前端,略过
	网络
		页面的网络连接
	存储
		存储了页面的Cookie信息等
表单本身是一个框架,表单里面会有很多控件(元素)
<form></from>
	action	数据提交到服务器的url
			如果为空,提交到当前页面,也可以采用绝对路径和相对路径
	method	提交方法
				get:url中有显示,url长度限制2KB
				post:上传文件等等,http 请求正文中
				enctype:
					application/x-www-form-urlencoded:	默认值 特殊字符等都可以被提交
					multipart/form-data:		上传文件时使用,必须要写
表单元素:
	<input />		单标签
		type		属性
					text			文本框
					password		密码框
					radio			单选框		可以追加name属性,进行分组,达到多选一的效果
					checkbox		复选框
					reset			重置按钮
					file			文件域
					hidden			隐藏内容
	下拉列表
		<select>
			<option></option>				
		</select>
	文本域:
		<textarea></textarea>
		可以输入回车换行符号

案例:
做出如下效果图
在这里插入图片描述
页面源码:


	<html>
		<head>
			<title>表单</title>
			<meta charset="utf-8">
		</head>
		<body>
			<h1>用户注册页面</h1>
			<form
				action="#"
				method="post"
				enctype="multipart/form-data"	
			>
			用户名:<input name="user" type="text" /><br />
			头像上传:<input type="file" name="head_img">
			<br />
			密  码:<input name="passwd1" type="password" /><br />
			确认密码:<input name="passwd2" type="password" /><br />
			<!-- name:分组,checked:默认选项 -->
			<!--  前端页面传入后台服务器的时候,sex = 1  -->
			性别:<input name="sex" value="1" type="radio" checked="checked"><input name="sex" value="2" type="radio"><br />		
			爱好:<input name="aihao1" value="cf" type="checkbox">吃饭
					<input name="aihao2" value="sj" type="checkbox">睡觉
					<input name="aihao3" value="dyx" type="checkbox">打游戏
				<!-- 传入后台服务器的时aihao1=cf  aihao2=sj   aihao3=dyx,而不是把吃饭睡觉打游戏传入后台 -->
			<br />
			出生年月:<input type="text" name="year" size=4 /><select name="month">
							<option value="0" selected="selected">[选择月份]</option>		<!-- selected默认选项 -->
							<option value="1"></option>
							<option value="2"></option>
							<option value="3"></option>
							<option>...</option>
						</select><input type="text" name="day" size=2 /><br />
			<input type="reset" />		<!--重置按钮-->
			<input type="submit" name="submit" value="提交">
			同意注册协议:
			<textarea name="xieyi"></textarea>
		</body>
	</html>
	

 
 

四:html iframe

iframe
		在一个页面中内嵌另一个页面
	<html>
		<head>
			<title>iframe test page</title>
			<meta charset="utf-8">
		</head>
		<body>
			<iframe src="https://www.baidu.com">
			</iframe>
		</body>
	</html>

案例:
在这里插入图片描述
源代码:

<html>
	<head>
		<title>iframe test page</title>
		<meta charset="utf-8">
	</head>
	<body>
		<a href="http://www.baidu.com" target="my_iframe">百度</a>
		<a href="http://www.qq.com" target="my_iframe">腾讯</a>
		<a href="http://www.souhu.com" target="my_iframe">搜狐</a>
		<iframe 
			name="my_iframe"
			width="100%"
			height="100%"
		>
		</iframe>
	</body>
</html>

 
 

五:CSS

层叠样式脚本
HTML  CSS 都是前端内容
HTML			四梁八柱
CSS				装修公司
提倡html和css分离

CSS样式
	元素内容的颜色		color
	元素内容的背景色	background-color
	字体大小			font-size
	RGB颜色查询网站:www.sojson.com/rgb.html
	RGB颜色	[0-255][0-255][0-255]
		比如:白色:255255255		#ffffff
			  黑色:000				#000000
	
	案例:
	<html>
		<head>
			<title>CSS</title>
			<meta charset="utf-8">
		</head>
		<body>
			<span style="color:#ffffff;background-color:black">测试文字内容</span>
		</body>
	</html>
	
css与html的三种组合方式:
	1)内联方式
		把样式表写在标签内部做为标签中的style的属性值
		<span style="color:#ffffff;background-color:black">测试文字内容</span>
	2)内部样式
		把样式表写在<head>标签内
		<html>
			<head>
				<style type="text/css">
				span {								#标签选择器
					background-color:yellow;
				}
				.aaa{								# 类选择器
					color:black;
					background-color:red;
					font-size:40px;
				}
				#xxx{								# id选择器
					color:red;
				}
				</style>
			</head>
			<body>
				<span>测试<span class="aaa">文字</span>内容内<span id="xxx">容</span>内容</span>
			</body>
		</html>
		选择器:标签,类,id(优先级从低到高)
	3)外部样式
			<style type="text/css">
				span {								#标签选择器
					background-color:yellow;
				}
				.aaa{								# 类选择器
					color:black;
					background-color:red;
					font-size:40px;
				}
				#xxx{								# id选择器
					color:red;
				}
			</style>
		在htnl的head标签内
			<head>
				<link rel="stylesheet" type="text/css" href="这里写css文件的路径,可以是相对路径也可以是绝对路径">
			</head>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值