JavaWeb之html
html :Hyper Text Markup Language 超文本标记语言
- 超文本：比文本功能更加强大
- 标记语言：通过一组标签对内容进行描述的一门语言
html书写规则：
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。- 文件的后缀名：.html(建议)或者.htm
- 标签必须用<>引起来
- 属性：格式：key = "value" 建议属性的值用引号引起来
- 不区分大小写
注意：
- 最好将所有的内容放在一个标签中<html> </html>
- 有开始标签和结束标签的标签称之为围堵标签
- 没有结束的标签称之为空标签，如，<br>
- 开始标签和结束标签之间的内容称之为标签体
- <!--注释内容-->html页面中的注释内容
- 标签必须正常嵌套
文件标签：
html标签：
声明当前网页为html页面
子标签：
<head></head>
<body></body>
head:用来存放当前页面的重要信息，一般不展示在html页面上
常见的子标签：
<title></title> 网页的标题
body:
要展示的数据放在body中
标题标签：
<hn></hn>（n:1~6）
<h1>最大的标签，<h6>最小的标签
自动换行，且留白，默认加粗
常用属性：
align:对齐方式
left：左对齐 right:右对齐 center:居中
格式：<h2 align="center">这里是要展示的内容<h2>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>Java欢迎您</h1> 9 <h2 align = "center">Java欢迎您</h2> 10 <h3>Java欢迎您</h3> 11 <h4>Java欢迎您</h4> 12 <h5>Java欢迎您</h5> 13 <h6>Java欢迎您</h6> 14 </body> 15 </html>
网页展示：
字体标签（了解）：规定文本的字体、字体的尺寸、字体的颜色
<font></font>
常用属性：
face:字体
size:尺寸
color:颜色
颜色的取值（RGB）：
方法1：#xxxxxx x为16进制
方法2：英文，如red、blue
段落标签：
<p></p>
其他标签：
<b></b> <strong></strong> :加粗
<i></i>:斜体
水平线
<hr/>
换行
<br/>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <font size="1">我的size是1</font> 9 <font size="2">我的size是2</font> 10 <font size="3">我的size是3</font> 11 <font size="4">我的size是4</font> 12 <font size="5">我的size是5</font> 13 <font size="6">我的size是6</font> 14 <font size="7">我的size是7</font> 15 <br/> 16 <font color="red">我是红色</font> 17 <font color="blue">我是蓝色</font> 18 <font color="black">我是黑色</font> 19 <br/> 20 <font color="#000000">我是黑色</font> 21 <br /> 22 <font face ="黑体">我是黑体字</font> 23 <br/> 24 <b>我是粗体</b> 25 <br /> 26 <i>我是斜体</i> 27 <br /> 28 下面是水平线 29 <hr /> 30 上面是水平线 31 </body> 32 </html>
网页展示：
图片标签：
<img/>
常用属性：
src:图片的路径
alt:替代的文字
title:移上去显示的文字
width:宽
height:高
大小的写法：
像素：111px
百分比：20%
图片路径：
相对路径：
./ 或者 什么都不写 ->当前路径
../上级目录
绝对路径：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <img src="../img/huge1.jpg" title="胡歌" width="233" height="233"/> 9 <img src="../img/huge2.jpg" alt="胡歌" /> 10 <img src="../img/huge3.jpg" alt="胡歌" /> 11 </body> 12 </html>
页面展示：
列表标签：
<ol></ol> 有序列表
<ul></ul>无序列表
常用的标签：
<li></li> 列表项
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <ol> 9 <li>春</li> 10 <li>夏</li> 11 <li>秋</li> 12 <li>冬</li> 13 </ol> 14 15 <ol type="a"> 16 <li>梅</li> 17 <li>兰</li> 18 <li>竹</li> 19 <li>菊</li> 20 </ol> 21 <hr /> 22 <ul> 23 <li>春</li> 24 <li>夏</li> 25 <li>秋</li> 26 <li>冬</li> 27 </ul> 28 <ul type="circle"> 29 <li>春</li> 30 <li>夏</li> 31 <li>秋</li> 32 <li>冬</li> 33 </ul> 34 <ul type="square"> 35 <li>春</li> 36 <li>夏</li> 37 <li>秋</li> 38 <li>冬</li> 39 </ul> 40 41 </body> 42 </html>
页面展示：
超链接标记：
<a></a>
常用属性：
href:跳转路径 #当前路径
target:在那里打开
默认值： _self 在当前页面打开
_ blank 在空白页面打开
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h2>友情链接</h2> 9 <ol> 10 <li><a href="https://www.cnblogs.com/" target="_blank">博客园</a></li> 11 <li><a href="https://www.csdn.net/" target="_blank">CSDN</a></li> 12 </ol> 13 </body> 14 </html>
页面展示：
table的常用属性：
border:边框 像素值
width:表格的宽度 百分比
height：表格的高度 像素值
align：表格对齐属性
tr的常用属性：
align：内容对齐方式
colsoan:跨列合并：合并的列数
rowspan:跨行合并：合并的行数
