<title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 -->
<meta charset="utf-8" /> <!-- H5网页解析编码标签 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"><!-- H4网页解析编码标签 -->
<title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 -->
<meta name="Description" content="本网页是关于HTML的head的学习,666,哈哈哈"/> <!-- 网页描述 -->
<meta name="Keywords" content="azb,lll,xxx"/> <!-- 网页关键字 -->
<meta name="author" content="安老师"/> <!-- 网页作者 -->
<meta http-equiv="refresh" content="5;url = https://www.baidu.com"/><!-- 表示五秒后跳转指定URL -->
CSS或js引入的标签
h1到h6:会将其中的数据加粗显示,并且显示依次减弱,标题标签自带换行功能(块级标签)
属性:align : center right left
<h1 align="center">我是标题</h1>
<h2 align="center">我是标题</h2>
<h3 align="middle">我是标题</h3>
<h4 align="right">我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
hr:会在页面中显示一条水平线,默认居中显示
属性:
<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">
p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)
特点:段间距比较大
br:告诉浏览器需要在此位置换行
5.空格符标签
 :告诉浏览器在此位置增加空格
6.权重标签
权重标签可以随意叠加
注:
1标签的属性是对标签的功能进一步的补充 ,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
2像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小。
<p>
<u>东方网·演兵场4月6日报道</u>:<br>多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到
</p>
<p>
<b>东方网</b>·演兵场<i>4月6日</i>报道:多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,<del>披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到</del>
</p>
<b><i><u><del>今天适合学习d</del></u></i></b>
<html>
<head>
<meta charset="utf-8"/>
<title>body标签学习</title>
</head>
<body>
<h1 align="center">我是标题</h1>
<h2 align="center">我是标题</h2>
<h3 align="middle">我是标题</h3>
<h4 align="right">我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
<hr width="200px" size="20px" color="red" align="left">
<hr width="40%">
<p>
<u>东方网·演兵场4月6日报道</u>:<br>多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到
</p>
<p>
<b>东方网</b>·演兵场<i>4月6日</i>报道:多家央媒近日集中报道了入列一年多的首艘国产航
母山东舰,<del>披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注
意到</del>
</p>
<b><i><u><del>今天适合学习d</del></u></i></b>
</body>
</html>
ul
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据特点:默认数据前有一个黑圆圈符号.
ol
li :该标签中书写列表内容,一个1i标签代表列表中的一行数据特点:
会自动的给列表进行顺序编码,格式从小到大并且是连续的。
属性:type:可以改变顺序编码的值,可以是1 a A I, ,默认使用阿拉伯数字进行顺序编码
dl
dt :数据的标题
dd:数据的具体内容,一个dd表示一 条数据、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>body标签(列表标签)</title>
</head>
<body>
<h3>列表的学习</h3>
<hr >
<h3>无序列表</h3>
<ul>
<li>北京</li>
<li>广州</li>
<li>上海</li>
<li>西安</li>
</ul>
<h3>有序列表</h3>
<ol type="A">
<li>xx</li>
<li>hh</li>
<li>ll</li>
<li>qq</li>
</ol>
<dl>
<dt>java</dt>
<dd>python</dd>
<dd>go</dd>
<dd>shell</dd>
<dt>hh</dt>
<dd>aa</dd>
<dd>xx</dd>
<dd>ll</dd>
</dl>
</body>
</html>
img src :
图片路径
属性
注意:图片是不会自动换行的(行内元素)
<html>
<head>
<meta charset="utf-8"/>
<title>图片标签学习</title>
</head>
<body>
<h3>图片标签学习</h3>
<hr >
<img src="D:/" title="hanpi" alt="shabi">
<img src="./img/1.jpg" height="200px" title="shabi" alt="hanpi">
<img src="img/2.jpg" width="200px" >
<hr >
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3767793794,672931879&fm=26&gp=0.jpg" >
</body>
</html>
href :要跳转的网页资源路径
本地资源:相对路径
网络资源:网络资源(网页)的URL
target :指明要跳转的网页资源的显示位置
作用:在一张网页中进行资源跳转
使用:
<a name="锚点名”></a>
<a href="#锚点名">访问方式/a>
#超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<h3>超链接标签</h3>
<hr >
<a href="图片标签 .html" target="_blank">图片标签</a>
<hr >
<a href="body标签(列表标签).html" target="_parent"><img src="img/1.jpg" height="200px" ></a>
<hr >
<a href="http://www.baidu.com">baidu</a>
<h3>锚点学习</h3>
<a href="锚点学习.html">锚点学习</a>
</body>
</html>
#锚点学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点学习</title>
</head>
<body>
<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<h5>第一章</h5>
<a name="first"></a>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<p>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</p>
<h5>第二章</h5>
<a name="second"></a>
<p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
</p>
<p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
</p>
<p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
</p>
<a href="#">回到顶部</a>
</body>
</html>
table :声明一个表格
注:行高即改行所有单元格的宽度;单元格的宽度即列宽
属性:
特点:默认根据数据的多少进行表格的大小显示
<table border="1px" bordercolor="red" cellpadding="10" cellspacing="0">
<tr height="50px">
<th width="100px">科目</th>
<th>分数</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>英语</td>
<td>100</td>
<td>张三水电费水电费</td>
<td>男</td>
</tr>
<tr>
<td>汉语</td>
<td>10</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
步骤:
1.首先确保表格是一个规整的表格
2.根据要合并的单元格,找到其所在的源码位置
3.合并
<h4>表格合并的学习</h4>
<hr >
<table border="2" cellpadding="10" cellspacing="0" bordercolor="red">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px"colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2" ></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格标签</title>
</head>
<body>
<h3>表格标签的学习</h3>
<hr >
<table border="1px" bordercolor="red" cellpadding="10" cellspacing="0">
<tr height="50px">
<th width="100px">科目</th>
<th>分数</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>英语</td>
<td>100</td>
<td>张三水电费水电费</td>
<td>男</td>
</tr>
<tr>
<td>汉语</td>
<td>10</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<h4>表格合并的学习</h4>
<hr >
<table border="2" cellpadding="10" cellspacing="0" bordercolor="red">
<tr height="35px">
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="200px"colspan="2" rowspan="2"></td>
</tr>
<tr height="35px">
<td colspan="2"></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td rowspan="2" ></td>
<td></td>
</tr>
<tr height="35px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格文件作业</title>
</head>
<body>
<table border="green" cellpadding="10" cellspacing="">
<tr>
<th colspan="2" width="100px">基本信息</th>
<td colspan="8" width="400px"></td>
</tr>
<tr>
<th colspan="2">姓名</th>
<td colspan="2" width="100px"></td>
<th colspan="2" width="100px">性别</th>
<td colspan="2" width="100px"></td>
<td rowspan="7" colspan="2" width="200px"></td>
</tr>
<tr>
<th colspan="2">民族</th>
<td colspan="2"></td>
<th colspan="2">出生年月</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">政治面貌</th>
<td colspan="2"></td>
<th colspan="2">健康状况</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">籍贯</th>
<td colspan="2"></td>
<th colspan="2">学历</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">电子信箱</th>
<td colspan="2"></td>
<th colspan="2">联系电话</th>
<td colspan="2"></td>
</tr>
<tr>
<th colspan="2">专业</th>
<td colspan="6"></td>
</tr>
<tr>
<th colspan="2" >毕业院校</th>
<td colspan="6"></td>
</tr>
<tr>
<th colspan="2">求职意向</th>
<td colspan="8"></td>
</tr>
</table>
</body>
</html>
iframe
参数:
注:默认当前页面打开及加载src指向的资源
作用:在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.csdn.net/" target="ifcsdn">csdn</a>
<a href="http://www.baidu.com" target="_ifbaidu">baidu</a>
<br>
<iframe src="" width="48%" height="500px" name="ifcsdn"></iframe>
<iframe src="" width="48%" height="500px" name="_ifbaidu"></iframe>
</body>
</html>
1.删除body标签
frameset
参数
rows :按照行进行切分页面
cols :按照列进行切分页面
子标签:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架标签学习</title>
</head>
<frameset cols=" 20% ,*,50%">
<frame src="frame/left.html" >
<frameset rows="70% ,*">
<frame src="frame/top.html" >
<frame src="frame/bottom.html" >
</frameset>
<frame src="frame/right.html" name="_right" >
</frameset>
</html>
作用:收集并提交用户数据给指定服务器
属性:
注:
作用:给用户提供可以进行数据书写或者选择的标签。
使用:
(1)文本框:
(2)单选框:
(3)多选框
(4)单选下拉框
(5)文本域
(6)普通按钮
<input type="button" name="" id="" value="普通按钮" />
(7)隐藏标签
隐藏标签<input type="hidden" name="hidden" id="" value="啦啦" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>form表单标签的学习</title>
</head>
<body>
<h3>form表单标签的学习</h3>
<hr >
<form action="#" method="get">
Login:<input type="text" id="" name="user" value="" /><br>
Password:<input type="password" name="password" value="" /><br>
sex:男<input type="radio" name="sex" value="n" checked="checked" />女<input type="radio" name="sex" value="w"/><br>
爱好:吃饭<input type="checkbox" name="fav" value="1"/>
睡觉<input type="checkbox" name="fav" value="2"/>
打豆豆<input type="checkbox" name="fav" value="3"/> <br>
籍贯:<select name="address">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected="selected">广州</option>
</select><br>
文本域:<br>
<textarea rows="10" cols="30" name="intro">
</textarea>
<br>
<input type="button" name="" id="" value="普通按钮" />
<br>
<hr >
隐藏标签<input type="hidden" name="hidden" id="" value="啦啦" />
<hr >
<input type="submit" id="" name="" value="登录"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<hr >
<form action="" method="get">
<table border="" cellpadding="10px" cellspacing="">
<tr>
<td width="100px">用户名</td>
<td><input type="text" name="user" id="" value="" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="paw" /></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="email" id="" value="" name="email" /></td>
</tr>
<tr>
<td>手机号码</td>
<td><input type="tel" name="tel" id="" value="" /></td>
</tr>
<tr>
<td>性别</td>
<td>
man<input type="radio" name="sex" id="" value="1" />
woman<input type="radio" name="sex" id="" value="1" />
</td>
</tr>
<tr>
<td>爱好</td>
<td>
吃饭<input type="checkbox" name="fav" id="" value="1" />
睡觉<input type="checkbox" name="fav" id="" value="2" />
打豆豆<input type="checkbox" name="fav" id="" value="3" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="adress">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州" selected="selected">广州</option>
</select>
</td>
</tr>
<tr>
<td>个人介绍</td>
<td>
<textarea rows="10px" cols="30px" name="intro">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="checkbox" name="agree" id="agree" value="1" />是否同意本公司协议
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</body>
</html>
本文实例讲述了jsp实现Servlet文件下载的方法。分享给大家供大家参考。具体如下...
./当前目录 /网站主目录 ../上层目录 ~/网站虚拟目录 如果当前的网站目录为E:\ww...
1.git 简介 1.1 产生历史 git是目前世界上最先进的分布式版本控制系统。 Linus在...
WEBSHELL权限提升技巧 c:d:e:..... C:\DocumentsandSettings\AllUsers\「开始」...
根据项目需要,研究了一下如何在ASP.NETMVC下实现批量文件上传。首先,介绍单文...
准备工作 一般分页查询 使用子查询优化 使用 id 限定优化 使用临时表优化 关于数...
案例引入 现在有这样一个问题,就是在提交大片文字评论的时候,前台拿到数据之后...
Spring在web.xml中的配置详细介绍 前言 在实际项目中spring的配置文件applicatio...
MySQL 50题 表的介绍 本文中共用到了四张表学生表、课程表、教师表、成绩表 1.学...
XML/HTML Code 复制内容到剪贴板 div style = width:100%;height:100px; input t...