Java WEB 三
HTML实例【续篇】
三、HTML实例
7、HTML 图像
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML图像title>
head>
<body>
<p>一个图像:<img src="图像路径格式" alt="重命名【别名】" width="32" height="32">p>
<p>一个动图:<img src="图像路径格式" alt="重命名【别名】" width="48" height="48">p>
<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">
<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">
<img src="图像路径格式" alt="重命名【别名】" style="float:left" width="32" height="32">
<img src="图像路径格式" alt="重命名【别名】" style="float:right" width="32" height="32">
<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>
<h4>一列:h4>
<table border="1">
<tr>
<td>100td>
tr>
table>
<h4>一行三列:h4>
<table border="1">
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
table>
<h4>两行三列:h4>
<table border="1">
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
<table>
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
<table border="0">
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
<h4>水平表头:h4>
<table border="1">
<tr>
<th>姓名：th>
<th>电话：th>
<th>地址：th>
tr>
<tr>
<td>九灵td>
<td>18822125521td>
<td>陕西西安td>
tr>
table>
<h4>垂直表头:h4>
<table border="1">
<tr>
<th>姓名：th>
<td>九灵td>
tr>
<tr>
<th>电话:th>
<td>18822125521td>
tr>
<tr>
<th>地址：th>
<td>陕西西安td>
tr>
table>
<table border="1">
<caption>表格标题caption>
<tr>
<th>月份th>
<th>工资th>
tr>
<tr>
<td>1月td>
<td>$100td>
tr>
<tr>
<td>2月td>
<td>$50td>
tr>
table>
<h4>单元格跨两列:h4>
<table border="1">
<tr>
<th>姓名：th>
<th colspan="2">电话：th>
tr>
<tr>
<td>九灵td>
<td>18822128898td>
<td>18722128898td>
tr>
table>
<h4>单元格跨两行:h4>
<table border="1">
<tr>
<th>姓名:th>
<td>九灵td>
tr>
<tr>
<th rowspan="2">电话:th>
<td>18822128898td>
tr>
<tr>
<td>18722128898td>
tr>
table>
<table border="1">
<table border="1" cellpadding="10">
<table border="1">
<table border="1" cellspacing="0">
<table border="1" cellspacing="10">
body>
html>
9、HTML 列表
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 列表title>
head>
<body>
<ul>
<li>列表1li>
<li>列表2li>
<li>列表3li>
ul>
<ol>
<li>列表1li>
<li>列表2li>
<li>列表3li>
ol>
<ol start="50">
<li>列表50li>
<li>列表51li>
<li>列表52li>
ol>
<ol>【按数字排序】ol>
<ol type="A">【按大写字母排序】ol>
<ol type="a">【按小写字母排序】ol>
<ol type="I">【按大写罗马数字排序】ol>
<ol type="i">【按小写罗马数字排序】ol>
<ul style="list-style-type:disc">【黑圆点列表】ul>
<ul style="list-style-type:circle">【圆圈列表】ul>
<ul style="list-style-type:square">【正方形列表】ul>
<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 和 Inputtitle>
head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
form>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
form>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">自行车<br>
<input type="checkbox" name="vehicle" value="Car">汽车
form>
<form action="">
<input type="radio" name="sex" value="male">男士<br>
<input type="radio" name="sex" value="female">女士
form>
<form action="">
<select name="cars">
<option value="benchi">奔驰option>
<option value="dazhong">大众option>
<option value="fute" selected>福特option>
<option value="baoma">宝马option>
select>
form>
<textarea rows="10" cols="30">textarea>
<form action="">
<input type="button" value="按钮!">
form>
<form action="">
<fieldset>
<legend>个人信息：legend>
姓名: <input type="text" size="30"><br>
邮箱: <input type="text" size="30"><br>
出生日期: <input type="text" size="10">
fieldset>
form>
<form action="需要提交信息的页面">
First name: <input type="text" name="首次修改" value="张三"><br>
Last name: <input type="text" name="最后修改" value="李四"><br>
<input type="submit" value="提交">
form>
<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>
<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>
<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>
<iframe src="//www.baidu.com">iframe>
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200">iframe>
<iframe src="demo_iframe.htm" frameborder="0">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>
<meta name="description" content="百度一下">
<meta name="keywords" content="文库,贴吧,网盘,知道">
<meta name="author" content="baidu">
head>
<body>
<p>文本的段落标签。p>
<img src="logo.png"><br><br>
<a href="//www.baidu.com">baidua>
body>
html>
13、HTML 脚本
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 脚本title>
head>
<body>
body>
html>
<script>
document.write("Hello World!")
script>
<noscript>抱歉，你的浏览器不支持 JavaScript!noscript>
总结：
今天终于将HTML常用的标签整理完了，这些标签都是比较常用的！没有别的办法，只能靠自己多练！大部分的页面基本上都是以这些标签为骨架，CSS样式只是用来修饰这些骨架的，而JavaScript是用来前后端交互传递数据的各司其职！ 先一步一步来学习，循序渐进才能有所收获！
从明天开始就进入CSS的学习了，CSS样式学习完以后就可以用CSS样式写一些花里胡哨的页面和一些效果了。比如：登陆页面和一些大部分的页面，甚至还可以用来模仿天猫商城和淘宝商城以及小米商城等等，在模仿的同时可以增加自己的熟练度！对这些标签也就更加的熟悉了！
我的博客都是一个字一个字精心的写出来的，目的是尽量最简洁、最通俗易懂！也都是会用到的，绝对没有多余的废话，满满干货！说实话，写博客的时候虽然苦，虽然累，但是特别的值得！一位高人曾指点我说过一句话：“在什么时间段就要做什么时间段该做的事”！ 现在年轻，正是拼搏上进的时候！苦点累点又能算什么呢？今天的博客就先分享到这里咯！明天我们不见不散！
如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
2021年6月15日夜