HTML基础标签

HTML基础标签

Administrator 645 2023-10-09

HTML基础标签

一、标签的分类

1. 排版标签

2. 文本格式化标签

3. 媒体标签

4. 链接标签

二、排版标签

  1. 标题标签

    使用场景:新闻和文章的排版一般都含有标题,用来突出显示文章的主题

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    • 语义:一至六级标题,重要程度依次递减

    • 特点:

      • 文字都加粗

      • 文字大小不一样,从h1~h6文字大小依次递减

      • 独占一行

    • 注意:h1标签对于网页尤为重要,开发中有特定的使用场景,如:新闻的标题、网页的logo部分

  2. 段落标签

    使用场景:在新闻和文章的页面中,用于分段显示

    <p>这是文章的段落<p>
    • 语义:段落

    • 特点:

      • 段落和段落之间有间距

      • 独占一行

    <html>
    	<head>
    		<title>段落标签</title>
    	</head>
    	<body>
    		<h1 align="center">荷塘月色</h1>
    		<p align="right">朱自清</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑,已经听不见了;妻在屋里拍着闰儿,迷迷糊糊地哼着眠歌。我悄悄地披了大衫,带上门出去。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四面,长着许多树,蓊蓊郁郁的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常的自己,到了另一个世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;曲曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水,遮住了,不能见一些颜色;而叶子却更见风致了。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。月光是隔了树照过来的,高处丛生的灌木,落下参差的斑驳的黑影,峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影,却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律,如梵婀玲上奏着的名曲。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;荷塘的四面,远远近近,高高低低都是树,而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁,漏着几段空隙,像是特为月光留下的。树色一例是阴阴的,乍看像一团烟雾;但杨柳的丰姿,便在烟雾里也辨得出。树梢上隐隐约约的是一带远山,只有些大意罢了。树缝里也漏着一两点路灯光,没精打采的,是渴睡人的眼。这时候最热闹的,要数树上的蝉声与水里的蛙声;但热闹是它们的,我什么也没有。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;忽然想起采莲的事情来了。采莲是江南的旧俗,似乎很早就有,而六朝时为盛;从诗歌里可以约略知道。采莲的是少年的女子,她们是荡着小船,唱着艳歌去的。采莲人不用说很多,还有看采莲的人。那是一个热闹的季节,也是一个风流的季节。梁元帝《采莲赋》里说得好:
    于是妖童媛女,荡舟心许;鷁首徐回,兼传羽杯;棹将移而藻挂,船欲动而萍开。尔其纤腰束素,迁延顾步;夏始春余,叶嫩花初,恐沾裳而浅笑,畏倾船而敛裾。</p>
    		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可见当时嬉游的光景了。这真是有趣的事,可惜我们现在早已无福消受了。
    于是又记起,《西洲曲》里的句子:
    采莲南塘秋,莲花过人头;低头弄莲子,莲子清如水。
    今晚若有采莲人,这儿的莲花也算得“过人头”了;只不见一些流水的影子,是不行的。这令我到底惦着江南了。——这样想着,猛一抬头,不觉已是自己的门前;轻轻地推门进去,什么声息也没有,妻已睡熟好久了。</p>
    		<p>一九二七年七月,北京清华园。</p>
    	</body>
    </html>
  3. 换行标签

    使用场景:让文字强制换行显示

    你好,<br>世界。
    <!-- 
    你好,
    世界。
    -->
    • 语义:换行

    • 特点:

      • 单标签

      • 让文字强制换行

  4. 水平线标签

    使用场景:分割不同主题内容的水平线

    <p>等你下课</p>
    <hr>
    <p>你住的 巷子里</p>
    • 语义:主题的分割和转换

    • 特点:

      • 单标签

      • 在页面中显示一条水平线

三、文本格式化标签

  1. 文字加粗

    • strong

    • b

    两个标签都可以对文本进行加粗,`strong`为语义化标签

  2. 文本倾斜

    • em

    • i

    两个标签都可以对文本进行倾斜,em为语义化标签

  3. 文本下划线

    • ins

    • u

    两个标签都可以对文本添加下划线,ins为语义化标签

  4. 文本删除线

    • del

    • s

    两个标签都可以对文本添加删除线,del为语义化标签

