HTML笔记

HTML 笔记

创建以笔记.html文件

格式规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DOCTYPE声明中指出阅读程序应该用什么规则来解释文档中的标记。-->
<!DOCTYPE html> 

<!-- <html lang="zh-CN"> </html> 指定使用什么语言 zh-CN为中文-->
<html lang="zh-CN">
  
    <head>
        <!-- <meta chatset="UFT-8"> 标签用来表达使用的字符集,utf-8为万国码 -->
        <meta charset="UTF-8">
      
        <title>这是页签</title>
    </head>
  
    <body>   
    </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
<!-- DOCTYPE声明中指出阅读程序应该用什么规则来解释文档中的标记。-->
<!DOCTYPE html> 

<!-- <html lang="zh-CN"> </html> 指定使用什么语言 zh-CN为中文-->
<html lang="zh-CN">
  
    <head>
        <!-- <meta chatset="UFT-8"> 标签用来表达使用的字符集,utf-8为万国码 -->
        <meta charset="UTF-8">
      
        <title>排版标签</title>
    </head>
        <h1> 标题 h1最好写一个 </h1>
        
        <h2> h2-h6可以适当多写 ，一般h2,h3，h4用的比较多，来表达比h1重要性依次低的标题 </h2>
        
        <h3> 标题标签不能相互嵌套 </h3>
        
        <p>  段落 p标签是用来定义段落的，也就是我们常见的文字内容 </p>
        
        <p>  p标签很特殊！它里面不能嵌套h1-h6标签、div容器标签 包括它自己p标签 </p>
        
        <div> div 标签相当于是一个容器，可以吧div标签内嵌套的标签批量设置属性 </div>
    <body>   
    </body>
  
</html>
标签名 标签含义 单/双标签
h1-h6 标题 双
p 段落 双
div 没有任何含义，用于包含标签整体布局，相当于容器，批量容器中的管理排版标签 双

语义化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
</head>
<body>
    <h1>把个人信息“安全堤”筑牢</h1>
    <h4>2022-06-21 07:34 · 1347评论</h4>
    <div>
        <p>置身互联网时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露的风险。</p>
        <p>一些APP声称看视频、玩游戏甚至走路都能赚钱，但是用户想提现却难上加难，还容易泄露个人信息。</p>
    </div>
</body>
</html>

语义： 也就是含义 用特定的标签表达特定的内容

语义化：标签默认的展示效果不重要，语义最重要

1，代码的可读性强，清晰

2，有利于SEO （搜索引擎优化）比如 爬虫，机器人，代码

3，方便设备解析 （屏幕阅读器，盲人阅读器），优先阅读语义比较重要的内容，按上面例子优先阅读h1 > h4 > div容器中包含p段落的内容

块级元素与行内元素

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>块级元素与行内元素</title>
</head>
<body>
    <!-- 块级元素 特点：独占一行    如下 -->
    <marquee bgcolor="orange">尚硅谷</marquee>
    

    <!-- 行内元素 特点：不独占一行  如下 -->
    <input type="text">

    <!-- 规则1：块级元素只能中能写：行内元素，块级元素，（几乎什么都能写） -->
    <div>
        <span>尚硅谷1</span>
        <input type="text">
        <p>尚硅谷2</p>
        <div>尚硅谷3</div>
    </div>

    <!-- 规则2：行内元素中能写行内元素，但不要能写块级元素 -->
    <span>    
        <span>尚硅谷-行内元素</span>
        <input type="text">
        <span>尚硅谷-行内元素</span>
        <div>尚硅谷-错误示范-块级元素</div>
    </span>
    <span>尚硅谷-行内元素</span>
</body>
</html>

块级元素 特点：独占一行 如下

image-20231014224123104

行内元素 特点：不独占一行 如下

image-20231014224223268

规则1：块级元素只能中能写：行内元素，块级元素，（几乎什么都能写）

image-20231014224738415规则2：行内元素中能写行内元素，但不要能写块级元素

行内元素中能写行内元素 – 正确写法

image-20231014225637214

行内元素中写行内加块级元素 – 错误示范

image-20231014231257394

文本标签

常用文本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>常用文本标签</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        预防电信诈骗，请安装：<em>国家反诈中心APP</em>。
    </p>
    <p>
        当我们出门的时候，<strong>一定要关好门窗</strong>。
    </p>
    <p>
        前端三个框架为：<span>Angular、React、Vue</span>。
    </p>
</body>
</html>

image-20231014233203859

标签名 标签语义 单/双标签
em 要着重阅读的内容 双
strong 十分重要的内容（语气比em更强） 双
span 没有语义，包裹短语的通用容器 双

1、用于包裹：词汇、短语等

2、通常写在排版标签里面

3、排版的标签更宏观（大段的文字），文本标签更微观，（词汇，短语）

4、文本标签通常都是行内元素

