本专栏笔记主要根据尚硅谷2022版Java Web
B站链接 点击跳转
HTML基本结构
<!DOCTYPE html> <!--标准网页声明-->
<html lang="zh"> <!--html标签开始 设置语言为中文-->
<head> <!--head标签开始-->
<meta charset="UTF-8"> <!--设置编码格式为UTF-8-->
<title>Document</title> <!--设置网站标题-->
</head> <!--head标签结束-->
<body> <!--body标签开始-->
主体 <!--网页主体内容-->
</body> <!--body标签结束-->
</html> <!--html标签结束-->
常用标签
双标签：<html></html>
<html> 称之为 开始标签
</html>称之为 结束标签
<br/>表示换行 br标签是一个单标签。
单标签：开始标签和结束标签是同一个，斜杠放在单词后面
p 表示段落标签
段落标签和换行标签的区别：换行标签间隙小，段落直接间隔大
img 标签图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示（鼠标放上面之后的提示）
h1~h6 : 标题标签
数字越大，字体越小
列表标签:
- ol 有序列表
start 表示从*开始，type 显示的类型：A a I i 1(deafult)
- ul 无序列表
type disc(default) , circle , square
u 下划线 b 粗体 i 斜体
可以嵌套使用
上标 sup 下标 sub 常用于化学式
a 表示超链接
href 链接的地址
target:
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
div 层
span 不换行的块标记
常用的实体标签
结果 实体
" "
' '
& &
< <
> >
￥ ¥
常用标签Demo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>HTML_Demo</title>
</head>
<body>
换行标签<br/>
看看间距
<p>段落1</p>
<p>段落2</p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="270" height="129" alt="百度一下">
<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>
有序列表
<ol type="A" start="2">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
无序列表
<ul type="circle">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<u>下划线</u> <br/>
<i>斜体</i> <br/>
<b>加粗</b> <br/>
上标 氧气化学式: O<sup>2</sup> <br/>
下标 水化学式: H<sub>2</sub>o <br/>
<br/>
超链接
<a href="https://baidu.com" target="_blank">百度一下</a>
<br/><br/>
实体标签:<br/>
" <br/>
' <br/>
& <br/>
< <br/>
> <br/>
¥ <br/>
</body>
</html>
表格标签
表格 table
行 tr
列 td
表头列 th
table中有如下属性（虽然已经淘汰，但是最好了解一下）
- border：表格边框的粗细
- width:表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
tr中有一个属性： align -> center , left , right
rowspan : 行合并
colspan : 列合并
表格Demo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1+1</title>
</head>
<body>
<table border="1" width="600" cellspacing="0" >
<tr>
<th>q</th>
<th>w</th>
<th>e</th>
<th>r</th>
</tr>
<tr>
<td>we</td>
<td>we</td>
<td>we</td>
<td>we</td>
</tr>
<tr>
<td>we</td>
<td>we</td>
<td>we</td>
<td>we</td>
</tr>
</table>
列合并
<table border="1" width="600" cellspacing="0" >
<tr>
<th>q</th>
<th>w</th>
<th>e</th>
<th>r</th>
</tr>
<tr>
<td colspan="2" >we</td>
<td>we</td>
<td>we</td>
</tr>
<tr>
<td>we</td>
<td>we</td>
<td>we</td>
<td>we</td>
</tr>
</table>
行合并
<table border="1" width="600" cellspacing="0" >
<tr>
<th>q</th>
<th>w</th>
<th>e</th>
<th>r</th>
</tr>
<tr>
<td>we</td>
<td>we</td>
<td>we</td>
<td rowspan="2">we</td>
</tr>
<tr>
<td>we</td>
<td>we</td>
<td>we</td>
</tr>
</table>
</body>
</html>
3639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
