HTML-基础标签总结

👉使用ul,添加无序列表(unordered list)

使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。li是英文list item的缩写

1
2
3
4
5
6
7
<body>
<ul>
<li>完美生活</li>
<li>蓝莲花</li>
<li>一起摇摆</li>
</ul>
</body>

显示效果:

这里写图片描述

在webstorm中快速编写一个ul的格式

ul>li(然后按下Tab键)
含义: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签

1
2
3
<ul>
<li></li>
</ul>

ul>li*3(然后按下Tab键)
含义: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签

1
2
3
4
5
<ul>
<li></li>
<li></li>
<li></li>
</ul>

👉使用ol,添加有序列表(ordered list)

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始

1
2
3
4
5
6
7
<body>
<ol>
<li>完美生活</li>
<li>蓝莲花</li>
<li>一起摇摆</li>
</ol>
</body>

显示效果:

这里写图片描述

👉div排版

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

1
2
3
4
<div style="color: aqua; background-color: chocolate">
<h3>这是三级标题</h3>
<p>这是一个段落</p>
</div>

显示效果:

这里写图片描述

👉给div命名,使逻辑更加清晰

为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号。

1
2
3
4
5
6
<div id="header" style="color: aqua; background-color: chocolate">
<h3>这是三级标题</h3>
</div>
<div id="paragraph" style="height: 60px; background-color: firebrick">
<p>这是段落</p>
</div>

显示效果:

这里写图片描述

👉table标签,制作表格

创建表格的四个元素table、tbody、tr、th、td

  • <table></table>:整个表格以<table>标记开始、</table>标记结束。
  • <tbody></tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)
  • <tr></tr>:表格的一行,所以有几对tr 表格就有几行。
  • <td></td>:表格的一个单元格,一行中包含几对<td></td>,说明一行中就有几列。
  • <th></th>:表格的头部的一个单元格,表格表头。
  • 表格中列的个数,取决于一行中数据单元格的个数。
  • table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
  • 表头,也就是th标签中的文本默认为粗体并且居中显示
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <table>
    <tbody>
    <tr>
    <th>姓名</th>
    <th>班级</th>
    <th>年龄</th>
    </tr>
    <tr>
    <td>小明</td>
    <td>2班</td>
    <td>12岁</td>
    </tr>
    <tr>
    <td>小李</td>
    <td>1班</td>
    <td>11岁</td>
    </tr>
    </tbody>
    </table>

显示效果:

这里写图片描述

👉使用css样式为表格加入边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
table tr td,th{border: 1px solid #000}
</style>
<table>
<tbody>
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>2班</td>
<td>12岁</td>
</tr>
<tr>
<td>小李</td>
<td>1班</td>
<td>11岁</td>
</tr>
</tbody>
</table>

###显示效果:
这里写图片描述

👉caption标签为表格添加标题和摘要

###摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法:<table summary="表格简介文本">

标题:用以描述表格内容,标题的显示位置:表格上方。语法:

1
2
3
4
5
6
7
8
9
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table summary="班级信息表">
<caption>表格标题</caption>
<tbody>
<tr>
<th>姓名</th>
<th>班级</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>2班</td>
<td>12岁</td>
</tr>
<tr>
<td>小李</td>
<td>1班</td>
<td>11岁</td>
</tr>
</tbody>
</table>

显示效果:

这里写图片描述

👉定义列表

给一数据添加列表语义,先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息·,语法信息:

1
2
3
4
5
6
7
8
9
10
11
<body>
<dl>
<dt>手机</dt>
<dd>iPhone</dd>
<dd>华为, OPPO, 三星</dd>
<dt>电脑</dt>
<dd>MAC, WiN</dd>
</dl>
</body>
dt是definition title的缩写, 用来定义列表中的标题
dd是definition description的缩写, 用来定义标题对应的描述

显示效果:

这里写图片描述

👉<a>标签,链接到另一个界面

使用<a>标签可实现超链接,语法:

1
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

默认只要为文本加入a标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色)

  • a标签不仅可以让文字可以点击, 图片也能够被点击
  • 一个a标签必须有一个href属性
  • 当a标签的href属性指定的是一个URL地址, 那么必须在地址前面加上http://或https://
  • a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址
1
2
3
4
<ul>
<li><a href="http://www.baidu.com" title="百度">点击跳转百度</a> </li>
<li><a href="http://blog.csdn.net/feng2qing?viewmode=list" title="Stevin三天三夜的专栏">Stevin三天三夜</a>
</ul>

显示效果:点击在当前页进行跳转

这里写图片描述

👉<a>标签,在新建浏览器中打开链接

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。

1
<a href="目标网址" target="_blank">click here!</a>
1
2
3
4
<ul>
<li><a href="http://www.baidu.com" target="_blank" title="百度">点击跳转百度</a> </li>
<li><a href="http://blog.csdn.net/feng2qing?viewmode=list" title="Stevin三天三夜的专栏">Stevin三天三夜</a>
</ul>

显示效果:点击百度在新界面打开

这里写图片描述

👉使用mailto在网页中链接Email地址

这里写图片描述

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

1
2
3
<ul>
<a href="mailto:shaofeng7998@foxmail.com?cc=1170197998@qq.com&bcc=1170197998@qq.com&subject=主题&body=邮件">点击发送</a>
</ul>

显示效果:点击会唤起本地邮箱软件

这里写图片描述

👉<img>标签,为网页插入图片

语法:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

  • src:标识图像的位置;可以是本地路径或者网络路径。
  • alt:alternate的缩写,指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
  • title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
  • 图像可以是GIF,PNG,JPEG格式的图像文件。
  • 如果手动指定了图片的高度和宽度,那么可能会导致图片变形,此时可以这样做:高度和宽度只指定一个,指定宽度时,高度会自动算出,不会变形。反之指定高度的时候宽度也会自动算出。都没有指定的时候,会按照默认的宽高来显示
1
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=235732466,99834328&fm=23&gp=0.jpg" alt="Imgae" title="GIF图">

显示效果:

这里写图片描述

👉base标签

base标签就是用来统一的当前网页中所有的超链接(a标签)如何打开,必须写在head标签的开始标签和结束标签之间

  • 如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行
1
2
<base target="_blank"> //在新标签中打开
<base target="_self"> //在当前页中打开
1
2
3
4
5
6
7
8
9
<head>
<meta charset="UTF-8">
<title>11-base标签</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="http://blog.csdn.net/feng2qing/article/list/2">Blog</a>
</body>

显示效果:

这里写图片描述

  • 百度在当前页面打开,Blog在新标签打开

    👉假链接

    假链接点击之后不会发生界面的跳转,有两种格式#javascript,前者点击会回到网页顶部,后者不会发生变化

1
2
<a href="#">点我调到顶部</a>
<a href="javascript:">点我不发生变化</a>

显示效果:

这里写图片描述

👉锚点

通过a标签跳转到网页指定位置

  • 给目标位置设置id属性
  • 把目标位置的id值告诉a标签
  • a标签进行位置跳转是没有动画的
1
2
3
<!--点击a标签的文字会跳转到下面p标签的位置-->
<a href="#center">跳转到中部</a>
<p id="center">我是中部</p>

a标签除了可以跳转到当前界面的指定位置以外, 还可以跳转到其他界面的指定位置

1
2
3
<!--点击a标签的文字会跳转到DEMO界面id = bottom的位置,并且是在新标签中打开-->
<a href="DEMO2.html#bottom" target="_blank">跳转到DEMO2界面</a>
<h2 id="bottom">DEMO2界面</h2>
Stevin wechat
扫码及时获取更多文章