<html>
	<head>
		<title>文本格式化标签</title>
	</head>
	<body>
		<h1 align="center"><ins>任意门 —— 五月天<ins></h1>
		<hr>
		<p align="center">
			<em>行天宫后 二楼前座 那个小房间<br>
			日夜排练 我们听着唱片<br>
			唱片来自 那唱片行 叫摇滚万岁<br>
			和驻唱小店 都在士林边缘<br>
			我们都想 离开这边 追寻另一边<br>
			苗栗孩子 搬到台北求学<br>
			水手之子 重考挤进 信义路校园<br>
			和高雄学弟 当时看不顺眼</em><br>
			<strong>我们曾走过 无数地方 和无尽岁月<br>
			搭着肩环游 无法遗忘 的光辉世界<br>
			那年我们都 冲出南阳街<br>
			任意门通向了音乐<br>
			任意门外我们都任意的飞<br>
			是自由的滋味</strong><br>
			<del>七号公园 初次登场 是那个三月<br>
			自强隧道 漫长的像永远<br>
			椰林大道 谁放弃了 律师的家业<br>
			头也不回地 越来越唱越远<br>
			外滩风光 跃出课本 是那么新鲜<br>
			从回民街 再飞到尖沙咀<br>
			男儿立志 成名在望 不论多遥远<br>
			一离开台北 却又想念台北<br>
			我们曾走过 无数地方 和无尽岁月<br>
			搭着肩环游 无法遗忘 的光辉世界<br>
			无名高地到 鸟巢的十年<br>
			一路铺满汗水泪水<br>
			任意门外我们用尽全力飞<br>
			管他有多遥远<br>
			我们曾走过 无数地方 和无尽岁月<br>
			搭着肩环游 无法遗忘 的光辉世界<br>
			那个唱片行 何时已不见<br>
			是谁说过摇滚万岁<br>
			任意门里我们偶尔也疲倦<br>
			平凡的我们 也将回到 平凡的世界<br>
			生活中充满 孩子哭声 柴米和油盐<br>
			曾和你走过 麦迪逊花园<br>
			任意门外绕一大圈<br>
			你问我全世界是哪里最美<br>
			答案是你身边 只要是你身边<br>
			行天宫后 二楼前座 那个小房间<br>
			兽妈准备 宵夜是大鸡腿<br>
			每个梦都 像任意门<br>
			往不同世界 而你的故事<br>
			现在正是起点</del><br>
		</p>
	</body>
</html>

四、媒体标签

1. 图片标签

使用场景:在网页中显示图片

<img src="" alt="" title="" width="" height="">
  • src: 必填,图片的路径

  • alt: 图片加载失败时替换的文字

  • title: 鼠标悬停在图片上所显示的文字

  • width: 图片的宽度

  • height: 图片的高度

    当width和height只设置一个值的时候,另一个会等比例缩放

    当width和height同时都设置的时候,图片会被拉伸

特点:单标签,src为必填,如果不填则无法加载图片

<html>
	<head>
		<title>图片标签</title>
	</head>
	<body>
		<!-- source: 源,缩写src -->
		<img src="自传.jpg" alt="图片加载失败了" title="自传——五月天——同级目录" width="100" height="300">
	</body>
</html>

2. 路径

页面需要加载媒体资源或者其他外部资源的时候,我们需要在网页内去把对应的资源导入进来,所以我们就需要通过路径去找到对应的资源。

类似于生活中的找人需要通过对应的路径才能找的到,也就说你需要知道另一个人在什么地方才可以找到那个人。

  • 绝对路径

  • 相对路径(相对于当前文件的路径)

    • 当前文件:要引入其他的文件的文件

    • 目标文件:要被其他文件引入的文件

    • 相对路径的分类

      • 同级目录

        • 当前文件和目标文件在同一目录下

          <img src="./自传.jpg">

          `./`表示的就是当前目录

      • 下级目录

        • 目标文件在当前文件的下级目录下

          <img src="./images/自传.jpg">

          ./images表示的是当前目录下的`images`目录

      • 上级目录

        • 目标文件在当前文件的上级目录下

          <img src="../images/自传.jpg">

          ../images表示当前目录的上级目录下的`images`目录

3. 音频标签

使用场景:在网页内使用音频,MP3等

<audio src="./audio.mp3" controls autoplay loop></aduio>
  • src: 音频的路径

  • controls: 是否在页面上显示播放控件

  • autoplay: 是否打开页面自动播放(仅部分浏览器支持)

  • loop: 是否循环播放

<html>
<head>
	<title>音频标签</title>
</head>

<body>
    <!--
		当标签的属性值类型为true或false时,我们可以通过是否在标签内写该属性来表示
		如下:
			audio标签有controls属性但是没有属性值,相当于 controls="true"
			当标签内只有属性名时,说明这个属性名对应是属性值是true
	-->
	<audio src="./audios/任意门 — 五月天.mp3" controls autoplay loop></audio>
	<!--
		上面的audio标签和下面的audio标签是等价的
	-->
	<audio src="./audios/任意门 — 五月天.mp3" controls="true" autoplay="true" loop="true"></audio>
