HTML+CSS

HTML

工具:

HBuilder
常用快捷键

按键功能
ctrl+D删除光标当前所在的行
ctrl+ Shift+R复制当前行到下一行
Ctrl+Enter将光标移动到下一行
Ctrl+Shift+Enter将光标定位在上一行
Ctrl+Shift+/注释当前行
Ctrl+R运行当前网页/刷新当前网页
Tab整体向右缩进
Shift+Tab整体向左缩进
Shift+/添加单行注释

HelloWorld!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Demo</title>
	</head>
	<body>
		HelloWorld!
	</body>
</html>


Html基本标签

CodingFnnction
<br / >换行符
<hr / >分割线
< b>加粗
< i>斜体
< strong >加粗
< em>斜体
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>Title1</h1> 
		<h2>Title2</h2>
		<h3>Title3</h3>
		<h4>Title4</h4>
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:水平分割线
        -->
        <hr />
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        
        <hr />
        
        <!--
        	作者:offline
        	时间:2018-11-15 
        	描述:font 属性
        	color
        	size: 1- 7
        
        -->
        Hello<font color="red" size="1">World!</font><br />
        Hello<font color="red" size="2">World!</font><br />
        Hello<font color="red" size="3">World!</font><br />
        Hello<font color="red" size="4" face="宋体">World!</font><br />
	</body>
</html>

font属性意义
size1-7
face字体
color颜色

简单网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页信息</title>
	</head>
	<body>
		<h3>新版黄鹤楼</h3>
		
		<hr />
		
		<p>故人西辞<font size="3" color="red">富士康</font>,
		</p>
		<p>
		为学技术来<b><i>蓝翔</i></b>。
		</p>	
		<p>
		<strong>蓝翔</strong>毕业包分配,
		</p>
		<p>
		尼玛还是<em>富士康</em>。
		</p>
	</body>
</html>

网页图片

img属性function
src图片路径
width图片长(单位:px)
height图片高(单位: px)
alt图片加载不出来显示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:img :常见属性
        	src:图片路径
        	width:图片宽度 单位(px)
        	height:图片高度
        	alt:图片加载有问题使显示
        -->
        <img src="../picture/timg.jpg" width="500px" height="300px" alt="这张图片有问题"/>
	</body>
</html>

路径问题

路径意义
./当前路径
…/上一级路径
…/…/上上级路径

网页链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:无序列表
        	ul
        		li
        	type:circle,black point ,square
        	
        -->
        <ul type="circle">
        	<li>百度</li>
        	<li>CSDN</li>
        	<li>虎牙</li>
        </ul>
        
        <hr />
        
        
        <!--
        	作者:offline
        	时间:2018-11-15
        	描述:有序列表
        	ol
        		li
        	type:1,a,A,i
        	start: 2指定开始的大小
        	
        -->
        
        <ol type="A">
 
        	<li><a href="http://www.baidu.com">百度<</a>/li>
        	<li><a href="http://www.csdn.net">CSDN</a></li>
        	<li><a href="http://www.huya.com">虎牙</a></li>
        </ol>
        
        <!--
        	作者:offline
        	时间:2018-11-15
        	描述:网址连接
        	a
        		href:url
        		target:_self,_blank(新标签)
        -->
        <ol type="A">
 
        	<li><a href="http://www.baidu.com" target="_blank">百度<</a>/li>
        	<li><a href="http://www.csdn.net" target="_self">CSDN</a></li>
        	<li><a href="http://www.huya.com">虎牙</a></li>
        </ol>
	</body>
</html>

表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:table
        				tr(行)标签
        				td(列) 标签
        			常用属性:
        				border:边框
        				width; 宽
        				height: 高
        				bgcolor: 背景色
        				align:对齐方式
        -->
        
        <table border="1px"  width="400px" bgcolor="yellow" align="center">
        	
        	<tr bgcolor="red" align="center">
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        	</tr>
        	<tr>
        		<td bgcolor="white" align="center">Data</td>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        	</tr>
        	<tr>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        	</tr>
        	<tr>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        	</tr>
        	<tr>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        		<td>Data</td>
        	</tr>
        </table>
        
	</body>
</html>

表格合并及嵌套

