WEB前端开发练习代码
<pre><code class="language-html"><!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>
</code></pre>
<p></p>
<pre><code class="language-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>
</code></pre>
<p></p>
<pre><code class="language-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></code></pre>
<p></p>
<pre><code class="language-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>
</code></pre>
<p></p>
<pre><code class="language-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></code></pre>
<p></p>
<pre><code class="language-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></code></pre>
<p></p>
<pre><code class="language-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></code></pre>
<p></p>
<pre><code class="language-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>
</code></pre>
<p></p>
<pre><code class="language-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>
</code></pre>
<p></p>
<pre><code class="language-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>
</code></pre>
<p></p>
<pre><code class="language-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>
</code></pre>
<p></p>
<p>参考文献：《Web前端开发技术》 by 储久良</p><br><br>
来源：https://www.cnblogs.com/tiansz/p/16319583.html
頁:
[1]