html基础

<!DOCTYPE html>
<html>
  <head>
    <title>h1</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  
  <body>
    This is my HTML page. <br>
  	<!-- 换行标签 -->
  	1.换行标签<br/>
  	
  	<!-- 标题标签 -->
  	<h1>一级标题</h1>
  	<h2>二级标题</h2>
  	<h3>三级标题</h3>
  	<h4>四级标题</h4>
  	<h5>五级标题</h5>
  	<h6>六级标题</h6>
  	
  	<!--段落标签 -->
  	<p>中国地质大学</p>
  	
  	<!--水平线,可以设置颜色color,宽度width,高度size,对其方式 align-->
  	<hr></hr>
  	
  	<!--斜体标签标签 -->
  	<i>中国地质大学<br/></i>
  	
  	<!--字体标签 ,设置颜色,字体,大小(数值%)-->
  	<!-- #值1值2值3,每个值00~FF -->
  	<font color="red" size="10" face="楷体">中国地质大学<br/></font>
  	<font color="#2623F1" size="10" face="楷体">中国地质大学<br/></font>
  	
  	<!--  
  	<center>
  	  	<font color="#2623F1" size=50% face="楷体">中国地质大学<br/></font> 	
  	</center>
  	-->
  	<font color="#2623F1" size=50% face="楷体">中国地质大学<br/></font>  	
  	<!--字体加粗 -->
	<b>中国地质大学<br/></b>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>h.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
  
  <h1>中国地质大学</h1>
  
  <hr></hr>
  
  <p>
  	<font color="red" >中国地质大学(地大,China University of Geosciences,Beijing)</font>
  	,于1952年始建,坐落于北京市,由教育部直属、国土资源部共建,是以地质、资源、环境、地学工程技术、资源产业经济为特色,理、工、
  	文等多科协调发展的全国重点大学,是建国初期著名的“八大学院”之一,国家首批“211工程”"985工程优势学科创新平台”重点建设高校,
  	位列国家“双一流”世界一流学科建设高校。其前身是由北京大学、清华大学、天津大学等院校的地质系(科)合并组建的北京地质学院。
  </p>
  <hr></hr>
  
  <font color="gray" size="2" >
  	<center>
  		中国地质大学主页<br/>
  		学生:xxxx
  	</center>
  </font>
    This is my HTML page. <br>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>h3.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
    This is my HTML page. <br>
    
    <!-- 图片标签 -->
    <!-- 点击图片跳转,可以用a标签包裹图片标签 -->
    <a href="./h2.html"><img src="Img/imge.jpg" align="left" alt="中国地质大学" width="100%" height="100"/></a>
  
  
  <!-- 列表标签  有序、无序-->
  
  	<!-- 有序列表  ol ,可以通过type来设置前面的序号的符号-->
  	<ol type="A">
  		<li>早晨</li>
  		<li>中午</li>
  		<li>下午</li>
  		<li>晚上</li>  		
  	</ol>
  	
  	<!-- 无序列表  ul ,可以通过type来设置前面的序号的符号-->
  	<ul type="disc">
  		<li>早晨</li>
  		<li>中午</li>
  		<li>下午</li>
  		<li>晚上</li>  		
  	</ul>
  	
  	<!-- 连接标签 a来定义 ,也可以访问本地网页-->
  	<a href="http://www.baidu.cn">百度一下</a>
  	<br/>
  	<!-- 重新打开一个页面,不在本页面打开 -->
  	<a href="http://www.baidu.cn" target="_blank">百度一下</a>
    <br/>
    <a href="./h2.html">本地网页</a>
    <br/>
    
  	<!-- 点击图片跳转,可以用a标签包裹图片标签 -->
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>h4.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
  	<!-- 块标签 div span本身并没有什么效果,等,主要与css联合使用控制相关块的样式,布局等 -->
  	
  	<!-- 行内标签,信息在一行显示,内联标签 -->
  	<span>中国地质大学 </span>
  	
  	<!-- 每个标签div占满一整行,块级标签 自动换行 -->
  	<div>中国地质大学 </div>
  	
  	
  	<!--html5中, 语义化标签,用于包含span,div等,便于代码的可读性,统一通过css设置样式 -->
  	<!-- 头部 -->
  	<header>
  	</header>
  	
  	<!-- 脚部 -->
  	<footer>
  	</footer>
  	
  	
  	<!-- 表格标签  table定义表格,tr定义行,td定义单元格,th定义表头单元格,也可以对单个行或单元格设置样式-->
  	<table border="1" cellspacing="0" bgcolor="gray" align="center">
  		
  		<!-- 表格表头 -->
  		<caption>学生信息表</caption>
  		
  		<!-- 表头 -->
  		<thead></thead>
  		
  		<!-- 表体 -->
  		<tbody>
  		</tbody>
  		
  		<!-- 表尾 -->
  		<tfoot></tfoot>
  		
  		<tr>
  			<th>学号</th>
  			<th>姓名</th>
  			<th>邮箱</th>
  			<th>地址</th>
  		</tr>
  		<tr>
  			<td>20151001</td>
  			<td>小明</td>
  			<td>example@163.com</td>
  			<td>中国</td>
  		</tr>
  		<tr>
  			<td>20151002</td>
  			<td>小李</td>
  			<td>example@163.com</td>
  			<td>中国</td>
  		</tr>
  	</table>
  	
  	<table border="1" cellspacing="0" align="center">
  		<tr>
  			<th rowspan="2">学号</th>
  			<th>姓名</th>
  			<th>邮箱</th>
  			<th>地址</th>
  		</tr>
  		<tr>
  			<th>小明</th>
  			<th>example@163.com</th>
  			<th>中国</th>
  		</tr>
  		<tr>
  			<td>20151002</td>
  			<td>小李</td>
  			
  			<!-- 合并单元格,单元格占两列 -->
  			<td colspan="2">example@163.com</td>
  		</tr>
  	</table>

    This is my HTML page. <br>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>h5.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
  <!-- 可以通过table来进行布局,及表格的嵌套,可以避免单元格的合并操作 -->
  
  
  <!-- 表单标签 :采集用户输入信息,和服务器交互-->
  <!-- form :用于定义表单,定义一个范围,范围代表采集用户数据的范围,用于包裹需要用户输入的数据,就可以提交数据 -->
  
  <form action="" method="get">
  	<!-- 属性action:指定提交数据的目的url;
  	     method:指定提交方式,共7种,两种较常用,get,post
  	  	 表单项数据的提交需要指定其name属性
  	  -->
  	      
  	账号:<input name="user-name"><br/>
  	密码:<input name="password"><br/><br/>
  	<input type="submit" value="login" ><br/>
  	
  	<!-- get:请求参数会在地址栏显示,请求参数大小有限制 ,不安全-->
  	<!-- post:请求参数不会在地址栏显示 ,会封装在请求体中,请求参数大小没有限制 ,安全-->
  	
  	
  	<!-- 表单项标签 -->
  	<!--placeholder 用于在背景上显示提示信息 -->
  	
  	<label for="user">账号:</label>
	<input type="text" name="username" id="user" placeholder="输入账号"><br/>
  	密码:<input type="password" name="pwd"><br/>
  	
  	<!-- 一组单选按钮,name需要一致 ,value用于区别提交的值-->
  	性别:<input type="radio" name="rd" value="man"><input type="radio" name="rd" value=women><br/>
  		
  	<!-- 复选框,name需要一致 ,value用于区别提交的值-->
  	爱好:<input type="checkbox" name="like" value="music"> 音乐
  		<input type="checkbox" name="like" value="game"> 游戏<br/>
  		
  	<input type="submit" value="登录" ><br/>
  	
  	
  	添加资源:<input type="file" name="file"><br/>
  	
  	<!-- 隐藏域,用于提交相关数据 -->
  	<input type="hidden" >
  	
  	<!-- 图片按钮,可以提交表单数据 -->
  	<input type="image" src="">
  	
  	<!-- color取色器按钮,data日期按钮,button按钮 ,邮箱按钮,数字按钮等-->
  	
  	<!-- 下路列表 -->
  	籍贯:<select name= "address">
			<option value="1">湖北-武汉</option>
		 	<option value="2">湖南-长沙</option>
  		</select>
  		<br/>
  
  <!-- 文本域 -->
  
  <textarea rows="5" cols="20" name="tetx"></textarea>
  <br/>
  
  </form>
  
    This is my HTML page. <br>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>h6.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./styles.css">

  </head>
  
  <body>
	<form action="" method="post">
		<table border="1" align="center" width="500">
			<tr>
				<td><label for="username">用户名</label></td>
				<td><input type="text" name="username" id="username"></td>
			</tr>
			
			<tr>
				<td><label for="password">密码</label></td>
				<td><input type="password" name="password" id="password"></td>
			</tr>
			
			<tr>
				<td><label for="email">邮箱</label></td>
				<td><input type="email" name="email" id="email"></td>
			</tr>
			
			<tr>
				<td><label for="name">姓名</label></td>
				<td><input type="text" name="name" id="name"></td>
			</tr>
			
			<tr>
				<td><label for="tel">电话号码</label></td>
				<td><input type="text" name="tel" id="tel"></td>
			</tr>
			
			<tr>
				<td><label >性别</label></td>
				<td>
					<input type="radio" name="gender" value="man"><input type="radio" name="gender" value="women"></td>
			</tr>
			
			
			<tr>
				<td><label for="birthday" >出生日期</label></td>
				<td><input type="date" name="birthday" id="birthday"></td>
				
			</tr>
			
			<tr>
				<td><label for="checkcode" >验证码 </label></td>
				<td>
					<input type="text" name="checkcode" id="checkcode">
					<img src="">
				</td>
			</tr>
			
			<tr> <td colspan="2" align="center"><input type="submit" value="注册"></td></tr>
		</table>	
	</form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>css1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./styles.css">

	<!-- 外部样式,通过引入.css格式文件,来实现对样式的设置 -->
	<link rel="stylesheet" href="CSS/css.css">
	
  </head>
  
  <!--所有的div标签样式都改变,内部样式,也可以通过import来带入外部样式.css文件来设置样式 -->
  <style>
  	@import "CSS/css.css";
  	div
  	{
  		color:red;
  	}
  </style>

  <body>
    <div>This is my HTML page. <br> </div>
    <div>
    	中国地质大学<br> 
    	<div>学生:xxx<br></div> 
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>h8.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <!-- Id选择器优先级高于元素选择器 -->
  <!-- 几种选择器的css代码写法 -->
  <style>
  	#ID
  	{
  		color:red;
  	}
  	  	.cls
  	{
  		color:blue;
  	}
  	div
  	{
  		color:green;
  	}
	
	div p
	{
		color:gray;
	}
	
	div > p
	{
		border:1px solid;
	}
	
	input[type="text"]
	{
		border:5px solid;
	}
	
	a:link
	{
		color:pink;
	}
	a:hover
	{
		color:green;
	}
	a:active
	{
		color:yellow;
	}
	a:visited
	{
		color:red;
	}
  </style>
  
  <body>
  
    <!-- id选择器,选择具体id值的元素 -->
	<div id="ID">中国地质大学</div>
	
    <!-- 元素选择器, -->	
	<div>中国地质大学</div>
	
    <!-- 类选择器, -->	
	<p class="cls">中国地质大学</p>
	
	<!-- 选择所有元素    *{}-->
	<!-- 并集选择器    选择器1,选择器2{}-->
	
	<!-- 子选择器    :筛选选择器1下的选择器2元素-->
	<div>
		<p>计算机视觉</p>
	</div>
	<p>计算机视觉</p>
	
	<!-- 父选择器 -->
	<div>
		<p>大数据</p>
	</div>
	<p>大数据</p>
	
	<!-- 属性选择器 -->
	<input type="text">
	<input type="password"><br>
	
	<!-- 伪类选择器,该元素有几种状态 -->
	<a href="#">链接</a>
	
    This is my HTML page. <br>
  </body>
</html>

p
{
	/* 设置颜色,字体大小,边框,对其方式*/
	color:#fff000;
	font-size:30px;
	border:1px solid red;;
	text-align:center;
	line-height:100px;
}

.div1
{
	/* 设置.div类块的大小*/
	width:100px;
	height:500px;
	border:1px solid;
	
	/*外边距,盒子之间的布局设置*/
	margin:50px;
	/* 设置div块背景,图片不重复显示,居中*/
	background:url("Img/imge.jpg") no-respeat center;
}

/*盒子模型:控制布局,每个地方当成一个盒子*/
.div2
{
	/*内边距,盒子之间的布局设置*/
	width:200px;
	height:800px;
	border:1px solid;

    /*内边距,盒子之间的布局设置*/
	padding:50px;
	
	/*设置盒子的属性,让width,height就是盒子的最终大小,而不会犹豫设置外边距而使大小变化*/
	box-sizing:border-box;
}

/*float浮动效果*/

.div3
{
	float:left;/*可以到同一行展示三个div,div默认是换行的*/
}
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秘境之眼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值