colspan:跨列
rowspan: 跨行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="400px" align="center">
			<!--
            	作者:offline
            	时间:2018-11-15
            	描述:表格的合并:
            		colspan: 跨列
            		rowspan: 跨行
            -->
			<tr>
				<td colspan="2" align="center">11</td>
				
				<td>13</td>
				<td>14</td>
				
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2">
					<table border="" width="100%">
						
						<tr>
							<td>Data</td>
							<td>Data</td>
							<td>Data</td>
							
						</tr>
						<tr>
							<td>Data</td>
							<td>Data</td>
							<td>Data</td>
							
						</tr>
						
					</table>
				</td>
				
				<td>24</td>
				
			</tr>
			<tr>
				<td>31</td>
				
				<td>34</td>
				
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td rowspan="2">44</td>
				
			</tr>
			<tr>
				<td>51</td>
				<td>52</td>
				<td>53</td>
				
				
			</tr>
		</table>
	</body>
</html>

注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:form 表单标签
        		提交的东西,包住提交的东西
        		属性:
        			action:提交的地址
        			method:提交的方式
        				get:
        				post
        -->
        <form action="../Demo1.html" method="get">
        
        <input type="hidden" value="faljfajf" name="id" />
		用户名称:<input type="text" name="username"/><br />
		用户密码:<input type="password" /><br />
		确认密码:<input type="password" /><br />
		邮箱:<input type="text" /><br />
		手机号码:<input type="text" /><br />
		帅照:<input type="file" /><br />
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:单选的话,给他们取一个相同的名字
        -->
		性别:<input type="radio" name="sex"/>男
			<input type="radio" name="sex"/>女
			<input type="radio" name="sex"/>妖<br />
		爱好:<input type="checkbox" />LoL
		<input type="checkbox" />抽烟
		<input type="checkbox" />喝酒
		<input type="checkbox" />泡妞<br />
		
		择偶要求:
			<textarea cols="10" rows="2"></textarea><br />
			
		籍贯:
			<select>
				<option>---请选择---</option>
				<option>---山西---</option>
				<option>---山东---</option>
				<option>---陕西---</option>
			</select>
			<br />
		<!--
        	作者:offline
        	时间:2018-11-15
        	描述:提交
        -->
        <input type="submit" value="完事了" />
        <input type="button" value="普通按钮" />
        <input type="reset" value="重置按钮" />
        
        </form>
	</body>
</html>

界面划分

Frame

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<!--
    	作者:offline
    	时间:2018-11-16
    	描述:如果使用frameset需要把body删掉
    -->
    
<!--	<frameset cols="10%,30%,*">
		<frame src="aaa.html"/>
		<frame src="bbb.html"/>
		<frame src="ccc.html"/>
	</frameset>-->
	
	<!--<frameset rows="15%,30%,*">
		<frame src="aaa.html" />
		<frame src="bbb.html" />
		<frame src="ccc.html" />
	</frameset>-->
	
	<frameset rows="15%,*">
		<frame src="aaa.html" />
		<frameset cols="15%,*">
			<frame src="bbb.html" />
			<frame src="ccc.html" name="rightFrame"/>
		</frameset>
	</frameset>
</html>

aaa.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body background="../picture/timg.jpg">
		aaa
	</body>
</html>

bbb.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="purple">
		<a href="date.html" target="rightFrame">1.收件箱</a><br />
		<a href="#">2.发件箱</a><br />
		<a href="#">3.垃圾箱</a><br />
	</body>
</html>

ccc.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="yellow">
		ccc
	</body>
</html>

date.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="white">
		helloworld
	</body>
</html>

CSS

div标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-16
        	描述:div:默认占一行,自动换行
        -->
		<div >
			张三
		</div>
		
		<div >
			赵四
		</div>
		
	</body>
</html>

span标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-16
        	描述:span:内容显示在同一行
        -->
		<span>王五</span>
		<span>赵六</span>
		
	</body>
</html>

选择器入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				color: red;
				font-size: 50px;
			}
				
		</style>
	</head>
	<body>
		<!--将字体设置为红色
        -->
		<div>Hello World!</div>
		<div>Hello World!</div>
		<div>Hello World!</div>
		<div>Hello World!</div>
		
	</body>
</html>

元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
		<span>Hello World!</span>
	</body>
</html>

ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
        	作者:offline
        	时间:2018-11-16
        	描述:ID必须是唯一的
        -->
		<style>
			#div1{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">Hello World!</div>
		<div>Demo!</div>
		<div>New Class!</div>
	</body>
</html>

