【HTML5】1.语法入门总结（第一部分）_

作者：码创造者 | 2024-07-18 12:43:33

踩

0.思维导图

1.HTML5基本框架

HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。
第一个程序，基本框架。

<!DOCTYPE html>
<html lang="zh-CN">
<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>第一个程序</title>
</head>
<body>
   hello world
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

2.语法举例

2.1.标题标签

有h1-h6级标题

<!DOCTYPE html>
<html lang="zh-CN">
<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>标题标签</title>
</head>
<body>
    <h1>标题标签口诀</h1>    
    <h1>标题一共六级选</h1>    
    <h2>文字加粗一行显</h2>    
    <h3>由小到大依次减</h3>    
    <h4>从重到轻随之变</h4>    
    <h5>语法规范随后写</h5>    
    <h6>具体效果刷新见</h6>    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.2.段落与换行

p：段落
br:换行

<!DOCTYPE html>
<html lang="zh-CN">
<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>段落与换行</title>
</head>
<body>
    <p>HTML的全称为超文本标记语言，是一种标记语言。<br />它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 </p> 
    <p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

2.3.文本格式化标签

一般用第一个，有语义。

<!DOCTYPE html>
<html lang="zh-CN">
<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>文本格式化标签</title>
</head>
<body>
    我是<strong>加粗</strong> <br/>
    我是<b>加粗</b> <br/>

    我是<em>倾斜</em> <br/>
    我是<i>倾斜</i> <br/>
    我是<del>删除</del>线 <br/>
    我是<s>删除</s>线 <br/>
    我是<ins>下划线</ins>线 <br/>
    我是<u>下划线</u>线 <br/>    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2.4.div和span盒子标签

<!DOCTYPE html>
<html lang="zh-CN">
<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>div和span盒子标签</title>
</head>
<body>
    <p>盒子标签：用于分区，布局。<br />
        div是division的缩写，表示分割、分区。span意为跨度、跨距。</p>

        <div>我是div标签，我一个人占一行。</div>大盒子
        <div>我是div标签，我一个人占一行。</div>大盒子

        <br /><br />
        <span>百度</span>
        <span>新浪</span>
        <span>微博</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.5.图像标签和路径

<!DOCTYPE html>
<html lang="zh-CN">
<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>图像标签和路径</title>
</head>
<body>
    <h4>图像标签和使用规则图：</h4>
    <img src="img.png" alt=""/>


    <h4>alt：图像显示不出来，用文字替换</h4>
    <img src="img1.png" alt="alt：图像显示不出来，用文字替换"/>

    <h4>title：鼠标放在屏幕上的提示文本</h4>
    <img src="img.png" title="title img标签的使用方法" alt="alt：图像显示不出来，用文字替换" />

    <h4>width=400 宽度</h4>
    <img src="img.png" title="title img标签的使用方法" alt="alt：图像显示不出来，用文字替换" width=400/>

    <h4>height=100 高度</h4>
    <img src="img.png" title="title img标签的使用方法" alt="alt：图像显示不出来，用文字替换" height=100/>

    <h4> border=10 边界</h4>
    <img src="img.png" title="title img标签的使用方法" alt="alt：图像显示不出来，用文字替换" border=10/>
</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

图像标签的其他属性：
在这里插入图片描述

在这里插入图片描述

2.6.超链接标签

<!DOCTYPE html>
<html lang="zh-CN">
<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>14.超链接标签</title>
</head>
<body>
    <h4>01.外部链接</h4>
    <a href="http://www.qq.com">腾讯</a>
    <br />默认当前窗口打开 _self <br />
    <a href="http://www.bilibili.com" target="_blank">b站</a>
    <br />新窗口打开 target="_blank" <br />

    <h4>02.内部链接</h4>
    <a href="14.1.内部链接演示.html"  target="_blank">打开内部链接</a>

    <h4>03.空链接 #</h4>
    <a href="#"  target="_blank">公司地址</a>

    <h4>04.下载文件链接 </h4>
    <a href="img.7z"  target="_blank">下载地址</a>

    <h4>05.网页元素链接</h4>
    <a href="http://www.bilibili.Com"  target="_blank"><img src="images/b站图标.png"></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

锚点定位：

<!DOCTYPE html>
<html lang="zh-CN">
<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>14.超链接标签</title>
</head>
<body>
    <p>
    6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.<br />
    在链接文本的href属性中，设置属性值为#名字的形式， href="#two"<br />
    找到目标位置标签，里面添加一个id属性=刚才的名字，如: id="two"<br />
</p>


    <h4>目录</h4>
    <a href="#base">基本信息</a> <br />
    <a href="#things">大事件</a><br />



    <h4 id="base">基本信息</h4>
    <p>
    刘德华（Andy Lau），1961年9月27日出生于中国香港，籍贯广东新会，中国香港影视男演员、歌手、制片人、作词人。</p>
    <p>1981年出演电影处女作《彩云曲》。1983年主演的武侠剧《神雕侠侣》在香港取得62点的收视纪录 [1-2]  。1985年发行首张个人专辑《只知道此刻爱你》 [11]  。1990年凭借专辑《可不可以》在歌坛获得关注 [12]  。1991年创办天幕电影公司 [3]  。1994年获得十大劲歌金曲最受欢迎男歌星奖；同年担任剧情片《天与地》的制片人 [4]  。1995年在央视春晚上演唱其代表作《忘情水》 [13]  。2000年凭借警匪片《暗战》获得金像奖最佳男主角奖 [5]  ；同年被《吉尼斯世界纪录大全》评为获奖最多的香港男歌手 [14]  。</p>
    <p>2004年凭借剧情片《大块头有大智慧》获得金像奖最佳男主角奖 [271]  ；同年凭借警匪片《无间道3：终极无间》获得金马奖最佳男主角奖 [6]  ；同年第六次获得十大劲歌金曲最受欢迎男歌星奖。2005年获得香港UA院线颁发的全港最高累积票房香港男演员奖 [7]  。2006年获得釜山国际电影节亚洲最有贡献电影人奖 [8]  。2012年凭借剧情片《桃姐》获得金马奖、金像奖最佳男主角奖 [9]  ；同年担任第49届台湾电影金马奖评审团主席 [10]  。2015年第5次登上央视春晚并演唱歌曲《回家的路》 [15]  。2020年发行个人首张数字专辑《演·唱》 [261]  。
    </p>
    <p>演艺事业外，刘德华关心公益慈善。1994年创立刘德华慈善基金会。2000年被评为世界十大杰出青年 [16]  。2005年发起亚洲新星导计划 [17]  。2008年被委任为香港非官守太平绅士 [18]  。2010年获得第12届世界杰出华人奖 [19]  。2016年连任中国残疾人福利基金会副理事长 [16] 。</p>

    <h4 id="things">大事件</h4>
    <p>
    1961年9月27日 出生于中国香港<br />
    1961年9月27日出生于中国香港新界，籍贯广东新会。</p>

    <p>1981年 香港电视广播有限公司的艺员训练班受训<br />
    1981年，考进第10期无线电视艺员训练班。</p>
</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

2.7.注释特殊字符

<!DOCTYPE html>
<html lang="zh-CN">
<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>16.注释标签和特殊字符</title>
</head>
<body>
    <!-- 注释标签  特殊字符大于和小于号用&lt; &gt;代替 -->
    <h4>注释标签的格式：</h4>
    &lt;!-- 注释内容 --&gt;
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/845714