HTML实例【续篇】

三、HTML实例

7、HTML 图像

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>HTML图像</title> </head><body><!--1、插入动态图和静态图【插入动图的语法和静态图的语法是一样的】--><p>一个图像:<img src="图像路径格式" alt="重命名【别名】" width="32" height="32"></p><p>一个动图:<img src="图像路径格式" alt="重命名【别名】" width="48" height="48"></p><!--2、从不同的位置插入图片【一个来自文件夹中的图像】--><p>一个来自文件夹中的图像:</p><img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p><img src="//www.baidu.com/images/logo.png" alt="baidu.com" width="336" height="69"><!--3、排列图片--><!--注意:在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。--><img src="图像路径格式" alt="重命名【别名】" width="32" height="32"> <img src="图像路径格式" alt="重命名【别名】" align="middle" width="32" height="32"><img src="图像路径格式" alt="重命名【别名】" align="top" width="32" height="32"><!--4、图片在段落中的左浮动和右浮动--><!--注意: 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。--><img src="图像路径格式" alt="重命名【别名】" style="float:left" width="32" height="32"><img src="图像路径格式" alt="重命名【别名】" style="float:right" width="32" height="32"><!--5、创建图像链接--><p>创建图片链接:<a href="超链接地址"><img  border="10" src="图像路径格式" alt="重命名【别名】" width="32" height="32"></a></p><p>无边框的图片链接:<a href="超链接地址"><img border="0" src="图像路径格式" alt="重命名【别名】" width="32" height="32"></a></p></body>
</html>

8、HTML 表格

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>HTML 表格</title> </head><body>
<!--1、简单表格每个表格从一个 table 标签开始。 每个表格行从 tr 标签开始。每个表格的数据从 td 标签开始。--><h4>一列:</h4><table border="1"><tr><td>100</td></tr></table><h4>一行三列:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr></table><h4>两行三列:</h4><table border="1"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><!--2、无边框表格--><table><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><table border="0"><tr><td>100</td><td>200</td><td>300</td></tr><tr><td>400</td><td>500</td><td>600</td></tr></table><!--3、水平表头和垂直表头--><h4>水平表头:</h4><table border="1"><tr><th>姓名：</th><th>电话：</th><th>地址：</th></tr><tr><td>九灵</td><td>18822125521</td><td>陕西西安</td></tr></table><h4>垂直表头:</h4><table border="1"><tr><th>姓名：</th><td>九灵</td></tr><tr><th>电话:</th><td>18822125521</td></tr><tr><th>地址：</th><td>陕西西安</td></tr></table><!--3、表格标题--><table border="1"><caption>表格标题</caption><tr><th>月份</th><th>工资</th></tr><tr><td>1月</td><td>$100</td></tr><tr><td>2月</td><td>$50</td></tr></table><!--4、跨行跨列colspan：跨列rowspan：跨行--><h4>单元格跨两列:</h4><table border="1"><tr><th>姓名：</th><th colspan="2">电话：</th></tr><tr><td>九灵</td><td>18822128898</td><td>18722128898</td></tr></table><h4>单元格跨两行:</h4><table border="1"><tr><th>姓名:</th><td>九灵</td></tr><tr><th rowspan="2">电话:</th><td>18822128898</td></tr><tr><td>18722128898</td></tr></table><!--5、单元格边距--><!--无单元格边距--><table border="1"><!--有单元格边距--><table border="1" cellpadding="10"><!--6、单元格间距--><!--无单元格间距--><table border="1"><!--有单元格间距--><!--单元格间距="0"--><table border="1" cellspacing="0"><!--单元格间距="10"--><table border="1" cellspacing="10">
</body>
</html>

