首页 / HTML / JavaWeb之HTML基础
JavaWeb之HTML基础
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaWeb之HTML基础，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16782字，纯文字阅读大概需要24分钟。
内容图文
HTML是英文 HyperText Markup Language 的缩写，它的意思是"超文本标记语言"，用它编写出文档的文件的扩展名是“.html”或“.htm”（微软的操作系统），他是可供浏览器解释浏览的文件格式。可以使用记事本，写字板或者是专业的IDE如：Dreamweaver等等编辑工具来编写HTML文件。
HTML标记两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的，比如“< html >”和“< /html >”，前一个是开始标记，后面的是结束标记，在开始和结束标记之间的的文本是元素内容。html标记是与大小写无关的，“< html >”和“< HTML >”所表示的意思的一样的。标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。
1.HTML的文档结构
HTML的文档结构主要是有3部分组成的：
1.< html >< /html >
< html >标记用于html文件的最前面，用来表示html文件的开始。而的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。
2.< head >和< /head >
< head >和< /head >构成html文件的头部部分，
在此标记对之间可以使用< title > < /title >和< script > < /script >等等标记对，这些标记都是描述html文档相关信息的标记对，< head > < /head >标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。
3.< body >和< /body >
< body >和< /body >是html文档的主体部分，在此标记可以包括“< p >”,“< /p >”,“< h1 >”,“< br >”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
2.HTML的基本标记
1.META标记：META标记是html语言的head部分的一个辅助性的标记，他位于head和title标记之间，他提供给用户不可见的信息。meta标记可以用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie;可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等等。
2.TITLE标记：在头部的中，有另一组标签
3.文字上的分隔标记：或许你会发现这样一个问题：我们已经在记事本里排版排的很漂亮，为何通过浏览器查看是就变了样子，那是因为浏览器不像word,他不认识Enter键或者空格键，所以当你按多少次空格，浏览器都会当作没看见一样。
常用的分隔标记：
强制断行标记“< br >”
强制分段标记“< p >”
空格“ ；”
<html>
<head>
<meta charset="utf-8"><!-- META标记 位于head和title标记之间，他提供给用户不可见的信息 -->
<title>这是我的html页面</title><!-- 这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题 -->
</head>
<body>
<center>
<font size="5" color="forestgreen">
长恨歌<br />
作者：白居易<br> <!-- <br>换行 -->
汉皇重色思倾国，御宇多年求不得。<br>
杨家有女初长成，养在深闺人未识。<br>
天生丽质难自弃，一朝选在君王侧。<br>
回眸一笑百媚生，六宫粉黛无颜色。<br>
春寒赐浴华清池，温泉水滑洗凝脂。<br>
侍儿扶起娇无力，始是新承恩泽时。<br>
云鬓花颜金步摇，芙蓉帐暖度春宵。<br>
春宵苦短日高起，从此君王不早朝。<br>
承欢侍宴无闲暇，春从春游夜专夜。<br>
</font>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="left"> 习近平在湖南调研期间专门召开这次座谈会。座谈会上，衡阳市常宁市塔山瑶族乡中心小学副校长盘玖仁，邵阳市隆回县委书记王永红，长沙市望城区广源种植专业合作社董事长肖定，中国建筑五局总承包公司质量管理员邹彬，常德市桃源县个体货运司机龙兵，湖南睿图智能科技有限公司总经理周博文，湘西州凤凰县廖家桥镇菖蒲塘村党委书记、村委会主任周祖辉，湖南七七科技股份有限公司董事长杨淑亭，长沙市岳麓区咸嘉湖润泽园江汉云云餐馆店主刘权，湖南中楚律师事务所执业律师尹浩铭等10位基层代表先后发言，就办好乡村教育事业、加大产业扶贫力度、支持小微企业发展、实施乡村振兴战略等提出意见和建议。习近平逐一予以点评和回应，同大家深入交流，现场气氛热烈活跃。</p>
<!-- 强制分段标记“<p>” -->
<p align="left">在认真听取大家发言后，习近平发表了重要讲话。他表示，今天参会的基层干部群众代表既有来自农村、社区、企业等方面的，也有来自教育、科技、卫生、政法等战线的；既有各级党代会代表、人大代表、政协委员、劳动模范、扶贫干部，也有新的社会阶层人士、农民工、快递小哥、网店店主等。大家都处在改革发展和生产一线，参与经济社会生活最直接，同群众联系最经常，对党的路线方针政策落地见效感知最真切，提出的意见和建议能够更加贴近基层实际、反映群众心声。对大家提出的意见和建议，有关方面要认真研究、充分吸收。</p>
</body>
</html>
4.排版的标记：
1.文字的置左，置右，置中
刚刚学过的分段标记“< p >”在加上一些简单的属性设定，就可以让其的文字置左，置右，置中。
2.置中标记
使用方法：< center >内容< /center >
3.保持原始数
使用方法：< pre >内容< pre >据格式标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<font color="gray" size="4" face="楷体">
<pre>
长恨歌
<small>作者：白居易</small>
汉皇重色思倾国，御宇多年求不得。
杨家有女初长成，养在深闺人未识。
天生丽质难自弃，一朝选在君王侧。
回眸一笑百媚生，六宫粉黛无颜色。
春寒赐浴华清池，温泉水滑洗凝脂。
侍儿扶起娇无力，始是新承恩泽时。
云鬓花颜金步摇，芙蓉帐暖度春宵。
春宵苦短日高起，从此君王不早朝。
承欢侍宴无闲暇，春从春游夜专夜。
</pre>
</font>
</body>
</html>
5.字体标记：
1.标题标记
使用方法：< h1 >内容< /h1 >
2.设置字体标记
使用方法：< font size=“2” color=“red” face=“黑体” >内容< /font >
3.字体变化标记
使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
< b >< /b > 加粗 < i >< /i > 斜体 < u >< /u > 底线
< kbd >用粗体等宽字体显示文字< /kbd >
< var >用较小的固定宽度显示字体< /var >
6.字体变化标记：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。
<dfn>用于名词解释，斜体显示</dfn>
<sup></sup> 上标
<smap>用于字母序列等宽</smap>
<sub></sub> 下标
<em></em> 强调
<address>模拟信封上的字体</address>
<strong></strong> 加强
<s></s> 删除线
<strike>删除线</strike>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<code>以等宽字体显示计算机程序代码</code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ctlr+/ 注释的快捷键 align 对齐方式
ctrl+k 排版代码
-->
<h1 align="left">最大标题</h1>
<h2 align="right">二级标题</h2>
<h3 align="center">三级标题</h3>
<h6>最小标题</h6>
<b>加粗文字</b>
<i>斜体文字</i>
<u>下划线</u>
<s>删除线</s>
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
<code>
<pre>
class Student{
int age=100;
String name="abc"
}
</pre>
</code>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
<!-- 上标 -->
2<sup>3</sup>
<!-- 下标 -->
CO<sub>2</sub>
</body>
</html>
7.背景标记
使用：<body bgcolor="red" backgroud="bg.jpg">
例子1：
<html>
<head><title>背景颜色</title> </head>
<body bgcolor="red">
<font size="4" face="黑体" color="red">背景颜色</font>
</body> </html>
例子2：
<html>
<head><title>背景颜色</title> </head>
<body background="bg.jpg">
<font size="4" face="黑体" color="red">背景图片</font>
</body> </html>
8.分隔线标记
使用:上一部分<hr>下一部分
例子：
<html>
<head>
<title>背景颜色</title>
</head>
<body>
abcdefg。<br>
<hr color="red" width="240" size="2" noshade>
higklmn。
</body>
</html>
9.< IMG >标记
使用：<img src="boy.jpg" alt="haha" align="left" border="0" height="56px" width="32px">
例子：
<html>
<head>
<title>图片</title>
</head>
<body>
<img src="boy.jpg" alt="haha" align="left" border="0“ height="56px" width="32px">
</body>
</html>
说明：向网页中插入图片
10.序列标记
1.无序列表 <ul>
2.有序列表 <ol>
3.自定义列表 <dl>
例子在下面注释栏中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>无序列表</h1> <!-- <ul>XXXXXX</ul> -->
<!-- type="circle"
添加属性type="disk"(实心点)，type="square"(小正方形)type="circle"(空心点)
-->
<ul type="circle">
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
</ul>
<h1>有序列表</h1> <!-- <ol>XXXXXX</ol> -->
<!-- 可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马)； -->
<ol type="1" start="1">
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
<li>一个个列表项</li>
</ol>
<h1>自定义列表</h1> <!-- <dl>XXXXXX</dl> -->
<dl>
<dt>爱是什么</dt>
<dd>爱是比喜欢多一点点</dd>
<dt>喜欢是什么</dt>
<dd>喜欢是比爱少一点点</dd>
</dl>
< 呵呵 > &
<!-- <是小于号< >是大于号> &是& "是双引号 -->
"
</body>
</html>
11.特殊字符
html中有很多特殊的字符是需要特殊的处理。
下面看几个特殊的字符处理：
转义字符
< 表示< > 表示> &表示& &qout;表示“ 表示空格
例子：
<html>
<head><title>特殊的字符</title> </head>
<body>
<<br>><br>&<br> &qout;<br>
</body>
</html>
12.超链接
1.连接到其他的文档
2.网页的内部链接
3.网页的外部链接
4.图片的锚点链接
锚点链接
13.表格
表格的结构
1.<table>
<table>...</table>是用来在html页面上创建表格的。
2.<th>代表列名一般放在第一行。
3.<tr>代表格的一行。
4.<td>用来定义表格的一列。
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
表格的设置
表格的合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表格：用于页面的排版，把页面元素使用表格，排列的更加整齐，早期用来做页面布局
table 整个表格
tr 行
td 列
-->
<!--
border="1" 边框
cellspacing="0" 边框的间隙 0 不要间隙
cellpadding="0" 单元格四周边框，和单元格中的内容间距
width="500px" 表格的宽
height="500px" 表格的高
align="center" 表格的对齐方式
bordercolor="red" 边框的颜色
bgcolor="aquamarine" 表格的背景颜色
background="img/girl4.jpg" 表格的背景图片
-->
<table border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="500px" height="500px" align="center" bgcolor="aquamarine" background="img/girl55.jpg">
<caption><h2>学生信息表</h2></caption>
<!-- 表头 -->
<tr bgcolor="bisque" height="50px">
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机</th>
</tr>
<tr align="center">
<td width="50px">1</td>
<td>张三</td>
<td>23</td>
<td>110</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr background="img/girl5.jpg">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td bgcolor="green">1</td>
<td>1</td>
<td>1</td>
<td align="center">1</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" width="60%" height="500px" bordercolor="red" align="center">
<tr>
<!-- colspan="2" 左右 合并-->
<td colspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="3">Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<!-- rowspan="3" 上下和并 -->
<td rowspan="3">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="500px" height="300px">
<tr>
<td>Data</td>
<td colspan="3">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td colspan="2">Data</td>
</tr>
</table>
<br>
<br>
<br>
<table align="center" border="1" cellspacing="0" bordercolor="red" width="500px" height="300px">
<tr>
<td rowspan="5" background="img/girl5.jpg">Data</td>
<td>商品名称</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td colspan="2" align="right" height="60px">
<button type="button" style="border: none;height: 50px;width: 100px;background: green;color: white;">加入购物车</button>
</td>
</tr>
</table>
</body>
</html>
14.input标签（部分标签必须用Opera浏览器测试）
<input />标签的 type分为：
text - 文本框
button - 按钮
submit - 提交
reset - 重置
password - 密码
checkbox - 多选
radio - 单选
file - 上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
写法：<input type = “text" value=""/>
4.1邮箱输入框
<input type="email" name="user_email" />
4.2数字输入框
<input type="number" name="points" min="1" max="10" />
4.3数字范围输入框（进度条）
<input type="range" name="points" min="1" max="10" />
4.4颜色选择框
<input type="color" name="colortext"/><br>
15.下拉列表及文本域
Select标签
<select>
<option value="qxz" selected/>请选择
<option value="A"/>苹果
<option value="B"/>香蕉
<option value="C"/>橘子
<option value="D"/>西瓜
</select>
TEXTAREA便签
<TEXTAREA ROWS="5" COLS="30" ></TEXTAREA >
16.表单
表单的用途：
表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。
表单构成：
<form></form>
<form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。
<from>标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。
target属性用来制定目标窗口的。
表单的工作原理：
1.访问者填写表单，并提交给web服务器处理；
2.在web服务器上的后台处理程序对提交后的数据进行处理；
3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
action="" 填写后台地址
method="post" 提交方式
get 会将请求参数拼接到url后面 请求数据的大小有限制
post 请求参数放到请求体里面提交的。请求数据的大小没有限制，比如上传文件，得选择post请求
input表单项，必须提供 name属性，他的值也作为键 value 作为值
http://127.0.0.1:8848/20200920-HTML-%E4%B8%8B%E5%8D%88/8.%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE.html?username=lisi&password=123456&sex=0&hobby=lq&hobby=zq&hobby=love&hobby=game&birthday=2020-09-20&xueli=daxue&desc=aaabbbccc%09%09%09%09%0D%0A%09%09%09%09&num=1&photo=#
//get请求：?后面的就是请求参数，也就你表单项的键和值
格式：键1=值1&键2=值2&键3=值3
username=lisi&password=123456&sex=0&hobby=lq&hobby=zq&hobby=love&hobby=game&birthday=2020-09-20&xueli=daxue&desc=aaabbbccc%09%09%09%09%0D%0A%09%09%09%09&num=1&photo=#
-->
<center>
<h1>用户注册</h1>
<form action="#" method="get">
用户名：<input type="text" name="username" id="" value="" placeholder="请输入用户名" />
<br>
密码：<input type="password" name="password" id="" value="" placeholder="请输入密码" />
<br>
<!-- name 属性值要一样，作为同一组。
checked="checked" 默认选中
-->
性别：<input type="radio" name="sex" id="" value="1" checked="checked" />男
<input type="radio" name="sex" id="" value="0" />女
<input type="radio" name="sex" id="" value="2" />妖
<input type="radio" name="sex" id="zx" value="3" /><label for="zx">中性</label>
<br>
爱好：<input type="checkbox" name="hobby" id="" value="lq" />篮球
<input type="checkbox" name="hobby" id="" value="zq" checked="checked"/>足球
<input type="checkbox" name="hobby" id="" value="love" checked="checked" />谈恋爱
<!-- <label for="game">玩游戏</label> 点击文字，也能勾选 -->
<input type="checkbox" name="hobby" id="game" value="game" /><label for="game">玩游戏</label>
<br>
生日：<input type="date" name="birthday" id="" value="" />
<br>
学历：<select name="xueli">
<option value ="">---请选择学历---</option>
<option value ="xiaoxue">---小学---</option>
<option value ="zhongxue">---中学---</option>
<!-- selected="selected" 默认选中下拉项 -->
<option value ="daxue" selected="selected">---大学---</option>
</select>
<br>
个人描述：<textarea rows="10" cols="30" name="desc">
</textarea>
<br>
你有几个女朋友：<input type="number" name="num" id="" value="1" start="1" max="10" />
<br>
用户图像：<input type="file" name="photo" id="" value="" />
<br>
<!-- 提交按钮 -->
<input type="submit" value="注册用户"/>
<input type="reset" value="重置"/>
</form>
</center>
</body>
</html>
17.框架（frame）
混合框架
<html>
<head>
<title>框架页示例</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.baidu.com">
<frameset cols="25%,75%">
<frame src="http://www.sina.com.cn">
<frame src="http://www.baidu.com">
</frameset>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- body标签和 frameset 不能共存
frameset 把页面切割为独立的几部分 每一部分，单独去引用一个单独的html页面
-->
<frameset rows="25%,*" border="5px" bordercolor="red">
<!-- src 顶部引入一个独立的页面
noresize="noresize" 不要让用户拖动框架
-->
<frame src="top.html" noresize="noresize">
<frameset cols="15%,*" >
<frame src="left.html" noresize="noresize" >
<!-- 右边的主体页面
scrolling="auto" 是否要滚动条 auto no yes
-->
<frame src="http://www.westos.org" name="mybody" noresize="noresize" scrolling="yes">
</frameset>
</frameset>
</html>
18.多媒体标记音频
1、HTML4多媒体
<embed src="文件源" width="宽度" autostart="true" loop="true">
src 设置文件源
width 设置宽度
autostart 设置是否自动播放，如果是true就是自动播放，是flase不自动播放
loop 设置是否循环播放true就是循环播放，false就是不自动播放
2、HTML5多媒体
<audio src="G:\Media\霍比特人3：五军之战.mp4" controls="controls"></audio>
3、添加背景音乐
<bgsound src="明月几时有.mp3" loop=5>
19.多媒体标记视频
视频标签
<video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls">
</video>
control属性供添加播放、暂停和音量控件
Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video元素允许多个 source 元素。source 元素可以链接不同的视频文件。
20.层（div）
层也可以添加事件和属性
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph</p>
</div>
内容总结
以上是互联网集市为您收集整理的JavaWeb之HTML基础全部内容，希望文章能够帮你解决JavaWeb之HTML基础所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】