小工具      在线工具  汉语词典  css  js  c++  java

前端开发篇

前端开发,html,html5,css 额外说明

收录于:102天前

HTML基本语法

// 以代码篇的样式体现具体标签的作用(复制到.html文件中即可)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>菜鸟教程练习</title>
	</head>
	
	<body>
		<h1>这是我第一个标题</h1>
		<p>我的第一个段落</p>
		<a href="https://www.runoob.com">这是我第一个链接</a>
		<--图片随便下载几张移入img文件中即可-->
		<img src="img/2017032015580844436.jpg" width="400px"  height="600px"/>
		
		<p>br标签时换行</p>
		<br />
		<p>看吧,中间有一个换行</p>
		<br />
		
		<p>HTML的标题有h1~h5,依次字体减少<br />
			<h1>这是h1标题</h1>
			<h2>这是h2标题</h2>
			<h5>这是h5标题</h5>
			<br />
			标题会自动添加空格
		</p>
		
		<h5>hr标签在html页面创建水平线</h5>
		<hr />
		<h5>如上面所示</h5>
		
		<--这是一个注释-->
		<p>html的注释是<--内容--></p>
		<!-- 上面的注释失败-->
		
		<p>p是段落,段落会自动添加空格</p>
		<p>这是一个段落</p>
		<p>这是另外一个段落</p>
		
		<p>这个<br>段落<br>演示了分行的效果</p>
		
		<hr>
		<h5>文本格式化</h5>
		加粗b:
		<b>加粗字体</b>
		<br>
		斜体i:
		<i>这是一行斜体子</i><br>
		
		电脑自动输出code:
		<code>电脑自动输出</code><br>
		
		上下标:上表-sup;下标-sub
		这是<sup>上表</sup><sub>下标</sub>
		<hr>

		<h5>超连接</h5>
		<a href="https://www.runoob.com">菜鸟教程</a>
		<b>如果a标签中没有target属性限制在当前网页中打开新网页,否则在新窗口打开</b>
		<a href="https://www.runoob.com" target="_blank">菜鸟教程</a>
		<hr>
		<p>引入css与js的标签link,引入后可以通过css和js改变央视</p>
		<hr>
		<h5>html的头部</h5>
		<b>style标签可以直接定义文档的样式样式</b>
		<!--
		<hr>
		-->
		<b>script标签主要用来加载javascript脚本,后续会有js专门练习</b>
		<p>script标签可以添加在头部也可以添加在尾部,甚至子body中</p>
		<script>
			document.write("hello.word!")
		</script>
		<hr>
		<i>js语法不同与html具体请学习</i>
		<p>
			javascript是一种轻量级语言
			javascript可插入html页面的编程代码,并可由浏览器执行
		</p>
		<hr>
		<h5>css部分</h5>
		<p>
			css定义了html的样式,在html文档中改变布局是通过style标签,在css文件中须通过link引入<br>
			外部链接才可以改变html格式
			
		</p><br>
		<hr>
		<h5>图像</h5>
		<b>插图图像的标签是img </b>
		<img src="img/1543364615986931.jpg" />
		<p>在加载图片是一般会设置托i按的高和宽,不然会破话html的格式,每个标签一般都有属性,图片的长宽属性分别<br>
		是width和height,还有其他属性,另外图像会出现了img出现的位置。
		
		</p>
		<p>图片中还有map标签图片上的区域映射,点击会跳转</p>
		
		<hr>
		<h5>表格</h5>
		<b>每个表格由table标签起引,tr标签决定行,td决定列,值得注意的是用table标签的border属性确认边框,不然不显示边框</b>
		<br>
		<i>无边框表格</i>
		<table>
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
		</table>
		<i>有边框表格</i>
		<table border="1px">
			<tr>
				<td>100</td>
				<td>200</td>	
				<td>300</td>
			</tr>
		</table>
		<b>表头标签为th</b>
		<table border="1" cellpadding="100" >
			<!--cellpadding是单元格间距-->
			<tr>
				<th><b>head</b></th>
				<th><b>tail</b></th>
			</tr>
			<tr>
				<td>100</td>
				<td>200</td>
			</tr>
			
		</table>
		<table border="1" cellpadding="100" cellspacing="0" >
			<br>
			<b>区别?</b>
			<br>
			<!--cellpadding是单元格间距,cellspacing是格子之间的距离-->
			<tr>
				<th><b>head</b></th>
				<th><b>tail</b></th>
			</tr>
			<tr>
				<td>100</td>
				<td>200</td>
			</tr>
			
			</table>
			<br>
			<hr>
			
			<h5>列表</h5>
			<p>有序列表</p>
			<ol>
				<li>Coffee</li>
				<li>Mike</li>
			</ol>
			<p>无序列表</p>
			<ul>
				<li>Coffee</li>
				<li>Milk</li>
			</ul>
			
			<h5>区块元素</h5>
			<p>块元素由h1,p,ul,ol,table等</p>
			<p>内联元素a,img</p>
			<p>块元素div</p>
			<P>span元素是文本容器,css改变其样式</P>
			<hr>
			<h5>html布局</h5>
			<b>div是专门的布局标签但也可以用table作为布局</b><br>
			<p>下面是div布局</p>
			<div id="container" style="width:500px;height: 300px;">
				<div id="header" style="background-color: #ffa500; width: 500px ;height:60px ;">
					<h1>主要的网页标题</h1>	
				</div>
				<div id="menu" style="background-color: aqua;;height: 430px; width: 200px;float: left;" >
					<b>菜单</b><br>
					HTML<BR>
					CSS<br>
					javascript<br>
				</div>
				<div id="content" style="background-color:#eeeeee;height: 430px;width: 300px;float: right;">
					内容在这里
				</div>
				<div id="footer" style="background-color: #ffa500;clear:both;text-align: center;">
					版权runoob.com
				</div>
			</div>
			<br>
			<br>
			<br>
			<b>使用表格布局</b>
			<table border="" cellspacing="" cellpadding="" width="500px" height="300px">
				<tr>
					<td colspan="2" style="background-color:#ffa500;"><h1>主要的网页</h1></td>
				</tr>
				
				<tr>
					<td style="background-color: #ffd700; width=200px">
						<b>菜单</b>
						HTML<BR>
						CSS<br>
						JAVASCRIPT<br>
					</td>
					<td style="background-color: #eeeeee; height:430px;width:300px">
						内容在这里
					</td>
					
				</tr>
				<tr>
					<td colspan="2" style="#ffA500;text-align: center;">
						runoob.com
					</td>
				</tr>
			</table>
			<br>
			<hr>
			<h5>表单</h5>
			<b>文本域</b>
			<form>
				first name:<input type="text"><br>
				last name:<input type="text">
			</form>
			<br>
			<b>密码字段</b>
			<FORM>
				password:<input type="password">
			</FORM>
			<b>单选</b>
			<form>
				<input type="radio" value="male">MALE<BR>
				<input type="radio" value="female">FEMALE
			</form>
			<br />
			<form>
				<input type="checkbox" value="Bike">i have a bike<br>
				<input type="checkbox" value="Car">i have a car
			</form>
			<br>
			<b>提交按钮</b>
			<form >
				username:<input type="text">
				<input type='submit' value="Submit">
			</form>
			
		
		
	</body>