图片标签

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!-- img src 用来配置图片的路径 -->
    <!-- 相对路径 -->
    <!-- ./为当前路径 -->
    <img width="400px"  src="./2022010914370810.jpg" alt="壁纸1">
    <img width="400px"  src="./imges/跑车1.JPEG.webp" alt="跑车1">


    <!-- 绝对路径 -->
    <!-- 本地绝对路径 -->
    <img width="400px" src="D:/图片/跑车3.JPEG.webp" alt="跑车3">

    <!-- 网路绝对路径 -->
    <img width="400px" src="https://qn.wanwancloud.cn/typora/2022010914370810.jpg" alt="壁纸">
   
    <!-- 图片base64编码 -->
    <img width="400px" src="" alt="">
</body>
</html>

image-20231015000601426

超链接跳转页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="zh-CN>
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 在当前页打开 -->
    <a href="https://wanwancloud.cn" >博客</a>
    <a href="https://www.baidu.com">百度</a>
    
    <!-- 在新的标签页打开 -->
    <a href="https://www.wanwancloud.cn" target="_blank">我的主页</a>
    <a href="https://jk.wanwancloud.cn" target="_blank" >监控</a>
</body>
</html>

image-20231017094447142

超链接跳转文件

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接跳转文件</title>
</head>
<body>
    <!-- 浏览器默认会直接查看可查看的文件 -->
    <a href="./imges/动漫.jpg">看东动漫这个文件</a>
    <a href="./imges/灰太狼.pdf">看灰太狼的PDF文件</a>
    <a href="./imges/46f253bec3779336f365e3b1455f4ec2.mp4">看视频文件</a>
    <!-- 这里也可以查看gif文件，默认直接查看 由于没有这种文件就没写了 -->
    

    <!-- 下载文件需要加download参数 -->
    <a href="./imges/动漫.jpg" download >下载动漫图片</a>
    <a href="./imges/灰太狼.pdf" download= >下载灰太狼的PDF文件</a>
    <!-- 当download 有参数但没有值时，下载文件名默认名为文件名 -->
    <a href="./imges/46f253bec3779336f365e3b1455f4ec2.mp4" download >下载视频文件</a>
    <!-- 当download="飞机.mp4" 有参数时并有值时，下载默认名会是新定义的值-->
    <a href="./imges/46f253bec3779336f365e3b1455f4ec2.mp4" download="飞机.mp4">下载飞机视频文件</a>



    <!-- 此下面内容跟本文无关，下文跳转锚点使用 -->
    <p id="hmbb">这是海绵宝宝</p>
    <img src="./imges/海绵宝宝.jpg"  width="800px" alt="海绵宝宝">
</body>
</html>

image-20231017095249025

image-20231017095157545

超链接跳转锚点

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
43
44
45
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接跳转锚点</title>
</head>
<body>
    <!-- 定义锚点时，锚点名不能重复，且不建议以数字开头 -->
    <!-- 锚点跳转使用 name 方式-->
    <a href="#gtx">看钢铁侠</a>
    <a href="#dmbz">看动漫壁纸</a>
    
    <!-- 锚点跳转使用 id 方式-->
    <a href="#hmbb">看海绵宝宝</a>
    <a href="#xnh">看小女孩</a>

    <!-- 跳转其他文件中的锚点 通过id方式  -->
    <a href="./08_超连接跳转文件.html#hmbb" target="_blank" >看其他页面的海绵宝宝</a>

    <!-- id方式 需要在p标签中添加id定义锚点 -->
    <p id="hmbb">蟹黄堡海绵宝宝</p>
    <img src="./imges/海绵宝宝.jpg" width="800px" alt="海绵宝宝">

    <!-- name方式，需要添加新的超链接，值为空，仅定义锚点 -->
    <a name="gtx"></a>
    <p>超帅钢铁侠</p>
    <img src="./imges/钢铁侠.jpg" width="800px" alt="钢铁侠">

    <!-- id方式 需要在p标签中添加id定义锚点 -->
    <p id="xnh">可爱的小女孩</p>
    <img src="./imges/小女孩.jpg" width="800px" alt="小女孩">

    <!-- name方式，需要添加新的超链接，值为空，仅定义锚点 -->
    <a name="dmbz"></a>
    <p>动漫壁纸</p>
    <img src="./imges/动漫.jpg" width="800px" alt="动漫">

    <!-- 不定义的锚点 -->
    <!-- # 和空的区别 -->
    <p>整体介绍完毕</p>
    <a href="#">回到顶部</a>
    <a href="">刷新页面</a>

</body>
</html>

image-20231017100640959

这是a标签name的方式会有空白 突兀的空隙

image-20231017100817740

这是p标签id的方式直接顶部占满没有空隙

image-20231017101049927

超链接跳转指定应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接唤起指定应用</title>
</head>
<body>
    <!-- 唤起设备拨号 -->
    <a href="tel:10010">电话联系</a>
    <!-- 唤起设备发送邮件 -->
    <a href="mailto:10010@qq.com">邮件联系</a>
    <!-- 唤起设备发送短信 -->
    <a href="sms:10010">短信联系</a>
</body>
</html>

有序列表
HTML
#HTML