HTML小结

前言

前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

这是前端开发的最核心的技术

1、学习html。

这个是最简单的,也是最基础的.要熟练掌握div、form table、ul li 、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本table是用来和数据打交道.

2、学习css。

这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使用css+html 或者 css+div 来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说css+div呢？因为我上面说了div就是html主要用于布局的东西,所以div就是核心掌握的东西！那么css肯定必须要配合div来使用才好.css要熟练掌握float、position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等,这些都是跟布局有关系的样式,一点要掌握.

3、学习js。

可能前两个大家觉得还过得去,看到js就蛋疼了,其实吧,js入门很简单的,不需要会很多东西的,只要会根据某个id、或者name拿到网页dom或者样式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,然后数据逻辑判断,效果方面的,无非就是跳转、弹框、隐藏什么的,把这些全部结合其他就是实际用途了,代码一点都不难,会了这些基础js,其他的直接百度就好了.然后看多了,用多了,就什么都不是问题了.

一、HTML是什么？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

与css，js不同的是，html是网页开发的骨架，是网页开发的基石，他的作用就显得无比巨大

二、HTML的基本使用

标签属性

1.标题标签

由h1到h5组成，其中h1为最大的标签依次缩小

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <h1>这是一个h1标题h1>
    <h2>
        这是一个h2标题
    h2>
    <h3>
        这是一个h3标题
    h3>
    <h4>
        这是一个h4标题
    h4>
    <h5>
        这是一个h5标题
    h5>
    <h6>
        这是一个h6标题
    h6>
    body>
html>
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

运行结果如下在这里插入图片描述

2.水平标签

划出一道水平线来隔绝文章

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <h1>
        这是和h1标题
    h1>
     <hr>//水平线
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这是运行结果
在这里插入图片描述

3.段落标签

段落标签是文章的一个段落一个段落，其会有自动换行的功能

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    我爱你<br>  
    撒大苏打撒
    <p>
        一辈子，这是一个段落
    p>
    阿斯顿撒旦
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

运行结果如下
在这里插入图片描述

4.分行标签

可以使文章换行

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <p>
        这是一个段落标签，<br>这里来演示分行
    p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行结果如下
在这里插入图片描述

5.文本修饰标签

可以让文本加粗倾斜或者其他一些功能

一.加粗和倾斜

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

运行结果如下
在这里插入图片描述

二.下划线和取消线

代码如下

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <p>
        清仓大甩卖原价<del>498del>,现价<ins>198ins>
    p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

运行结果
在这里插入图片描述

三.数学符号

代码

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <em>我爱你em>有种左灯右行的冲突 

    <p>
        a<sup>2sup> + b <sup>2sup> = c <sup>2sup>  勾股定理 
    p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

结果如下
在这里插入图片描述

6.图片修饰标签

一.网络图片

如果是网络图片，就直接复制来链接输入stc后面，title：用于告诉浏览器，当鼠标悬停在图片上时，需要弹出的描述框中显示什么内容
alt：其实是alternate的缩写，它的作用就是告诉浏览器，当需要的图片找不到时显示什么内容

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <img src="https://bkimg.cdn.bcebos.com/pic/9e3df8dcd100baa1a5fd20114d10b912c9fc2e42?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg" alt="" title="">
    <img src="C:\Users\周浩\Pictures\QQ图片20220302224442.jpg" alt="" title="" width="200px" height="200px">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

结果如下
在这里插入图片描述

二.本机文件

…/可以进入上一层目录，然后进入 image 文件夹，最后找到 img.jpg。
如果在同一文件内，./或者直接输入照片的地址可以直接找到照片

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <img src="./科比.jpg" alt="">
    <br>
    <img src="科比.jpg" alt="">
    <img src="../科比01.jpg" alt="">

    <img src="./img/科比02.jpg" alt="">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果
在这里插入图片描述

7.超链接跳转

a标签里面的 target 属性决定了此超链接是否跳转到其他页面还是在本页面内跳转
href 属性后面的则是网页的网址

一.文字链接

1.在此页面跳转

DOCTYPE html>
<html lang="en">
<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>超链接a标签title>
head>
<body>
    <a href="https://www.baidu.com" target="_self">百度a>
    

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.打开新页面

DOCTYPE html>
<html lang="en">
<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>超链接a标签title>
head>
<body>
    
    <a href="https://www.baidu.com" target="_blank">百度a>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二.图片链接

注意：图片链接的跳转需要将img标签放入到a标签内

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <a href="https://baike.baidu.com/item/%E7%A7%91%E6%AF%94%C2%B7%E5%B8%83%E8%8E%B1%E6%81%A9%E7%89%B9/318773"> 
        <img src="./科比.jpg" alt="科比" title="科比">
    a>
    <br>
    <a href="./018-a标签图片超链接test.html" target="_blank">详细a>

    <a href="./detal/test.html" target="_blank">
        <img src="./科比.jpg" alt="科比" title="科比">
    a>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行结果
在这里插入图片描述
其他的音频标签和视频标签类似

8.锚点标签

需要给文章添加选择器，然后通过a标签制造锚点，就可以迅速跳转到那个地方

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>


    <a href="#秒杀">京东秒杀a><br>
    <a href="#优选">特色优选a><br>
    <a href="#广场">频道广场a><br>
    <a href="#推荐">推荐a><br>







    <h1 id="top">h1>
    <h2 id="秒杀">京东秒杀h2>
    <p>
        京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀京东秒杀
    p>
    <h2 id="优选">特色优选h2>
    <p>特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选特色优选p>
    <h2 id="广场">频道广场h2>
    <p>
        频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场频道广场
    p>
    <h2 id="推荐">推荐h2>
    <p>
        推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐推荐 
    p>


    <a href="#top">返回a>
body>
html>
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
34
35
36
37
38
39
40
41
42

运行结果如下
在这里插入图片描述
点击相应的标签就可以跳转到对于的地方

9.表格标签

一共有三种表格
在下面全部一起列举，就不一一列举了

DOCTYPE html>
<html lang="en">
<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>Documenttitle>
head>
<body>
    <ul>
        
        <li>苹果li>
        <li>香蕉li>
        <li>荔枝li>
    ul>

    <br>
    <ol>
        
        <li>啊实打实li>
        <li>去哦i文化的li>
    ol>
    <br>
    <dl>

        
        <dt>老板dt>
        <dd>周浩dd>
        <dd>5465dd>
    dl>
body>
html>
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

三种表格的结果和作用各不相同
运行结果如下
在这里插入图片描述
分别为ul li
ol li
dl …

总结

以上是我对html浅显的理解，如有不足还希望大神补充勉励

相关阅读:
如何理解PoW工作量证明？
wsl端口转发远程链接
 Linux基础知识——tmux和vim
今天就分享一段话
 java自定义注解及其使用
 Web3去中心化存储生态图景
 如何缓解压力、拒绝内耗【1】
从零开始学习调用百度地图网页API：二、初始化地图，鼠标交互创建信息窗口
 134. 加油站
 WZOI-348机动车违章识别系统
原文地址：https://blog.csdn.net/qq_62277444/article/details/126911748

HTML小结

HTML小结

文章目录

前言

一、HTML是什么？

二、HTML的基本使用

标签属性

1.标题标签

2.水平标签

3.段落标签

4.分行标签

5.文本修饰标签

一.加粗和倾斜

二.下划线和取消线

三.数学符号

6.图片修饰标签

一.网络图片

二.本机文件

7.超链接跳转

一.文字链接

1.在此页面跳转

2.打开新页面

二.图片链接

8.锚点标签

9.表格标签

总结