标签
# HTML标签
<!DOCTYPE HTML>
HTML5规范 告知浏览器使用这种规范去解析页面
<html lang="zh">
告知浏览器页面是以中文为主的网站
<meta charset="UTF-8">
meta标签设置网站的元信息
<title>网站标题</title>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
1
2
3
4
5
6
2
3
4
5
6
# 段落标签
<p>一个段落?</p>
1
# 水平线标签?
<hr/>
1
# 换行标签
<br/>
1
# 文本格式化标签?
# 加粗
<b>文本</b>
or
<strong>文本</strong>
1
2
3
2
3
# 下划标签?
<u>文本</u>
or
<ins>文本</ins>
1
2
3
2
3
# 倾斜
<i>文本</i>
or
<em>文本</em>
1
2
3
2
3
# 删除标签?
<s>文本</s>
or
<del>文本</del>
1
2
3
2
3
# 标签的属性?
属性为HTML标签提供附加信息
# 图片标签
<img src="URL">
1
属性:
- src:图片的路径
- alt:图片加载不出来,显示的文字
- title:鼠标悬浮图片显示的文字
- width:宽
- height:高
# 超链接标签?
<a href="URL" target="跳转方式">文本或图片?</a>
1
# 链接标签属性?
- href
外部链接:网址
内部链接:路径? - target
_self:在当前页面打开
_blank:保留原始界面,新界面打开
# base标签
统一页面的跳转方向?
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank">
</head>
1
2
3
4
5
2
3
4
5
# 锚点链接
标签的ID属性?
使用
<h1 id="y"><h1>
<a href="#y">文件内定?</a>
or
<a href="URL#y"> 跨文件定?</a>
1
2
3
4
5
2
3
4
5
# 列表标签
# 无序列表
<ul>
<li></li>
<li></li>
</ul>
un list
1
2
3
4
5
2
3
4
5
# 有序列表
<ol>
<li></li>
<li></li>
</ol>
order list
1
2
3
4
5
2
3
4
5
# 自定义列表?
一般用于网站下方信息显示?
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
define list
data table
1
2
3
4
5
6
7
2
3
4
5
6
7
# HTML转义字符
字符 | 描述 | 字符的代码 |
---|---|---|
空格 |   | |
< | 小于号 | < |
> | 大于号 | &gy |
& | 和号 | & |
# 表格标签
# 表格格式
<table>
<caption>表格演示</caption>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1-1</td>
<td>内容1-2</td>
<td>内容1-1</td>
</tr>
<tr>
<td>内容2-1</td>
<td>内容2-2</td>
<td>内容2-3</td>
</tr>
</tbody>
<table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 表格属性?
属性? | 作用 |
---|---|
border | 边框 |
width | 给表格设置宽 |
height | 给表格设置高 |
cellspacing | 规定单元格与单元格之间的空白 |
cellpadding | 单元格内部边框与内容的空白? |
align | 对齐方式(table、tr、td分别设置有不同效果) |
caption | 表格标题属性? |
th | 表头属属性? |
tbody | 表格结构标签 |
tfoot | 表格结构标签 |
- 给table标签设置:会让表格的整体在浏览器中水平居中?
- 给tr标签设置:会该tr中单元格的内容水平居中!!!
- 给td标签设置:会该单元格中的内容水平居中
See the Pen by yuandehua (@yuandehua) on CodePen.
# 表格合并
rowspan : 跨行合并
colspan :跨列合并?
原则左上 ,对坐上列表进行保留 删除需要合并的单元格?
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48