</html>


css基本语法

// 项目的css文档(在项目中新建.css文档粘到其中)
body
{
    
	background-color: #d0e4fe;
}
h1{
    
	color:orange;
	text-align: center;
}
p{
    
	font-family: "times new roman";
	fornt-size:20px;
}
/* 如上面所示,前面的body,h1是选择器(要修改的HTML元素),后面是声明(修改的属性) 如: p{ color:red; text-agign:center; } */

/* 对table01修改样式 */
#table01{
    
	border: 1px solid black; /*边框*/
	width: 600px;
	height: 400px;
	background-color: white;
}
.tr01{
    
	border: 1px solid black;
	width: 600px;
	height: 200px;
	color: aquamarine;
}
.th01{
    
	border: 1px solid black;
	width: 200px;
}
.tr02{
    
	border: 1px solid black;
	width: 200px;
	height: 200px;
	color: #D0E4FE;
}

.th02{
    
	border: 1px solid black;
	width: 200px;
}
/* css中的属性和html有类似之处,了解这些基本可以通过css简单改变html了 */

// html的文档
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			@import url("css/test01.css");
		</style>
	</head>
	<body>
		<h1>css基本语法</h1>
		<p>通过css我们可以提高网页的开发效率,css可以有效的改变网页的格式和布局</p>
		
		<h4>如何在HTML中引入CSS(具体格式在html文档中)</h4>
		<li>外部链接式</li>
		<p>
			在html的link标签中链接.css文件
			<!-- <head>
			<link rel="stylesheet" type="text/css" href="mystyle.css">
			</head> -->
		</p>
		<li>内部嵌入式</li>
			<p>在html的style标签中编写css文档
			<!-- <head>
				<style type="text/css">此处写css文档</style>
			</head> -->
			</p>
		<li>导入式</li>
			<p>在html中导入css文档
		<!-- <head> 
			<style type="text/css">
				@import url("css/test01.css");
			</style>
		</head> -->
			</p>
		<hr />
		<h1>css文档修改了body的背景颜色,h1颜色和位置</h1>
		<p>
			修改了p标签的字体间隔,字体大小
		</p>
		
		<hr />
		<h5>要修改html样式必须通过id和class,区别是id唯一,class不唯一。格式id是#,class. </h5>
		
		<!-- 此处定义一个id=table01的容器通过css改变样式 -->
		<table id="table01">
			<tr class="tr01">
				<th class="th01">对table定义格式</th>
				<th class="th01">对单元格定义格式</th>
				<th class="th01">对边框定义</th>
			</tr>
			<tr class="tr02">
				<th class="th02">看单元格区别</th>
				<th class="th02">看边框区别</th>
				<th class="th02">看整体区别</th>
			</tr>
		</table>
		
	</body>