9、HTML 列表

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>HTML 列表</title> </head> <body><!--1、无序列表--><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul><!--2、有序列表--><ol><li>列表1</li><li>列表2</li><li>列表3</li></ol><ol start="50"><li>列表50</li><li>列表51</li><li>列表52</li></ol><!--3、不同类型的有序列表--><ol>【按数字排序】</ol>  <ol type="A">【按大写字母排序】</ol>  <ol type="a">【按小写字母排序】</ol>  <ol type="I">【按大写罗马数字排序】</ol>  <ol type="i">【按小写罗马数字排序】</ol>  <!--4、不同类型的无序列表--><ul style="list-style-type:disc">【黑圆点列表】</ul>  <ul style="list-style-type:circle">【圆圈列表】</ul><ul style="list-style-type:square">【正方形列表】</ul><!--5、嵌套列表--><ul><li>五谷杂粮</li><li>肉类<ul><li>牛肉</li><ul>嫩牛肉</ul><ul>雪花牛肉</ul><li>猪肉</li></ul></li><li>蛋类</li></ul></body>
</html>

10、HTML Forms 和 Input

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>HTML Forms 和 Input</title> </head><body><!--1、文本域(Text fields)--><!--注意：表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。--><form action="">First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form><!--2、密码文本--><!--注意：密码字段中的字符是隐藏的(显示为星号或圆圈)。--><form action="">Username: <input type="text" name="user"><br>Password: <input type="password" name="password"></form><!--3、复选框--><form action=""><input type="checkbox" name="vehicle" value="Bike">自行车<br><input type="checkbox" name="vehicle" value="Car">汽车</form><!--4、单选框--><form action=""><input type="radio" name="sex" value="male">男士<br><input type="radio" name="sex" value="female">女士</form><!--5、下拉列表 selected标签为默认预选--><form action=""><select name="cars"><option value="benchi">奔驰</option><option value="dazhong">大众</option><option value="fute" selected>福特</option><option value="baoma">宝马</option></select></form><!--6、文本框--><textarea rows="10" cols="30"></textarea><!--7、按钮--><form action=""><input type="button" value="按钮!"></form><!--8、带标题的框--><form action=""><fieldset><legend>个人信息：</legend>姓名: <input type="text" size="30"><br>邮箱: <input type="text" size="30"><br>出生日期: <input type="text" size="10"></fieldset></form><!--9、上传输入框信息--><form action="需要提交信息的页面">First name: <input type="text" name="首次修改" value="张三"><br>Last name: <input type="text" name="最后修改" value="李四"><br><input type="submit" value="提交"></form><!--10、上传复选框信息--><form action="需要提交信息的页面" method="get"><input type="checkbox" name="vehicle[]" value="Bike">自行车<br><input type="checkbox" name="vehicle[]" value="Car" checked="checked">汽车<br><input type="submit" value="提交"></form><!--11、上传单选框信息--><form action="需要提交信息的页面" method="get"><input type="radio" name="sex" value="Male"> 男士<br><input type="radio" name="sex" value="Female" checked="checked">女士<br><input type="submit" value="提交"></form><!--12、发送邮件表单--><form action="邮件上传地址" method="post" enctype="text/plain">昵称:<br><input type="text" name="name" value="your name"><br>E-mail邮箱:<br><input type="text" name="mail" value="your email"><br>评论:<br><input type="text" name="comment" value="your comment" size="50"><br><br><input type="submit" value="发送"><input type="reset" value="重置"></form></body>
</html>

11、HTML iframe框架

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>HTML iframe框架</title> </head> <body><!--1、内联框架--><iframe src="//www.baidu.com"></iframe><!--属性：--><!--2、Iframe - 设置高度与宽度--><iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe><!--3、Iframe - 移除边框--><iframe src="demo_iframe.htm" frameborder="0"></iframe><!--4、使用iframe来显示目标链接页面--><iframe src="空白的框架页面" name="iframe_a"></iframe><p><a href="http://www.baidu.com" target="iframe_a" rel="noopener">百度</a></p></body>
</html>

12、HTML 头部元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"> <title>HTML 头部元素</title><!--3、提供文档元数据--><meta name="description" content="百度一下"><meta name="keywords" content="文库,贴吧,网盘,知道"><meta name="author" content="baidu"></head><body><!--1、段落标签--><p>文本的段落标签。</p><!--2、链接标签和图片引入--><img src="logo.png"><br><br><a href="//www.baidu.com">baidu</a></body>
</html>

