HTML笔记二

笔记二主要记录一些常用标签及其属性的用法

段落和标题

段落标签<p>
标题标签<h1> <h2> <h3>……<h6>数字加大也可以渲染,但字体肯定是不能再小了
(笔记仅给出开始标签,结束标签加上/即可)

1
2
<p>段落</p>
<h1>一级标题</h1>

用于呈现最基本的文字内容,无须多说。

列表

示例:

1
2
3
4
5
6
7
8
9
10
<!--无序列表-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<!--有序列表-->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>

无序列表没有数字编号,有序列表有数字编号,这个大家都懂。

表格

表格需要用到多种标签,表格标签<table>表格行标签<tr>表格列标签<td>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--这是一个表格-->
<!--带边框的表格,设置border属性-->
<!--设置表格宽度,单位px-->
<table border="1" width="200px">

<tr>
<!--合并横跨两列-->
<td colspan="2">表宽200px,有边框,横向合并2</td>
</tr>

<tr>
<!--可以单独指定列宽-->
<!--可以指定百分数列宽,width="80%",未展示-->
<td width="50px">列宽50px</td>
<!--设置垂直对齐,valign="top"-->
<td valign="top">垂直居中置顶</td>
</tr>

<tr>
<!--水平对齐设置,align="center"-->
<td align="center">居中</td>
<!--垂直合并,rowspan="2"-->
<td rowspan="2">垂直合并2</td>
</tr>

<tr>
<!--设置背景颜色,bgcolor="gray"-->
<td bgcolor="gray">灰色</td>
</tr>

</table>

和别的很多UI中的表格元件一样,可以控制表格的宽度、对齐方式、背景颜色、边框等,通过属性设置即可,需要注意的是由于HTML中书写表格的方法是列嵌套在行里面,不是很直观,特别是垂直合并的时候,需要注意对齐。

超链接

标签为<a>,通过设置属性可以实现更丰富的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--a是超链接标签-->
<a href="http://www.logic530.cn">logic的博客</a>
<br>

<!--加一个属性target="blank",有什么用呢?-->
<a href="http://www.logic530.cn" target="blank">logic的博客</a>
<!--就会在新页面打开了-->
<br>

<!--title属性可以悬停的时候显示提示性文本-->
<a href="http://www.logic530.cn" title="就是我的博客啦">logic的博客</a>
<br>

<!--里面嵌套别的元素就可以把超链接结合上去了-->
<a href="http://www.logic530.cn"><img src="logic.png"></a>

内联框架

<iframe>给网页内嵌一个小浏览器,可以通过属性指定尺寸等,应该还有一些高级属性设置,我还不知道就不说了。

1
2
<!--内联框架,小浏览器-->
<iframe src="https://www.bilibili.com" width="600px" height="400px">

图像

<img>顾名思义,显示一个图片,通过设置src属性来指定图片,可以是网络图片,也可以是本地图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--网络图片-->
<img src="https://how2j.cn/example.gif"/>
<br>

<!--本地同级目录图片-->
<!--可以用..指代上级目录,目录表示方法和linux一致吧-->
<!--file://绝对路径 也可以-->
<img src="logic.png">
<br>

<!--设置width和height属性可以调整大小-->
<img width="100" height="100" src="logic.png">
<br>

<!--用别的标签实现居中,常用div-->
<div align="center">
<img width="100" height="100" src="logic.png">
</div>
<br>

<!--用alt指定图片无法显示时的占位符-->
<img width="100" height="100" src="图片不存在.png" alt="要显示的图片不存在呢">

字体

标签<font>虽然网站上的教程有说这个,但是感觉实际基本不会用,都会用css的吧,评论区也这么说,就不讲了。

div和span

两种布局用标签,没有实际显示效果,相当于一个看不见的框框。
区别大概是<div>带换行<span>不带

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--无效果-->
这没有标签
<div> 这是一个div</div>
<span>这是一个span</span>
<br>
<br>

<!--用div同时控制两个图片的边距-->
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
<br/>
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>

<div style="margin-left:100px" >
<img src="https://how2j.cn/example.gif"/>
<br/>
<img src="https://how2j.cn/example.gif"/>
</div>
<br>

<!--div和span的区别-->
<!--div是块元素,即自动换行,span是内联元素,即不会换行-->
<div>
第一个div
</div>
<div>
第二个div
</div>
<span>
第一个span
</span>
<span>
第二个span
</span>