</html>

项目的结构:
在这里插入图片描述

让我们开始设计您自己的网页吧!

. . .

相关推荐

额外说明

MPLAB X IDE 安装黑色主题

下载黑色主题插件 http://plugins.netbeans.org/plugin/62424/darcula-laf-for-netbeans 本地下载 下载得到:1501524971_nb-darcula-1.6.nbm 在MPLAB X 中to

额外说明

MySQL架构介绍与说明

1、MySQL架构介绍 和其它数据库相比,MySQL有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用。主要体现在存储引擎的架构上, 插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提取相分离。这种架构可以根据业务的需求和实际需要选

额外说明

day18---(08)使用Git与idea存储代码到码云平台

1、提交流程分析 2、使用git远程仓库码云 (1)进入官网,注册用户 码云:https://gitee.com (2)创建远程仓库 1)填写仓库信息 注意:在码云创建仓库时,不要选择下面内容 2)找到新的仓库 3)管理仓库 3、Git仓库(提交代码)

额外说明

【JAVA-Day30】 为什么稀疏数组能在Java中有效地节省内存空间?

为什么稀疏数组能在Java中有效地节省内存空间? 为什么稀疏数组能在Java中有效地节省内存空间? 摘要 引言 一、什么是稀疏数组 二、稀疏数组的应用场景和优势 2.1 应用场景 2.2 优势 三、如何定义稀疏数组 四、总结 参考资料 博主 默语带您 G

额外说明

企业级实战——品优购电商系统开发-102 .103 .密码加密-配置 显示登录名与退出登录

QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技am

额外说明

DOM ------ 操作元素

关于事件~ 事件三要素 : 事件源 事件类型 事件处理程序 事件源: 事件被触发的对象 即按钮 事件类型: 鼠标点击事件 (onclick) 事件处理程序: 通过函数赋值的方式 执行步骤: 获取事件源 注册事件 添加事件处理程序 获取事件源: var b

额外说明

SpringBoot临时属性简单说明

1.修改工程的端口 说明:将工程的端口修改成8080端口  java -jar .\springboot_09_ssmp-0.0.1-SNAPSHOT.jar --server.port=8080  修改前 修改后  2.修改连接数据库密码 说明:修改的

额外说明

VR开发心得积累

背景 喜欢VR游戏,真的有创造世界的感觉,事实上也是如此,这是真正的数字空间,可视,可交互。 Oculus是当之无愧的主流家庭VR解决方案代表,所以,我以Oculus为目标开始自己的VR游戏开发学习之旅。 目标 开发自己的第一款VR游戏,并且上架Ocul

额外说明

PAT乙级真题:C++:数字黑洞

题目描述 给定任一个各位数字不完全相同的4位正整数,如果我们先把4个数字按非递增排序,再按非递减排序,然后用第1个数字减第2个数字,将得到一个新的数字。一直重复这样做,我们很快会停在有“数字黑洞”之称的6174,这个神奇的数字也叫Kaprekar常数。

额外说明

三分钟快速搭建分布式高可用的Redis集群

这里的Redis集群指的是Redis Cluster,它是Redis在3.0版本正式推出的专用集群方案,有效地解决了Redis分布式方面的需求。当单机内存、并发、流量等遇到瓶颈的时候,可以采用这种Redis Cluster方案进行解决。 分区规则 Red

ads via 小工具