13、HTML 脚本

<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title>HTML 脚本</title> </head><body></body>
</html>
<!--1、插入一个JavaScript脚本-->
<script>document.write("Hello World!")</script>
<!--2、插入一个脚本-->
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

总结：

今天终于将HTML常用的标签整理完了，这些标签都是比较常用的！没有别的办法，只能靠自己多练！大部分的页面基本上都是以这些标签为骨架，CSS样式只是用来修饰这些骨架的，而JavaScript是用来前后端交互传递数据的各司其职！ 先一步一步来学习，循序渐进才能有所收获！
      从明天开始就进入CSS的学习了，CSS样式学习完以后就可以用CSS样式写一些花里胡哨的页面和一些效果了。比如：登陆页面和一些大部分的页面，甚至还可以用来模仿天猫商城和淘宝商城以及小米商城等等，在模仿的同时可以增加自己的熟练度！对这些标签也就更加的熟悉了！
      我的博客都是一个字一个字精心的写出来的，目的是尽量最简洁、最通俗易懂！也都是会用到的，绝对没有多余的废话，满满干货！说实话，写博客的时候虽然苦，虽然累，但是特别的值得！一位高人曾指点我说过一句话：“在什么时间段就要做什么时间段该做的事”！ 现在年轻，正是拼搏上进的时候！苦点累点又能算什么呢？今天的博客就先分享到这里咯！明天我们不见不散！
      如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
      最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
                                                                                                                       2021年6月15日夜

Java WEB 三相关推荐

Java Web(三) 会话机制，Cookie和Session详解
很大一部分应该知道什么是会话机制,也能说的出几句,我也大概了解一点,但是学了之后几天不用,立马忘的一干二净,原因可能是没能好好理解这两种会话机制,所以会一直遗忘,一直重新回过头来学习它,今天好好把他总 ...
java web三:反射
反射在java框架中,比如 spring,structs中用的很多. 一个类有很多组成部分,比如成员变量,方法,构造方法等.反射就是加载类,并且解剖成类的各个组成部分. java中有一个Class类, ...
java web前端模版,以Eclipse替核心搭建JAVA WEB开发环境（三）-模板项目Archetype
以Eclipse为核心搭建JAVA WEB开发环境(三)-模板项目Archetype 本篇介绍创建archetype,用于创建WEB项目的模板. 1.创建一个Dynamic Web Project. ...
自我总结 (三) --(Java Web学习)
自我完善的过程就是在不断的自我总结不断的改进. 在前的近半个月里,我们经过了考试,也开始了java web的项目. 先看看这次的考试.考完之后我就觉得有点不对劲的,结果结果真的是一塌糊涂.上周五的时 ...
java web mvc_构建Java Web应用程序时遵循MVC的三个步骤
java web mvc 第1步做始终通过servlet / action bean处理URL(POST表单,单击链接等),而不是通过JSP处理为什么 ActionBeans(无论某些框架调用那 ...
构建Java Web应用程序时遵循MVC的三个步骤
步骤1 做始终通过servlet / action bean处理URL(POST表单,单击链接等),而不是通过JSP处理为什么 ActionBeans(无论某些框架调用那些类),而servlet很 ...
第三章深入分析Java Web中的中文编码问题
3.1 几种常见的编码格式 3.1.1 为什么要编码一个字节 byte只能表示0~255个符号,要表示更多的字符,需要编码. 3.1.2 如何翻译 ASCII码:有128个,用一个字节的低7位表示. ...
用java web start来发布jbpm(三)
三. 将项目打包成Deployable features 1. 找到一个 startup.jar 文件( startup.jar 是rcp的入口,里面有main函数.你把第一步可运行的rcp应用中的 ...
Java Web应用开发——作业三
一.单项选择题(共2题) 1.向浏览器打印输出数据的方式中( )输出各种类型数据并换行. A print( ) B newLine( ) C println( ) D printf( ) 我的答案:C ...

Java WEB 三