编程学习网 > WEB开发 > web前端开发网页制作代码大全
2022
10-13

web前端开发网页制作代码大全


今天小编和大家分享web前端开发网页制作代码大全,希望对你有所帮助!


<!DOCTYPE html>		<!-- HTML5申明 -->
<html lang="zh">	<!-- 表示本网站为中文网站 -->

<!-- 头部,定义网页标题和字体样式等 -->
 <head>
  <meta charset="UTF-8">								<!-- 定义网页为UTF-8编码 -->
  <title>Web前端开发技术初步应用</title>				<!-- 定义网页标题 -->
  <!-- 定义字体样式 -->
  <style type="text/css">								
  	p{font-size:20px;color:red;text-indent:2em;}		
	h3{font-size:24px;font-weight:bolder;color:#000099;}
  </style>
 </head>

 <!-- 主体,内容显示在网页中 -->
 <body>
	<h3>Web前端开发技术</h3>
	<p>HTML</p>
	<p>CSS</p>
	<p>JavaScript</p>
	<h3>网络学习资源</h3>
	<a href="http://www.w3school.com.cn/html/">HTML教程</a>		<!-- 超链接 -->
	<!-- JS的窗口警告 -->
	<script type="text/javascript">
		alert("Web前端开发工程师就业前景好、待遇高!");
	</script>
 </body>
</html>
<!DOCTYPE html>		<!-- HTML5申明 -->
<html lang="zh">	<!-- 表明本网页为中文网页 -->

<!-- 头部,定义网页标题和字体样式等 -->
 <head>
  <meta charset="UTF-8">				<!-- 定义网页为UTF-8编码 -->
  <title>标记语法及属性语法应用</title>	<!-- 定义网页标题 -->
  <style type="text/css">
  	div{text-align:center;/*文本居中对齐*/}
  </style>
 </head>

 <!-- 主体,内容显示在网页中。这里同时定义了网页背景颜色 -->
 <body bgcolor='#CDEBE6'>
 	<h3 align="center">欢度新年元旦</h3>		<!-- 定义3号标题字 -->
	<hr size=“2” color="red" width="100%"/>		<!-- 定义水平分隔线 -->
	<!-- &nbsp;&nbsp;&nbsp;&nbsp;表示两个中文空格 -->
	<p align="left">&nbsp;&nbsp;&nbsp;&nbsp;元旦(New Year's Day, New Year), 
	指一年开始的第一天,也称为"新历年"、"阳历年",在古代指阳历的正月初一。
	1949年9月27日,中国人民政治协商会议第一届全体会议正式确立公历1月1日为元旦。
	元旦是世界上很多国家或地区的法定假日。</p>
	<div id="" class="">
		<img src="yundan1.jpg" width="300" height="165">	<!-- 插入图片 -->
		<img src="yundan2.jpg" width="300" height="165">
	</div>
	<hr size=“2” color="red" width="100%"/>		<!-- 定义水平分隔线 -->
	<p align="center">Web前端开发技术工作室 Copyright &copy;2017-2020</p>	<!-- &copy;表示版权符号 -->
 </body>
</html>
<!DOCTYPE html>		<!-- HTML5申明 -->
<html lang="zh">	<!-- 表示本网站为中文网站 -->

<!-- 头部,定义网页标题和字体样式等 -->
 <head>
  <meta charset="UTF-8">	<!-- 定义网页为UTF-8编码 -->
  <title>自荐信</title>		<!-- 定义网页标题 -->
 </head>

 <!-- 主体,内容显示在网页中 -->
 <body>
 	<h4 align="center">自荐信</h4>					<!-- 网页内容的标题 -->
	<hr size=“1” color="#000fff" width="100%"/>		<!-- 插入水平下划线 -->
	<!-- 插入一个段落,<br>表示换行符,&nbsp;&nbsp;表示一个中文空格 -->
	<p align="left">尊敬的领导:<br>&nbsp;&nbsp;&nbsp;&nbsp;您好!<br><br>&nbsp;&nbsp;&nbsp;&nbsp;感谢您在百忙之中启阅我的自荐材料!相信此刻的停留不会让您失望!<br><br>&nbsp;&nbsp;&nbsp;&nbsp;我是计算机专业的本科毕业生。经过近四年的大学学习和锻炼,与同龄人一样,我即将走上工作岗位,通过社会来证实自己的知识和能力,为了找到一份符合自己特长和兴趣的工作,更好地发挥自己的才能,实现自己的人生价值,我冒昧地写下这封信,希望能得到您地认可,能为贵公司服务。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;此致<br>敬礼!</p>
	<hr size=“1” color="#00ffff" width="100%"/>
	<p align="center">联系E-mail:zhang@16.com</p>
 </body>
</html>
<!DOCTYPE html>		<!-- HTML5申明 -->
<html lang="zh">	<!-- 表示本网站为中文网站 -->

<!-- 头部,定义网页标题和字体样式等 -->
 <head>
  <meta charset="UTF-8">				<!-- 定义网页为UTF-8编码 -->
  <title>标记语法及属性语法应用</title>	<!-- 定义网页标题 -->
  <!-- 定义字体样式 -->
  <style type="text/css">				
  	h3{font-size:24px;color:red;text-align:center;}
  </style>
 </head>

 <!-- 主体,内容显示在网页中 -->
 <body>
 	<h3>数学方程式</h3>						<!-- 定义3号标题字 -->
	<hr size=“2” color="blue" width="80%"/>	<!-- 定义水平下划线 -->
	<!-- 定义段落,其中<sup></sup>表示上标,<sub></sub>表示下标,<br>表示换行 -->
	<p align="center">2x<sup>2</sup>+3x=9<br>x<sub>1</sub>+x<sub>2</sub>=10</p>
 </body>
</html>
<!DOCTYPE html>
<html lang="zh">

 <head>
  <meta charset="UTF-8">
  <title>apple网站</title>
  <style type="text/css">
  div{text-align:center;}
  </style>
 </head>

 <body>
 	<h4 align="center">apple网站</h4>
	<hr size=“1” color="grey" width="100%"/>
	<!-- 定义图像超链接 -->
	<div>
	<a href="http://www.apple.com.cn/iphone/"><img border="1" src="ipadblank1.jpg" width="250" height="165"/></a>	
	<a href="http://www.apple.com.cn/iphone/"><img border="1" src="ipadblank2.jpg" width="250" height="165"/></a>
    <a href="http://www.apple.com.cn/macbook-pro/"><img border="1" src="ipadblank3.jpg" width="250" height="165"/></a>
	<a href="http://www.apple.com.cn/supplierresponsibility/"><img border="1" src="ipadblank4.jfif" width="250" height="165"/></a>
	</div>
	<hr size=“1” color="grey" width="100%"/>
 </body>
</html>
<!DOCTYPE html>
<html lang="en">

 <head>
  <meta charset="UTF-8">
  <title>桂林山水风景图片</title>
  <style type="text/css">
  h3{text-align:center;color:red;}
  ul{text-align:center;type=""}
  li{display:inline;width="120px";height="30px"}
  </style>
 </head>

 <body>
 	<h3>桂林山水风景图片</h3>
	<ul>
	 <li><img id="桂林山水1" border="0" src="image51.jfif" width="100px" height="100px"/><br>桂林山水1<br></li>
	 &nbsp;&nbsp;
	 <li><img border="0" src="image52.jpg" width="100px" height="100px"/><br>桂林山水2<br></li>
	 &nbsp;&nbsp;
	 <li><img border="0" src="image53.jpg" width="100px" height="100px"/><br>桂林山水3<br></li>
	 &nbsp;&nbsp;
	 <li><img border="0" src="image54.jfif" width="100px" height="100px"/><br>桂林山水4<br><li>
	 <br>
	</ul>	
 </body>
</html>
<!DOCTYPE html>
<html lang="zh">

 <head>
  <meta charset="UTF-8">
  <title>浮动框架应用</title>
  <!-- margin:0 5px;即设置上下相距为0,左右相距为5px -->
  <style type="text/css">
  a{width:300px;margin:0 5px;}		
  div{text-align:center;}
  </style>
 </head>

 <body>
  <div id="" class="">
 	<h3>浮动框架中打开新页面</h3>
	<!-- 定义左浮动框架 -->
	<iframe name="left" src="http://www.pku.edu.cn" width="300" height="300"></iframe>
	<!-- 定义右浮动框架 -->
    <iframe name="right" src="http://www.seu.edu.cn" width="300" height="300" marginwidth="10px"></iframe>
	<p>
	<!-- 定义超链接指向浮动窗口,即在窗口中打开新窗口 -->
	 <a href="https://www.baidu.com" target="left">在左边浮动框架中打开百度</a>
	 <a href="http://www.qq.com" target="right">在右边浮动框架中打开qq</a>
    </p>
  </div>
 </body>
</html>
<!DOCTYPE html>
<html lang="zh">

 <head>
  <meta charset="UTF-8">
  <title>图像对齐方式应用</title>
  <style type="text/css">
  	h3{font-size:24px;text-align:center;}
  </style>
 </head>

 <body>
 	<h3>图像对齐方式应用</h3>
	<hr size=“2” width="100%"/>
	<h4>未设置对齐方式的图像</h4>
	<p>	<img src="image51.jfif" width="40" height="40">PNG,图像文件存储格式,其目的是视图(原来此处使用了“企图”)替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性</p><br>
    <h4><b>已设置对齐方式的图像</b></h4><br>
	<p>	PNG,图像文件存储格式,其目的是视图(原来此处使用了“企图”)替代GIF和TIFF文件格式,<img src="image51.jfif" width="40" height="40" align="bottom">同时增加一些GIF文件格式所不具备的特性</p><br>
	<p>	PNG,图像文件存储格式,其目的是视图(原来此处使用了“企图”)替代GIF和TIFF文件格式,<img src="image51.jfif" width="40" height="40" align="middle">同时增加一些GIF文件格式所不具备的特性</p><br>
	<p>	<img src="image51.jfif" width="40" height="40" align="left">PNG,图像文件存储格式,其目的是视图(原来此处使用了“企图”)替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性</p>
 </body>
</html>
<!DOCTYPE html>
<html lang="zh">

 <head>
  <meta charset="UTF-8">
  <title>图像画廊</title>
  <style type="text/css">
    h3{font-size:24px;text-align:center;}
  	img{width:100px;height:100px;border:2px #cc0066 ridge;}
	ul{list-style-type:none;}
	li{float:left;}
  </style>
 </head>

 <body>
 	<h3>图像画廊</h3>
	<hr size=3px width="100%" color=#cc0066>
	<!-- 设置滚动,将图片放置在无序列表中 -->
	<marquee>
	  <ul>
		<li><img src="image51.jfif" width="250" height="250"></li>
		<li><img src="image52.jpg" width="250" height="250"></li>
		<li><img src="image53.jpg" width="250" height="250"></li>
		<li><img src="image54.jfif" width="250" height="250"></li>
		<li><img src="ipadblank1.jpg" width="250" height="250"></li>
      </ul>
	</marquee>
    <hr size=3px width="100%" color=#cc0066>
 </body>
</html>
<!DOCTYPE html>
<html lang="zh">

 <head>
	<meta charset="UTF-8">
	<title>古诗排版</title>
	<style type="text/css">
		h3{font-family:"隶书";align="center"}
		#p_1{font-family:"隶书";align="center"}
		#p_2{font-family:"隶书";align="center";font-size:150%}
		#p_3{font-family:"隶书";align="center";font-size:200%}
		#p_4{font-family:"隶书";align="center";font-size:250%}
		div{text-align:center}
	</style>
 </head>

 <body>
  <div>
 	<h3>早发白帝城</h3>
	<p id="p_1">李白</p>
	<p id="p_1">朝辞白帝彩云间,</p>
	<p id="p_2">千里江陵一日还。</p>
	<p id="p_3">两岸猿声啼不住,</p>
	<p id="p_4">轻舟已过万重山。</p>
   </div>
 </body>
</html>
<!DOCTYPE html>
<html lang="zh">

 <head>
  <meta charset="UTF-8">
  <title>Web前端开发工程师工作内容</title>
  <style type="text/css">
	#li1{font-family:"黑体";font-size:24px;font-style:italic;font-weight:bold}
	#li2{background:#9999cc;letter-spacing:1px}
	#li3{font-size:18px;color:red}
	div{font-family:"楷体";color:blue}
  </style>
 </head>

 <body>
   <div>
	<h1>Web前端开发工程师工作内容</h1>
	<h3>Web前端工程师在不同的公司,会有不同的职能,但称呼都是类似的</h3>
	<ul>
	 <li id="li1">做网站设计、网页界面开发</li>
	 <li id="li2">做网页界面开发</li>
	 <li id="li3">做网页界面开发、前台数据绑定和前台逻辑的处理</li>
	 <!-- 行内样式优先级最高 -->
	 <li style="font-family:黑体;color:#0000cc;background:#c0c0c0;">设计、开发、数据处理</li>
	</ul>
   </div>
 </body>
</html>
以上就是“web前端开发网页制作代码大全”的详细内容,想要了解更多web教程欢迎持续关注编程学习网


扫码二维码 获取免费视频学习资料

Python编程学习

查 看2022高级编程视频教程免费获取