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

前端开发篇

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

收录于:152天前

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>

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

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

. . .

相关推荐

额外说明

Nexus私服上有包但无法下载。未找到文物

问题描述 我是在学习Nexus过程当中产生的该问题,然后Nexus是安装在了本地电脑。 项目报错如下: maven配置的也没毛病呀 nexus当中也的确有该jar包呀,这就奇怪了。 问题解决 其实是配置有问题的,网上很多教程都是让你在maven当中配置<

额外说明

Spring Boot读取资源目录下文件失败的解决方法及分析

一、背景 最近有个需求,就是需要从resource目录下读取文件返回给用户。在idea中运行时,有些resource下文件读取工具类能够正常获取读取到文件。但是通过java –jar的方式去运行jar包,此时resource下文件读取工具类读取文件就失效

额外说明

分布式锁的实现

1. 什么是分布式锁   为了在并发环境下保证数据的一致性,我们通常会采用加锁的方式。如果数据只存在于一台服务器上,则只需要使用单机锁则可以解决数据不一致的问题。   而在分布式集群中,一个变量的值可能被一个集群的多个节点所共享,此时若要保证变量的一致性

额外说明

D.9“中国法研杯”司法人工智能挑战赛:基于UTC的多标签/层次分类小样本文本应用,Macro F1提升13%+

“中国法研杯”司法人工智能挑战赛:基于UTC的多标签/层次分类小样本文本应用,Macro F1提升13%+ 相关文章推荐: 小样本文本分类应用:基于UTC的医疗意图多分类,训练调优部署一条龙: 本项目主要完成基于UTC的多标签应用,更多部署细节请参考推荐

额外说明

区块链技术的革命性应用:超越数字货币

区块链技术的革命性应用:超越数字货币 摘要 引言 区块链在金融领域的应用 1. 去中心化金融(DeFi) 2. 跨境支付和汇款 区块链在供应链管理的应用 3. 基于区块链的供应链追溯 4. 防伪和品牌保护 区块链在医疗保健领域的应用 5. 健康记录管理

额外说明

TP5+商城小程序—— 定义API版本号

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

额外说明

超越人类的极限:人工智能的崛起之路

文章目录 1. 人工智能的起源 2. 机器学习的崛起 3. 深度学习和神经网络 4. 应用领域 4.1 医疗保健 4.2 自动驾驶 4.3 金融服务 4.4 教育 4.5 制造业 4.6 农业 5. 挑战和伦理问题 5.1 隐私问题 5.2 就业问题 5

额外说明

mybatis自动生成代码时,只有insert方法的解决方案

在使用mybatis自动生成代码时,发现只有insert方法,找不到其他的方法,以为是配置出现了问题,结果发现是很简单的原因。 1.首先确保我们的数据表有主键 2.其次检查mybatis配置文件generatorConfig.xml是否做了配置限制 例如

额外说明

Spark基础学习笔记18:掌握RDD分区

文章目录 零、本讲学习目标 一、RRD分区 二、RDD分区数量 (一)RDD分区原则 (二)影响分区的因素 (三)使用parallelize()方法创建RDD时的分区数量 1、指定分区数量 2、默认分区数量 3、分区源码分析 (四)使用textFile(

ads via 小工具