类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.fruit{
				color: red;
			}
			.vegetable{
				color: yellow;	
			}
		</style>
	</head>
	<body>
		<!--
        	作者:offline
        	时间:2018-11-16
        	描述:水果类为红色
        		蔬菜类为黄色
        -->
		<div class="vegetable">黄瓜</div>
		<div class="fruit">苹果</div>
		<div class="vegetable">茄子</div>
		<div class="fruit">香蕉</div>
	</body>
</html>

引入方式

外部引入

作用是更方便修改
style.css

.fruit{
				color: red;
			}
			.vegetable{
				color: yellow;	
			}

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	作者:offline
        	时间:2018-11-16
        	描述:选择的时候选择link:css
        -->
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="vegetable">黄瓜</div>
		<div class="fruit">苹果</div>
		<div class="vegetable">茄子</div>
		<div class="fruit">香蕉</div>
	</body>
</html>

内部引入

其实就是上面所说的几种选择器

行内引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="vegetable" style="color: red;">东瓜</div>
		<div class="fruit">柚子</div>
		<div class="vegetable">茄子</div>
		<div class="fruit">香蕉</div>
	</body>
</html>

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
        	作者:offline
        	时间:2018-11-16
        	描述: float属性:浮动:浮动的元素会脱离正常的文档流,
        				在正常的文档流中不占空间
        				left:
        				right
        		流式布局
        		clear属性:
        				both:两边都不准浮动
        				right:右边不准浮动
        				left:左边不准浮动
        -->
        
        <!--<div style="float: left;width: 200px;height: 200px;background-color: red;"></div>
        <div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
        <div style="float: left;width: 200px;height: 200px;background-color: blue;"></div>
        <div style="float: left;width: 200px;height: 200px;background-color: red;"></div>
        <div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
        <div style="float: left;width: 200px;height: 200px;background-color: blue;"></div>
        -->
        
        <!--
        	作者:offline
        	时间:2018-11-16
        	描述:理解一下浮动:
        -->
      <!--  <div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
        <div style="width: 250px;height: 200px;background-color: red;"></div>
        <div style="width: 200px;height: 200px;background-color: black;"></div>-->
        
        
        <!--
        	作者:offline
        	时间:2018-11-16
        	描述:右边浮动
        -->
        
       <!-- <div style="float: right;width: 200px;height: 200px;background-color: green;"></div>
        <div style="width: 250px;height: 200px;background-color: red;"></div>
        <div style="width: 200px;height: 200px;background-color: black;"></div>-->
        
        <!--
        	作者:offline
        	时间:2018-11-16
        	描述:clear
        			不准浮动
        			
        -->
        
        <div style="float: left;width: 200px;height: 200px;background-color: green;"></div>
        
        <div style="clear: both;"></div>
        
        <div style="width: 250px;height: 200px;background-color: red;"></div>
        <div style="width: 200px;height: 200px;background-color: black;"></div>
      	
       
       
	</body>
</html>

简单实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.logo{
				width: 33%;
				height: 50px;
				border: 1px, solid;
				float: left;
				align-self: center;
			}
			.menu{
				text-decoration: none;
				color: white;
				
			}
		</style>
	</head>
	<body>
		
		<!--
			第一部分:LOGO
			第二部分:导航
			第三部分:商品/浮动
			第四部分:广告
			
		-->
		
		<div>
			<!--LOGO-->
			<div>
				<div class="logo" style="background-color: pink;">DenmD_</div>
				<div class="logo"  style="background-color: plum;">Hello World!</div>
				<div class="logo"  style="background-color: lightseagreen;">
					<a href="#">登陆</a>
					<a href="#">注册</a>
					<a href="#">客服</a>
				</div>
			</div>
			
			<!--取消浮动
				
			-->
			
			<div style="clear: both;"></div>
			
			<!--导航-->
			
			<div style="background-color: black;height: 50px;">
				<a href="#" class="menu">首页</a>
				<a href="#" class="menu">LoL</a>
				<a href="#" class="menu">QQ飞车</a>
				<a href="#" class="menu">DNF</a>
				<a href="#" class="menu">王者荣耀</a>
			</div>
			
			
			
			<!--轮播图-->
			
			<div style="height: 100px;">
				<img src="timg.jpg" width="100%" />
			
			
			<!--浮动图-->
			<div>
				<div style="height: 50px;">
					<h3>Welcome to here</h3>
				</div>
				
				
				<div style="float: left;width: 15%;">
					<img src="timg1.jpg" width="100%"/>
				</div>
				
				<div style="float: left;width: 70%;">
					<img src="timg2.jpg" width="100%"/>
				</div>
				
			</div>
		
			
		</div>
	</body>
	
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值