web前端--Html4
2024-05-20 21:40:14
web前端–html4练习
标签总览：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>基础标签练习</title></head><body><!-- b标签加粗文字 br标签换行--><b>黄鹤楼送孟浩然之广陵</b><br />故人西辞黄鹤楼，烟花三月下扬州。<br />孤帆远影碧空尽，唯见长江天际流。<br /><!-- h1：一级标签 h2：二级标签 h3：三级标签h4：四级标签 h5：五级标签 h6：六级标签 p:段落标签--><h1>java开发的三个方向</h1><h2>Java SE</h2><p>主要运用于桌面程序的开发。它是学习Java EE和Java Me的基础，也是本书的重点内容。</p><h2>Java EE</h2><p>主要用于网页程序的开发。随着互联网的发展。越来越多的企业使用Java语言来开发自己官方网站。</p><h2>Java ME</h2><p>主要用于嵌入式系统程序的开发。</p><h1>好</h1><h2>想</h2><h3>爱</h3><h4>这</h4><h5>个</h5><h6>世</h6><!-- center:居中标签 --><center>界</center><br /><h3>编程字典有以下几个品种（默认属性为disc）</h3><!-- ul li 无序列表 type是设置列表的点样式如：正方形、原型。。。--><ul type="disc" ><li>Java编程字典</li><li>VB编程字典</li><li>VC编程字典</li><li>.net编程字典</li><li>C#编程字典</li></ul><ul type="circle"><li>Java编程字典</li><li>VB编程字典</li><li>VC编程字典</li><li>.net编程字典</li><li>C#编程字典</li></ul><ul type="square"><li>Java编程字典</li><li>VB编程字典</li><li>VC编程字典</li><li>.net编程字典</li><li>C#编程字典</li></ul><!--ol 有序列表--><h3>有序列表</h3><ol type="1"><li>Java编成宝典</li><li>VB编程字典</li><li>VC编程字典</li><li>.net编程字典</li><li>C#编程字典</li></ol><!-- 注释：CREL+shift+/ --><!--dl 自定义列表--><h3>自定义列表</h3><dl><dd>1、香蕉</dd><dd>a.苹果</dd><dd>b.葡萄</dd><dd>2.西瓜</dd><dd>c.草莓</dd></dl><!--marquee 跑马灯 --><marquee>我是跑跑跑的一段话</marquee><marquee direction="right">我是跑跑跑的第二段话</marquee><marquee direction="right" scrollamount="1">我是跑跑跑的第三段话</marquee><center><marquee direction="up" scrollamount="5" width="500" height="200" bgcolor="red">我是跑跑跑的第四段话<p>快跑快跑</p>我来了</marquee></center><!-- hr 默认的hr分割线--><h2>默认的hr分割线</h2><hr /><h2>自定义hr分割线</h2><hr align="center" width="500px" color="red" size="50" /><pre >这是一段话</pre><!-- font里的属性是设置文字样式的 --><font size="7" color="red">长沙</font><!-- table 表格tr 表格的行td 表格的列caption：表格标题--><table width="318" height="167" border="1" align="center"><caption>学生考试成绩单</caption><tr><td align="center" valign="middle">姓名</td><td align="center" valign="middle">语文</td><td align="center" valign="middle">数学</td><td align="center" valign="middle">英语</td></tr><tr><td align="center" valign="middle">张三</td><td align="center" valign="middle">89</td><td align="center" valign="middle">92</td><td align="center" valign="middle">87</td></tr><tr><td align="center" valign="middle">李四</td><td align="center" valign="middle">93</td><td align="center" valign="middle">86</td><td align="center" valign="middle">80</td></tr><tr><td align="center" valign="middle">王五</td><td align="center" valign="middle">85</td><td align="center" valign="middle">86</td><td align="center" valign="middle">90</td></tr></table><h2 align="center">表格背景颜色</h2><table border="1" align="center" bgcolor="#FF34B3"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td>100</td><td>200</td><td>300</td><td>400</td><td>500</td><td>600</td></tr></table><h2>横向表格头</h2><table><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>柯南</td><td>男</td><td>12</td></tr><tr><td>小兰</td><td>女</td><td>17</td></tr></table><h2>纵向表格头</h2><table border="1"></table><tr><th>姓名</th><td>柯南</td><td>小兰</td></tr><tr><th>性别</th><td>男</td><td>女</td></tr><tr><th>年龄</th><td>12</td><td>17</td></tr><table border="1" align="center" width="400"><caption>电话列表（合并列）</caption><tr><th>姓名</th><th colspan="2">电话</th></tr><tr><td>张三</td><td>01-666666</td><td>01-888888</td></tr><tr><td>李四</td><td>02-123456</td><td>02-000000</td></tr></table><table border="1" align="center" width="400"><caption>电话号码表（合并行）</caption><tr><th>姓名</th><td>张三</td><td>李四</td></tr><tr><th rowspan="2">电话</th><td>01-123456</td><td>02-666666</td></tr><tr><td>01-7654321</td><td>02-8888888</td></tr></table><table border="1" align="center" width="400"><tr><td><p>第一章:龙出世</p><p>第二章:龙夭折，小说完</p></td><td>第二个单元格中的一个表格:<table border="1" width="100"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table></td></tr><tr><td>这是一个无序的序列：<ul><li>香蕉</li><li>苹果</li><li>火龙果</li><li>榴莲</li></ul></td><td>这是一个有序到的序列：<ol><li>猴子</li><li>狒狒</li><li>蛇</li><li>蚂蚁</li></ol></td></tr></table><!--form：表单，通常包含input的标签 --><form id="form1" action="action.html" method="post" name="form" target="_blank"></form><table border="1" cellpadding="2" cellspacing="0" align="center" width="400"><caption>网上报名</caption><form action=""><tr><th>用户名：</th><td><input name="username" type="text" size="25" maxlength="15"/></td></tr><tr><th>密码：</th><td><input name="password" type="password" size="27" maxlength="15"/></td></tr><tr><th>性别：</th><td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td></tr><tr><th>出生年月：</th><td><select name=""><option value="1970">1970</option><option>1971</option><option>1972</option><option>1973</option><option>1974</option><option>1975</option><option>1976</option><option>1977</option><option>1978</option></select>年<select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select>月</td></tr><tr><th>兴趣爱好：</th><td><input type="" />足球<input type="checkbox" />乒乓球<input type="checkbox" />橄榄球<input type="checkbox" />蓝球</td></tr><tr><th>个人简介：</th><td><textarea rows="5" cols="30" maxlength="300"></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交"/> <input type="reset" value="重置"/></td></tr></form></table>下拉列表框：<select name="select"><option>数码相机区</option><option>摄影器材</option><option>MP3/MP4/MP5</option><option>U盘/移动硬盘</option></select> <br /><br /><br /><br />多行列表框（不可多选）：<select name="select2" size="2"><option>数码相机区</option><option>摄影器材</option><option>MP3/MP4/MP5</option><option>U盘/移动硬盘</option></select> <br /><br /><br /><br />多行列表框（可多选）：<select name="select3" size="3" multiple="multiple"><option>数码相机区</option><option>摄影器材</option><option>MP3/MP4/MP5</option><option>U盘/移动硬盘</option></select></body>
</html>
练习一：段落、列表、分隔线
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Homework1</title></head><body><center><h1 >乡恋情深</h1>时间:2017-03-30 来源: 作者:杨梅英 阅读:50047次<br /><b>你虽离开，却未曾走出我的记忆！——题记</b><br /><hr width="1000px" color="red" size="5"/></center><p> 又是清明到来时，年年清明怀故人</p><p> 每到清明时节总会有春雨相伴，仿佛上苍都通晓人意，春雨带着一方乡土的气息，悸动着我在内心对你深切的思念。<br>这份思念之情越来越浓郁，占据了心田。不是淡漠，而是升华，成为了人间与天堂的精神链接点。<br>寻寻觅觅，凄凄惨惨戚戚。</p><p> 转眼，你已经告别我，告别这凡尘世界两年有余了。此时，太多的话语都显得苍白无力，你那曾经熟悉的身影，你那<br>不曾被遗忘的音容笑貌，平实无华，历历在目，你的离去留给我太多的不舍，我们相处的每一个时光片段，留下的记忆又是太<br>多，太多......</p><hr align="center" width="2000px" size="6" color="blue"/><h1>提纲</h1><ol type="A"><li>创建第一个HTML文件</li><li>HTML文档结构</li><li>HTML常用标记</li><li>表格标记</li><li>HTML表单标记</li><li>超链接与图片标记</li></ol><hr align="center" width="2000px" size="7" color="green"/><h1>创建HTML文件步骤</h1><ul type="square"><li>任意空白处点击右键，依次选择“新建”/“文本文档”。</li><li>重命名文件：任意文件名.html。</li><li>安装EditPlus编辑器。俗称“小红本”。</li><li>点击文件右键，依次选择“打开方式”/“EditPlus”，或者直接右键菜单就能看到“EditPlus”。</li><li>进入编辑器之后，直接开始编写代码。</li></ul><hr align="center" width="2000px" size="7" color="violet"/>一、肉食动物<dl><dd>1)、老虎</dd><dd>2)、狮子</dd><dd>3)、猎豹</dd></dl>二、食草动物<dl><dd>1)、兔子</dd><dd>2)、绵羊</dd></dl></body>
</html>网页演示：
练习二：表格练习
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Index</title></head><body><table align="center" width="500" height="400" bgcolor="yellow"><tr><td align="center">中国菜</td></tr><tr><td align="left">目录</td></tr><tr><td align="left">1</td></tr><tr><td align="left">2</td></tr><tr><td align="left">3</td></tr><tr><td align="left">4</td></tr><tr><td align="left">5</td></tr><tr><td align="left">6</td></tr><tr><td align="left">菜名: **售价：**</td></tr><tr><td align="left"><table cellspacing="0" cellpadding="0" width="100" height="200"><tr><td><img src="img/homework2/中国菜/1.jpg"></td></tr></table></td><td>介绍：***</td></tr><tr><td align="left"><a href="homework2west.html">西餐</a></td></tr></table></body>
</html>
网页演示：
练习三：表单练习：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>homework</title></head><body><form><!-- input标签type分类：text：文本框password：密码框radio：单选框checkbox：多选框submit：提交按钮reset：重置按钮buttom：按钮date:时间选择框email：邮件框file:文件-->用户名：<input type="text" name="username"/><br/><br/> 密码：<input type="password" name="password"/><br/><br/>性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br /><br/>兴趣: <input type="checkbox" />打游戏 <input type="checkbox" />听音乐 <input type="checkbox" />跑步 <br /><br/><input type="submit" name="submit"/><input type="reset" name="reset"/></form></body>
</html>网页演示：
web前端--Html4相关推荐
- Web前端开发笔记——第一章 Web前端概论
目录 前言 一.Web系统 (一)Web系统的定义 (二)前端和后端 二.网站和网页 (一)网站的开发历程 (二)网页的组成元素 三.浏览器 四.前端技术 (一)超文本标记语言(HTML) (二)层叠 ...
- WEB前端底层知识--浏览器是如何工作的
随笔- 6 文章- 2 评论- 103 WEB前端底层知识--浏览器是如何工作的 概述 对于一直从事B/S架构(B/S也是一种C/S架构,只不过C/S自己写显示而B/S有相对统一的显示引擎实现而已 ...
- 学web前端一定要这样学，不然学完找不到工作哭都来不及！
因为工作原因,经常关注有关互联网行业的最新动态.这不,刚送走了高考,又迎来了每年的毕业季,看到好多人都说今年的前端工作不好找,很多童鞋简历投了一大堆,也没有回应,发现连实习的机会都没有,好不容易去面试 ...
- 移动平台WEB前端开发技巧汇总
原名<移动平台3G手机网站前端开发布局技巧汇总>,由武方博整理的,让我们了解下移动设备上的WEB站点开发的基础知识,多些时间和精力去优化其他细节,我这里对原文的标签格式做了细微的调整,阅读 ...
- Web前端——HTML
>Web前端概述 html:基本的标签,建筑队,毛坯房 css:装修队,装修 js:动态效果/实现功能 bootstrap:现成的前端框架,主要用于展示 >HTML概述 HTML:纯文本 ...
- 拿高薪的web前端都是怎么学的？
如果你是想要学习web前端的新人,那么恭喜你,看完这篇文章,尽早的选择好努力的方向和规划好自己的学习路线,比别人多一点付出并且持之以恒,你就已经赢在了起跑线上. 因为工作原因,经常关注有关互联网行业的 ...
- 0基础怎么学web前端？新手到大神的进阶路线在这！
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
- 从月薪3000到月薪30000，web前端应该怎么学？
Web前端学习新人应该如何学Web前端?如果你是想要学习Web前端的新人,那么恭喜你,看完这篇文章你将知道如何学好Web前端.下面我们就一起来看一看新手学习Web前端应该怎么学吧! 1.学习要有深度和 ...
- 学习web前端，合理的学习路线，如何成为一个合格的前端工程师
学习前端,首先应该列举出整个前端的知识图谱,然后制定一个合理的学习线路图,逐个击破,只要保持学习的热情和持之以恒,肯定能成为一位合格的前端工程师.前端算是目前互联网研发岗中门槛相对较低的,只要具备完整 ...
最新文章
- 使用进度条，让Python学习更加轻松快乐吧
- Ionic 存储目录 CORS
- Java 二叉树 前序_java实现二叉树前序中序后序层次遍历
- 机器学习之五：神经网络、反向传播算法推导
- CodeForces - 1267A Apprentice Learning Trajectory(贪心)
- Linux新加硬盘添加一个新的LVM磁盘组
- 浅析继承关系中的方法调用
- Spring mvc创建的web项目，如何获知和修改其web的项目访问链接名称？
- 计算直方图中面积最大的矩形
- 如何用T—SQL命令查询一个数据库中有哪些表？
- Linux防火墙iptables配置详解
- PaperMax，一个可智能改重的免费论文查重网站。
- FPGA之SDRAM控制器设计（二）
- quot 成为通用计算机器 quot,汉语拼音：从读写工具到文化津梁
- 后盾网ThinkPHP教程许愿墙源码及后台管理模版下载
- 【LeetCode】第934题——最短的桥（难度：中等）
- 红帽子linux转中文后乱码,安装redhat时中文显示乱码（小方框）解决方法
- android 火车购票功能,12306 火车票订票
- 【BZOJ-4316】小C的独立集 仙人掌DP + 最大独立集
- pytorch组队学习