</body>
</html>

4. 视频标签

使用场景:在页面内插入视频

<video src="./video.mp4" controls autoplay loop></video>
  • src: 视频资源路径

  • controls: 是否显示视频播放控件

  • autoplay: 是否自动开始播放

  • loop: 是否循环播放

<html>
	<head>
		<title>视频标签</title>
	</head>
	
	<body>
		<video src="./videos/篮球大牛.mp4" controls autoplay loop></video>
	</body>
</html>

五、超链接标签

使用场景:在一个页面内跳转到其他页面或页面中的某个区域

<a href="./index.html">跳转到首页</a>
  • href: 要跳转的目标路径

  • target: 链接的打开方式(默认是在当前标签页打开)

    • _blank: 打开新的标签页

    • _self: 在当前标签打开

六、列表标签

  1. 无序列表

    使用场景:用于展示无序且相关联的数据

    <h2>无序列表</h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>西瓜</li>
    </ul>

    ul: 表示无序列表的整体

    li: 无序列表的内容

    注意:ul标签下只能包含li标签,li标签下可以包含任意内容

  2. 有序列表

        <h2>有序列表</h2>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>西瓜</li>
        </ol>

    ol: 有序列表的整体

    li: 有序列表的内容

    注意:ol标签下只能包含li,li标签下可以包含任意内容

    ul和ol下的li是一样的,如果li在ul下,则在内容开头添加无序符号,如果是在ol下则添加数字序号

  3. 自定义列表

    <h2>自定义列表</h2>
        <dl>
            <dt>
                水果
                <dd>苹果</dd>
                <dd>香蕉</dd>
                <dd>葡萄</dd>
            </dt>
            <dt>
                香烟
                <dd>利群</dd>
                <dd>金圣</dd>
                <dd>白沙</dd>
            </dt>
        </dl>

    dl: 自定义列表的整体

    dt: 自定义列表的主题

    dd: 自定列表主题下的内容项

    注意:dl标签下只允许包含dt或dd标签,dt/dd标签下可以包含任意内容,dt标签不是必须的,dl标签下可以直接包含dd标签

七、表格标签

在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表

标签组成:

  • table: 表格

  • tr: 表格的行

  • td: 表格的单元格

    标签的嵌套关系:table>tr>td

表格的属性:

  • border: 边框的宽度

  • width: 表格的宽度,当属性作用在单元格上时表示单元格的宽度

  • height: 表格的高度,当属性作用在单元格上时表示单元格的高度

表格的标题和列标题:

  • caption: 表格的标题

  • th: 表格的列标题,包含在tr下

表格的结构标签:

  • thead: 表头

  • tbody: 表格主体内容

  • tfoot: 表格的底部

合并单元格:

将多个单元格横向或纵向合并成一个单元格

步骤:

  1. 明确合并哪几个单元格

  2. 通过左上原则,确定保留谁删除谁

    1. 上下合并→只保留最上的,删除其他

    2. 左右合并→只保留最左的,删除其他

  3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

    1. rowspan: 跨行合并,纵向合并

    2. colspan: 跨列合并,横向合并

表格个人简历:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>林卓群的个人简历</title>
</head>
<body>
    <table border="1">
        <caption><strong>林卓群的个人简历</strong></caption>
        <tr>
            <td>姓名</td>
            <td>林卓群</td>
            <td>性别</td>
            <td>男</td>
            <td rowspan="4">
                <img src="./images/my.png" alt="" width="100" height="120">
            </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>26</td>
            <td>婚姻状况</td>
            <td>未婚</td>
        </tr>
        <tr>
            <td>手机号</td>
            <td>15679711120</td>
            <td>政治面貌</td>
            <td>中共党员</td>
        </tr>
        <tr>
            <td>毕业学校</td>
            <td colspan="3">赣南师范大学</td>
        </tr>
        <tr>
            <td>联系地址</td>
            <td colspan="4">江西省南昌市南昌县向塘镇江西工商职业技术学院</td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <strong>工作经历</strong>
            </td>
        </tr>
        <tr>
            <td colspan="5" height="100">无</td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <strong>教育经历</strong>
            </td>
        </tr>
        <tr>
            <td colspan="5">无</td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <strong>自我评价</strong>
            </td>
        </tr>
        <tr>
            <td colspan="5">无</td>
        </tr>
    </table>
</body>
</html>